【WAI-ARIA】aria-labelとaria-labelledbyとaria-describedbyを使い分ける

はじめに

今回は WEB アクセシビリティ実装で混乱しがちな aria-label 、 aria-labelledby 、 aria-describedby の使い分けについて解説します。
これらは WEB フォームのエラー表示などで適切に使用するとアクセシビリティが向上します。

基本のテキスト

スクリーンリーダーで HTML 要素のテキストを選択するとその要素のテキストが自動的に読み上げられます。
例えば以下の要素はそれぞれ「おはようございます」「こんにちは」「こんばんは」と読み上げられます。

<a>おはようございます</a>
<h1>こんにちは</h1>
<button>こんばんは</button>

しかし HTML にはテキスト情報を持たない要素も多数存在します。
WAI-ARIAにはテキスト情報を持たない要素を適切に読み上げるための機能が定義されています。

aria-label 属性

この aria-label 属性にはテキストが存在しない要素にテキストを付与したり、元々のテキストを上書きする特性があります。
これによりスクリーンリーダーの利用者に対して画面上の情報を補足できます。

例えば以下の要素は通常のブラウザでは「おはようございます」と表示されますが、スクリーンリーダーでは「こんばんは」と読み上げられます。

<h1 aria-label="こんばんは">おはようございます</h1>

また、以下のように ul タグにラベルを付与することで、要素がただのリストではなく会社情報である旨がユーザーに伝わります。

<ul aria-label=" 会社情報 ">
  <li>○○株式会社</li>
  <li>20XX年設立</li>
</ul>

aria-labelledby 属性

aria-labelledby 属性は aria-label 属性と同様に要素にラベルを付与する役割を持ちますが、別の要素を参照してテキストを関連付ける特性があります。

そのため値にはテキストではなく別要素の id を指定します。
もし参照元の要素が CSS で非表示にされていてもちゃんと参照できます。

id を空白区切りで複数指定した場合は指定した順序でテキストが参照されて 1 つのラベルとして統合されます。
以下の例では span タグを選択した時に title と description が参照されるため「よく分かるプログラミング入門 1700 円」と読み上げられます。

<span aria-labelledby="title description"></span>

<div style="display: none">
  <h3 id="title">よく分かるプログラミング入門</h3>
  <p id="description">1700円</p>
</div>

aria-labelledby 属性は最優先で読み上げられるため aria-label 属性や元々のテキストを上書きしてしまうことに注意してください。
例えば以下の H1 要素は「りんご」でも「みかん」でもなく「メロン」と読み上げられます。

<h1 aria-label="みかん" aria-labelledby="fruits">りんご</h1>
<span id="fruits" style="display: none">メロン</span>

aria-describedby 属性

aria-describedby 属性は aria-labelledby 属性とよく似ています。
aria-labelledby 属性が要素のラベルを参照するのに対しこちらは要素の説明を参照します。

例えばフォームの入力エラーなどは aria-describedby 属性が最適です。
通常は要素を非表示にしておき、エラー発生時に表示することでどの項目にどのようなエラーがあるかをスクリーンリーダー利用者に説明できます。

また、以下の例のようにテキストのボタンやアイコンボタンの説明の補足にも使用できます。
特にアイコンボタンの場合はスクリーンリーダーで認識されにくいため説明があるとユーザーの理解が早くなります。

<button aria-describedby="hint">検索</button>
<div id="hint" style="display: none">
  キーワードに一致するアイテムを検索することができます。
  複数のキーワードを空白で区切ることでAND検索もできます。
</div>

また、こちらも aria-labelledby 属性と同様に複数の id を参照できます。
画面の状態に応じて説明テキストを組み立てることもできそうですね。

おわりに

まとめると以下のようになります。
最初のうちは名前が似ていて混乱しますがそれぞれの役割が理解できれば適材適所で使うことができます。

aria-label 属性: テキスト情報が存在しない要素にラベルを付与したり元々あるテキストを上書きできる
aria-labelledby 属性: 1 つ以上の別要素を参照して要素のラベルを作れる
aria-describedby 属性: 1 つ以上の別要素を参照して要素の説明テキストを作れる

今回は以上です。
ここまで読んで頂きありがとうございます。

Accessible Tech Blog