WAI-ARIA 1.2

グローバル ARIA 属性

すべてのHTML要素に使用できるARIA属性です。アクセシブルな名前の付与、要素の非表示、ライブリージョンの制御などに使用します。

属性一覧

属性型説明使用例
aria-labelstring要素にアクセシブルな名前を直接指定します。視覚的なラベルがない場合に使用します。
<nav aria-label="メインナビゲーション">
aria-labelledbyID参照別の要素のIDを参照してアクセシブルな名前を設定します。既存のテキストをラベルとして再利用できます。
<h2 id="title">設定</h2>
<div aria-labelledby="title">
aria-describedbyID参照要素の追加説明を別の要素から参照します。補足情報やエラーメッセージの関連付けに使用します。
<input aria-describedby="hint">
<p id="hint">8文字以上</p>
aria-hiddentrue | false要素をアクセシビリティツリーから除外します。装飾的な要素や重複コンテンツに使用します。
<span aria-hidden="true">★</span>
aria-liveoff | polite | assertive動的に変更されるコンテンツをスクリーンリーダーに通知します。通知の緊急度を指定できます。
<div aria-live="polite">更新中...</div>
aria-atomictrue | falseライブリージョン更新時に、変更部分のみか領域全体を読み上げるかを制御します。
<div aria-live="polite" aria-atomic="true">
aria-relevantadditions | removals | text | allライブリージョンでどの種類の変更を通知するかを指定します。
<ul aria-live="polite" aria-relevant="additions">
aria-busytrue | false要素が更新中であることを示します。更新完了までスクリーンリーダーの通知を抑制できます。
<div aria-busy="true">読み込み中...</div>
aria-disabledtrue | false要素が無効状態であることを支援技術に伝えます。HTMLのdisabled属性と異なりフォーカス可能なまま残せます。
<button aria-disabled="true">送信</button>
aria-currentpage | step | location | date | time | true | falseコンテナやセット内の現在のアイテムを示します。ナビゲーションの現在のページなどに使用します。
<a aria-current="page" href="/home">ホーム</a>

ライブデモ

aria-hidden のデモ

aria-hidden="true"にすると、要素は視覚的に表示されたまま、アクセシビリティツリーから除外されます。

装飾アイコン付きテキスト

このコンテンツはスクリーンリーダーに読み上げられます

<div> — ATに含まれる

aria-label vs aria-labelledby の違い

aria-label：直接ラベルを指定

<nav aria-label="メインナビゲーション">
  <!-- ラベルは属性値に直接記述 -->
</nav>
aria-labelは視覚的に表示されないラベルを設定し、aria-labelledbyは既存の見出しやテキストを参照します。ページ上に見出しがある場合はaria-labelledbyを優先しましょう。

参考リンク