0Pricing
HTML Academy · レッスン

role button alert dialog landmark

ARIAロールを適用して、支援技術に要素の目的を伝えます

「role button alert dialog landmark」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。

role=button

ボタンではない要素をボタンとして動作させる必要がある場合（まれです）に、role="button"を使用します。

<span
  role="button"
  tabindex="0"
  onclick="handleClick()"
  onkeydown="e.key==='Enter'||e.key===' ' ? handleClick() : null"
  aria-pressed="false"
>
  Toggle Feature
</span>
<!-- Better: use a real <button> element! -->
<!-- Only use role="button" when you cannot change the HTML element -->

role=alert

role="alert"は、コンテンツの変更をスクリーンリーダーに即座にアナウンスします。

<div role="alert" id="error-msg"></div>

<script>
// When injecting an error:
document.getElementById('error-msg').textContent = 'Invalid email address.';
// Screen readers announce this immediately without the user moving focus
// role="alert" implies aria-live="assertive" aria-atomic="true"
</script>

role=dialog

role="dialog"は、モーダルダイアログコンポーネントを示します。

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="dialog-title"
  aria-describedby="dialog-desc"
  id="confirm-dialog"
  tabindex="-1"
>
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p id="dialog-desc">This action cannot be undone.</p>
  <button>Cancel</button>
  <button>Delete</button>
</div>

dialog要素とrole=dialog

最新のHTML5には、ネイティブの<dialog>要素があります。

<dialog id="confirm" aria-labelledby="dialog-title">
  <h2 id="dialog-title">Confirm Deletion</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="confirm">Delete</button>
  </form>
</dialog>

<script>
document.getElementById('confirm').showModal();
</script>
<!-- Native dialog handles focus trap and Escape key automatically -->

ランドマークロールの概要

ARIAのランドマークロールは、ページを移動可能な領域に整理します。

<header role="banner">...</header>
<nav role="navigation">...</nav>
<main role="main">...</main>
<aside role="complementary">...</aside>
<footer role="contentinfo">...</footer>
<form role="form" aria-label="Search">...</form>
<section role="region" aria-label="Stats">...</section>
<!-- Note: prefer semantic HTML elements over ARIA roles
     Only add role= when using generic divs/spans -->

複数のナビゲーションランドマーク

ページに複数のnav要素がある場合は、aria-labelで区別します。

<nav aria-label="Primary navigation">
  <ul>...</ul>
</nav>

<nav aria-label="Table of contents">
  <ol>...</ol>
</nav>

<nav aria-label="Footer links">
  <ul>...</ul>
</nav>
<!-- Screen reader landmark list shows: "Primary navigation, navigation"
     "Table of contents, navigation" etc. -->

role=status

role="status"は、緊急性のない更新を控えめにアナウンスします。

<!-- Use for: success messages, loading complete, items added -->
<div role="status" aria-live="polite" id="cart-status"></div>

<script>
// When item added to cart:
document.getElementById('cart-status').textContent = '3 items in cart';
// Screen reader announces this when it finishes reading current content
// Less urgent than role="alert"
</script>

role=region

role="region"は、名前付きのランドマーク領域を作成します。

<section
  role="region"
  aria-labelledby="stats-heading"
>
  <h2 id="stats-heading">Site Statistics</h2>
  <dl>...</dl>
</section>
<!-- role="region" only creates a landmark IF it has an accessible name
     Without aria-label or aria-labelledby, it is not a landmark -->

role=search

role="search"は、検索機能を示します。

<form role="search" action="/search">
  <label for="q">Search</label>
  <input type="search" id="q" name="q">
  <button type="submit">Go</button>
</form>
<!-- role="search" landmark: screen readers list it as "Search, search"
     Users jump directly to the search form -->

role=presentationとnone

role="presentation"（別名：role="none"）は、要素からセマンティクスを取り除きます。

<!-- Table used for layout (bad practice, but if inherited): -->
<table role="presentation">
  <tr><td>Layout column 1</td><td>Layout column 2</td></tr>
</table>
<!-- role="presentation" removes the table semantics
     Screen reader won't announce it as a table
     Children's semantics are also affected -->

確認

role=alertとrole=statusの違いは何ですか。

まとめ：ARIAロール

よく使われるARIAロール：

  • role="button" — ボタンではない要素をボタンとして動作させる（tabindex + JSを追加）
  • role="alert" — 即座に強くアナウンスする
  • role="dialog" — モーダルダイアログ（ネイティブの<dialog>を優先）
  • role="status" — 更新を控えめにアナウンスする
  • role="region" — 名前付きセクションのランドマーク
  • role="search" — 検索フォームのランドマーク

よくある質問

「role button alert dialog landmark」レッスンは無料ですか？

はい。「role button alert dialog landmark」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。

「role button alert dialog landmark」で何を学びますか？

ARIAロールを適用して、支援技術に要素の目的を伝えます ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

HTML Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「role button alert dialog landmark」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このHTML Academyレッスンでコードを書いて実行できますか？

はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. ARIAとネイティブHTMLの使い分け
  2. role button alert dialog landmark
  3. aria-label aria-labelledby aria-describedby
  4. aria-hiddenとaria-live
← HTML Academyに戻る