ARIA(Accessible Rich Internet Applications)属性は、Webページのアクセシビリティを向上させます。
ARIA属性をいくつか紹介します。
aria-activedescendant:
現在アクティブな子要素のIDを指定します。
<ul role="listbox" aria-activedescendant="item2">
<li id="item1">One</li>
<li id="item2">Two</li>
</ul>
aria-atomic:
ライブリージョンの更新を通知する際、要素全体の情報をスクリーンリーダーに読み上げさせるかどうかを指定します。
<div aria-live="polite" aria-atomic="true">5 new messages</div>
aria-autocomplete:
入力フィールドが自動補完の機能を持っていることを示します。
<input aria-autocomplete="both">
aria-busy:
領域が更新中であることを示し、一時的にスクリーンリーダーから無視させます。
<div aria-busy="true">Loading...</div>
aria-checked:
チェックボックスやラジオボタンのチェック状態を示します。
<input type="checkbox" aria-checked="true">
aria-colcount:
テーブルやグリッドの列数を示します。
<table role="grid" aria-colcount="3">...</table>
aria-colindex:
列がテーブルまたはグリッドの何列目であるかを示します。
<td aria-colindex="2">...</td>
aria-colspan:
セルが何列にまたがるかを示します。
<td aria-colspan="2">...</td>
aria-controls:
現在の要素が制御する他の要素のIDを指定します。
<button aria-controls="text">Toggle</button>
<div id="text">Controlled text</div>
aria-current:
要素が現在アクティブまたは選択されていることを示します。
<li aria-current="page">Home</li>
aria-describedby:
要素の説明を提供する他の要素のIDを指定します。
<button aria-describedby="description">...</button>
<div id="description">This is a description of the button</div>
aria-details:
要素の詳細または注釈を提供する他の要素のIDを指定します。
<div aria-details="details">This element has details</div>
<div id="details">These are the details</div>
aria-disabled:
要素が無効化されていることを示します。
<button aria-disabled="true">Disabled Button</button>
aria-dropeffect:
ドラッグ＆ドロップ操作の結果を示します。
<div aria-dropeffect="copy">Drop here to copy</div>
aria-errormessage:
要素のエラーメッセージを提供する他の要素のIDを指定します。
<input aria-invalid="true" aria-errormessage="error">...</input>
<div id="error">This field is required</div>
aria-expanded:
展開可能な要素が現在展開されているかどうかを示します。
<button aria-controls="content" aria-expanded="false">Toggle</button>
<div id="content" style="display: none;">...</div>
aria-flowto:
フォーカスが次に移動する要素のIDを指定します。
<div tabindex="0" aria-flowto="two">One</div>
<div id="two" tabindex="0">Two</div>
aria-grabbed:
要素が現在ドラッグ＆ドロップ操作で「掴まれている」かどうかを示します。
<div draggable="true" aria-grabbed="false">Drag me</div>
aria-haspopup:
要素がポップアップメニューまたはサブレベルメニューを持っていることを示します。
<button aria-haspopup="true">Open Menu</button>
aria-hidden:
要素が視覚的に隠れていて、スクリーンリーダーから読み上げられるべきでないことを示します。
<div aria-hidden="true">Hidden text</div>
aria-invalid:
要素の値がエラーまたは無効であることを示します。
<input aria-invalid="true">
aria-keyshortcuts:
要素に関連付けられたキーボードショートカットを示します。
<button aria-keyshortcuts="Alt + M">Menu</button>
aria-label:
要素のラベルを提供します。通常、可視テキストラベルが存在しない場合に使用します。
<button aria-label="Close">X</button>
aria-labelledby:
要素のラベルを提供する他の要素のIDを指定します。
<button aria-labelledby="label">...</button>
<span id="label">Close</span>
aria-level:
ツリー構造の要素が現在の階層レベルを示します。
<h1 aria-level="1">Main title</h1>
<h2 aria-level="2">Sub title</h2>
aria-live:
要素の内容が動的に更新されるときに、その更新をスクリーンリーダーがどの程度の優先度で読み上げるべきかを示します。
<div aria-live="polite">Status: Idle</div>
aria-modal:
ダイアログやモーダルウィンドウが現在開いているかを示します。
<div role="dialog" aria-modal="true">...</div>
aria-multiline:
テキストボックスが複数行の入力を受け付けるかどうかを示します。
<textarea aria-multiline="true"></textarea>
aria-multiselectable:
ユーザーが複数の項目を同時に選択できるかどうかを示します。
<ul role="listbox" aria-multiselectable="true">
<li role="option">Option 1</li>
<li role="option">Option 2</li>
</ul>
aria-orientation:
要素の方向性（水平または垂直）を示します。
<div role="slider" aria-orientation="vertical">...</div>
aria-owns:
現在の要素がページの他の領域を所有することを示します。
<div id="field" aria-owns="list">...</div>
<div id="list">...</div>
aria-placeholder:
入力フィールドのプレースホルダーテキストを提供します。
<input aria-placeholder="Enter your name">
aria-posinset:
項目がセット内の何番目であるかを示します。
<li role="option" aria-posinset="3">Option 3</li>
aria-pressed:
トグルボタンの現在の状態を示します。
<button aria-pressed="false">Toggle</button>
aria-readonly:
要素が読み取り専用であることを示します。
<input aria-readonly="true">
aria-relevant:
ライブリージョンにおいて、どの種類の変更が通知されるべきかを示します。
<div aria-live="polite" aria-relevant="additions removals">...</div>
aria-required:
要素が入力または選択が必須であることを示します。
<input aria-required="true">
aria-roledescription:
要素の役割をより具体的に説明します。この属性はスクリーンリーダーの役割の読み上げをオーバーライドします。
<div role="navigation" aria-roledescription="main navigation">...</div>
aria-rowcount:
テーブルやグリッドの行数を示します。
<table role="grid" aria-rowcount="3">...</table>
aria-rowindex:
行がテーブルまたはグリッドの何行目であるかを示します。
<tr aria-rowindex="2">...</tr>
aria-rowspan:
セルが何行にまたがるかを示します。
<td aria-rowspan="2">...</td>
aria-selected:
要素が選択されているかどうかを示します。
<li role="option" aria-selected="true">Option 1</li>
aria-setsize:
項目がセット内の合計項目数を示します。
<li role="option" aria-setsize="5">Option 1</li>
aria-sort:
要素がソート可能であり、現在どのソート状態にあるかを示します。
<th aria-sort="ascending">Name</th>
aria-valuemax:
スライダーやスピナーなどの要素の最大値を示します。
<input type="range" aria-valuemax="100">
aria-valuemin:
スライダーやスピナーなどの要素の最小値を示します。
<input type="range" aria-valuemin="0">
aria-valuenow:
スライダーやスピナーなどの要素の現在の値を示します。
<input type="range" aria-valuenow="50">
aria-valuetext:
スライダーやスピナーなどの要素の現在の値をテキスト形式で示します。
<input type="range" aria-valuetext="50 percent">
aria-relevant:
ライブリージョンにおいて、どの種類の変更が通知されるべきかを示します。
<div aria-live="polite" aria-relevant="additions removals">...</div>
aria-busy:
要素が現在更新中であることを示します。
<div aria-busy="true">Loading...</div>