視覚障碍者を含むすべてのユーザーに優しいWebサイトを作る！aria-label設定のポイント
2024-04-02
aria-label は、以下の要素に使用できます。
- 画像
- フォームコントロール
- ボタン
- ナビゲーション要素
- その他、ユーザーに説明が必要な要素
例：
<img src="image.jpg" alt="A picture of a cat" aria-label="A cat sitting on a chair">
この例では、画像に alt 属性と aria-label 属性の両方が設定されています。alt 属性は、画像が表示できない場合に表示されるテキストです。aria-label 属性は、画像の内容をより詳細に説明します。
aria-label の設定時の注意点
- 簡潔で分かりやすい説明 を記述しましょう。
- 冗長な情報は避けましょう。 スクリーンリーダーは、
aria-label属性の内容をすべて読み上げるため、長すぎる説明はユーザーにとって負担になります。 - 技術的な用語は避けましょう。 視覚障碍者を含むすべてのユーザーが理解できる言葉を使用しましょう。
- 動詞を使用 すると、要素の役割がより明確になります。
aria-label の重要性
- aria-label は、
aria-labelledby属性と組み合わせて使用することもできます。aria-labelledby属性は、要素のラベルとなるテキスト要素の ID を指定します。
画像
<img src="image.jpg" alt="A picture of a cat" aria-label="A cat sitting on a chair">
フォームコントロール
<label for="name">名前:</label>
<input type="text" id="name" aria-label="Your name">
この例では、input 要素に aria-label 属性が設定されています。この属性は、スクリーンリーダーに、この入力フィールドがユーザーの名前を入力するためのものだということを伝えます。
ボタン
<button aria-label="Submit">送信</button>
ナビゲーション要素
<a href="index.html" aria-label="Home">ホーム</a>
- 以下は、
aria-label属性を使用して、さまざまな要素のアクセシビリティを向上させる方法の例です。
| 要素 | 説明 | aria-label |
|---|---|---|
| <table> | 表 | 表の要約 |
| <tr> | 表の行 | 行の内容 |
| <td> | 表のセル | セルの内容 |
| <ul> | リスト | リストの種類 |
| <li> | リスト項目 | 項目の内容 |
| <div> | 区分 | 区分の役割 |
| <span> | テキストの範囲 | テキストの内容 |
サンプルコード を参考に、さまざまな要素に aria-label 属性を設定してみてください。
aria-label 以外の方法
テキストラベルを使用する
最も簡単な方法は、要素の近くにテキストラベルを記述することです。
<img src="image.jpg" alt="A picture of a cat">
<p>A cat sitting on a chair.</p>
この例では、画像の下にテキストラベルを追加することで、画像の内容を視覚障碍者を含むすべてのユーザーに伝えています。
セマンティックなHTMLを使用する
HTML には、さまざまな要素の役割を定義するセマンティックな要素が用意されています。
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
</tr>
</tbody>
</table>
この例では、table 要素、thead 要素、tbody 要素、th 要素、td 要素などのセマンティックな要素を使用して、表の構造と内容を明確にしています。
aria-labelledby 属性は、要素のラベルとなるテキスト要素の ID を指定します。
<img src="image.jpg" aria-labelledby="cat-image-label">
<p id="cat-image-label">A cat sitting on a chair.</p>
<button aria-label="Submit" aria-describedby="submit-button-description">
<p id="submit-button-description">This button will submit the form.</p>
aria-label は、要素の目的をユーザーに伝えるための重要な属性ですが、他にもいくつかの方法があります。状況に応じて、最適な方法を選択してください。
html accessibility
