HTMLのWAI-ARIA入門(aria-label・role)

WAI-ARIAは、HTMLだけでは伝えきれない役割・名前・状態を、スクリーンリーダーなどの支援技術に伝えるための属性群です。まずはaria-label・aria-hidden・roleの3つを押さえれば基本は十分です。

WAI-ARIAとは

WAI-ARIAは、W3Cが策定するアクセシビリティのための仕様で、HTMLの要素に属性を追加して「役割(role)」「名前」「状態」を支援技術へ伝えます。支援技術とは、画面の内容を音声で読み上げるスクリーンリーダーなどの補助ソフトのことです。

ブラウザはHTMLからアクセシビリティツリー(読み上げ用の構造データ)を作り、スクリーンリーダーはそれを手がかりに動作します。見た目だけで意味を表現した要素はこのツリーに情報が載らないため、ARIA属性で補います。

仕様の全文はW3C WAI-ARIAで、実務向けの解説はMDNのARIAで確認できます。

aria-labelの書き方と使いどころ

aria-labelは、要素に読み上げ用の名前(アクセシブルネーム)を文字列で直接指定する属性です。アイコンだけのボタンなど、画面に見えるテキストを持たない操作要素に使います。

次のコードは、記号だけのボタンに読み上げ用の名前を付ける例です。

<button aria-label="メニューを開く">☰</button>

スクリーンリーダーはこのボタンを「メニューを開く」と読み上げます。aria-labelの値は要素内のテキストより優先されるため、見えるテキストで十分伝わる要素には付けないのが原則です。

aria-hiddenで読み上げから除外する

aria-hidden="true"を指定した要素は、子孫要素ごとアクセシビリティツリーから除外され、読み上げの対象外になります。装飾目的の記号やアイコンに使います。

<p><span aria-hidden="true">★</span>お気に入りに追加しました</p>

見た目の表示はそのままで、「★」の読み上げだけが省略されます。リンクやボタンなどフォーカスできる要素にaria-hidden="true"を付けると、キーボードで到達できるのに読み上げられない状態になるため避けてください。

role属性の主な値一覧

role属性は、要素がどんな役割を持つかを支援技術に伝えます。よく使われる値は以下の通りです。

表の右列のとおり、多くのroleは対応するHTMLタグを使えば自動的に設定されます。roleを手書きするのは、alertのように対応タグがない場合に限るのが基本です。

ARIAを使う前にセマンティックタグを検討する

ARIAの第一原則は「同じ意味を持つHTMLタグで書けるなら、ARIAではなくそのタグを使う」ことです。<button>はrole指定なしでボタンとして伝わり、キーボード操作やフォーカスも最初から動作します。

一方<div role="button">は、フォーカスこそHTML属性のtabindex="0"を足すだけで可能ですが、EnterキーやSpaceキーを押したときの反応はJavaScriptで自作しない限り動作しません。誤ったARIAはARIAなしより体験を悪化させるため、まずnavやmainなどのセマンティックタグを検討してください。タグの選び方は「セマンティックHTMLとは」のページで扱っています。