HTML Living Standard/ARIA属性

ARIA属性

ARIA（Accessible Rich Internet Applications）属性は、Webコンテンツのアクセシビリティを向上させるための属性群です。これらの属性は支援技術に対して要素の役割、状態、プロパティを伝達します。

基本的なARIA属性

role属性

role属性は要素の意味的な役割を定義します。HTMLの標準的な要素で表現できない場合に使用します。

<div role="navigation">
  <ul role="menubar">
    <li role="menuitem">ホーム</li>
    <li role="menuitem">製品</li>
  </ul>
</div>

aria-label属性

視覚的なラベルが存在しない要素に対して、アクセシブルな名前を提供します。

<button aria-label="メニューを閉じる">×</button>

aria-describedby属性

要素の詳細な説明を提供する別の要素のIDを参照します。

<input type="text" aria-describedby="password-requirements">
<div id="password-requirements">
  パスワードは8文字以上で、英数字を含める必要があります。
</div>

状態を表すARIA属性

aria-expanded

展開可能な要素の現在の状態を示します。

<button aria-expanded="false" aria-controls="menu">
  メニュー
</button>
<ul id="menu" hidden>
  <li>項目1</li>
  <li>項目2</li>
</ul>

aria-pressed

トグルボタンの状態を示します。

<button aria-pressed="false">
  ダークモード
</button>

aria-selected

選択可能な要素の選択状態を示します。

<div role="tablist">
  <button role="tab" aria-selected="true">タブ1</button>
  <button role="tab" aria-selected="false">タブ2</button>
</div>

関係性を表すARIA属性

aria-controls

現在の要素が制御する別の要素のIDを指定します。

<button aria-controls="dialog1">
  ダイアログを開く
</button>
<div id="dialog1" role="dialog" hidden>
  ダイアログの内容
</div>

aria-owns

DOM構造上は子要素でないが、論理的には子要素として扱われるべき要素のIDを指定します。

<div role="tree">
  <div role="treeitem" aria-owns="group1">
    親項目
  </div>
</div>
<div id="group1">
  <div role="treeitem">子項目1</div>
  <div role="treeitem">子項目2</div>
</div>

ライブリージョン属性

aria-live

動的に更新される領域の重要度を指定します。

<div aria-live="polite">
  自動的に更新される通知エリア
</div>

ARIAの使用に関する重要な注意点

ネイティブのHTML要素で実現できる場合は、ARIAの使用を避け、HTMLの意味的要素を優先します。
role属性と組み合わせて使用する場合、そのroleに適切なARIA属性のみを使用します。
動的なコンテンツを扱う場合、適切なタイミングでARIA属性を更新する必要があります。

アンチパターン

以下のような使用方法は避けるべきです：

<!-- 不適切: ネイティブのbutton要素を使うべき -->
<div role="button" onclick="handleClick()">
  クリック
</div>

<!-- 不適切: 矛盾する状態 -->
<div role="checkbox" aria-checked="true" aria-pressed="false">
  チェックボックス
</div>

推奨される使用方法

<!-- 適切: ネイティブ要素の使用 -->
<button type="button" aria-pressed="false">
  トグルボタン
</button>

<!-- 適切: カスタムコンポーネントでの使用 -->
<div role="combobox"
     aria-expanded="false"
     aria-controls="listbox1"
     aria-haspopup="listbox">
  カスタムセレクトボックス
</div>

参考文献