ARIA のロールと属性
ランドマークロール、ライブリージョン、aria-* 属性を適用し、ネイティブ HTML では不十分なコンポーネントのアクセシビリティを高めます。
「ARIA のロールと属性」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
ARIAとは何か
ARIA（Accessible Rich Internet Applications）は、要素のロール、状態、プロパティを支援技術に伝えるHTML属性の集合です。ネイティブHTMLでは表現できないカスタムウィジェットを支える橋渡しとなります。
ARIAの第一原則：ARIAを使わない
ネイティブ要素で必要なことができるなら、それを使います。<button>は<div role="button">より優れています。誤って使ったARIAは、ARIAを使わないよりも悪い結果になります。アクセシブルに聞こえるように見せながら、利用者を行き詰まらせるためです。
ARIA属性のカテゴリー
カテゴリーは3つあります。ロール（何であるか）、プロパティ（比較的静的な情報：aria-label、aria-describedby）、状態（動的な情報：aria-expanded、aria-pressed、aria-checked）です。
ランドマークロール
ページの主要な領域を識別します。ほとんどのロールにはHTML5の対応要素があるため、そちらを優先してください。
<!-- HTML5 (preferred): -->
<nav>...</nav>
<main>...</main>
<aside>...</aside>
<!-- ARIA equivalents (use only when HTML5 won't work): -->
<div role="navigation">...</div>
<div role="main">...</div>
<div role="complementary">...</div>aria-labelとaria-labelledby
aria-label：文字列でアクセシブルな名前を指定します。aria-labelledby：別の要素のテキストを名前として参照します。表示テキストがない場合や、不十分な場合に使います。
<!-- Icon-only button needs a label: -->
<button aria-label="Close dialog">
<svg>...</svg>
</button>
<!-- Section labelled by its heading: -->
<section aria-labelledby="settings-title">
<h2 id="settings-title">Settings</h2>
...
</section>ヒントにはaria-describedbyを使う
aria-describedbyは、要素をより詳しい説明に関連付けます。フォームのヒント、エラーメッセージ、ツールチップに便利です。
<label for="password">Password</label>
<input id="password" type="password" aria-describedby="pw-hint">
<p id="pw-hint">Must be at least 12 characters with a number and symbol.</p>開閉状態にはaria-expandedを使う
パネルの表示・非表示を切り替えるボタンでは、aria-expandedにtrueまたはfalseを設定します。
<button aria-expanded="false" aria-controls="faq-1" onclick="toggle()">
How do I cancel?
</button>
<div id="faq-1" hidden>
Visit Settings > Billing to cancel.
</div>切り替えボタンにはaria-pressedを使う
オンとオフの状態を持つボタン（ミュート、太字など）にはaria-pressedを使います。
<button aria-pressed="true" onclick="toggleBold()">
Bold
</button>ライブリージョン：aria-live
動的に更新されるコンテンツ（トースト、検索結果、エラー概要など）は、スクリーンリーダーが変更を読み上げられるよう、ライブリージョンに含めます。politeは読み上げの間を待ち、assertiveは現在の読み上げに割り込みます。
<!-- Toast container -->
<div aria-live="polite" aria-atomic="true" id="toast-region"></div>
<!-- Critical alert -->
<div role="alert">Session expired. Please log in again.</div>role="alert"の省略記法
role="alert"は、aria-atomicを備えたassertiveライブリージョンの省略記法です。アラートは利用者の操作を中断するため、慎重に使います。
装飾コンテンツにはaria-hiddenを使う
aria-hidden="true"を使うと、要素がアクセシビリティツリーから除外されます。テキストラベルの隣にある装飾アイコンなどに使います。そうしないと、スクリーンリーダーが同じ内容を重複して読み上げます。
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>スクリーンリーダーでテストする
ARIAが機能するかを知る唯一の方法は、実際にテストすることです。VoiceOver（macOS/iOS、無料）、NVDA（Windows、無料）、TalkBack（Android、無料）を使えます。VoiceOverで10分テストするだけで、どの監査ツールよりも多くのことが分かります。
理解度チェック
表示テキストのラベルがないアイコンのみのボタンには、どのARIA属性を設定すべきですか？
ARIAの復習
ARIAはロール、プロパティ、状態を支援技術に伝えます。ARIAを使う前に、ネイティブHTMLを優先してください。aria-labelとaria-labelledbyはアクセシブルな名前を指定するために使います。ヒントにはaria-describedby、切り替えにはaria-expandedとaria-pressed、動的な通知にはaria-live、装飾コンテンツにはaria-hiddenを使います。必ず実際のスクリーンリーダーでテストしてください。
よくある質問
「ARIA のロールと属性」レッスンは無料ですか？
はい。「ARIA のロールと属性」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「ARIA のロールと属性」で何を学びますか？
ランドマークロール、ライブリージョン、aria-* 属性を適用し、ネイティブ HTML では不十分なコンポーネントのアクセシビリティを高めます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「ARIA のロールと属性」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。