ARIA (Accessible Rich Internet Applications) は、ネイティブ HTML では表現できないアクセシビリティセマンティクス(ロール、状態、プロパティ)を追加する属性のセットです。しかし、最も重要な ARIA のルールは: ネイティブ HTML を優先することです。
ARIA の第一ルール: ARIA を使わない
html
Save
Save
ARIA (Accessible Rich Internet Applications) は、ネイティブ HTML では表現できないアクセシビリティセマンティクス(ロール、状態、プロパティ)を追加する属性のセットです。しかし、最も重要な ARIA のルールは: ネイティブ HTML を優先することです。
Save
Save
ネイティブ要素には、正しいロール、キーボード動作、フォーカスが組み込まれています。ARIA が必要なのは、ネイティブ要素で対応できない場合だけです。
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
これは本当に有用な ARIA の用途です: ページリロードなしに変わるコンテンツ(検索結果、トースト、バリデーションエラー)をスクリーンリーダーに知らせます。
不正な ARIA は何もないより悪い — スクリーンリーダーユーザーに誤った情報を与えます。また、ARIA はセマンティクスのみを変更し、動作は変わりません: <div> に role="button" を付けても、フォーカス可能にもクリック可能にもなりません。tabindex とキーハンドラーを自分で追加する必要があります。
95% のケースではセマンティック HTML を使用します。ARIA は、カスタムウィジェット(タブ、コンボボックス、メニュー)のギャップを埋めるため、および live regions を通じた動的な更新をアナウンスするために使用します。
ルールに従ってください — ネイティブを優先し、ネイティブセマンティクスを不用意に変更せず、状態を同期に保ち、完全に実装していないロールを適用しないでください。