くまだどうも、くまだです。
WAI-ARIAのaria-labelについてのメモ。
aria-label属性
aria-○○属性は、WAI-ARIで定義される技術の一つです。
aria-○○属性を使うと、スクリーンリーダーによる音声読み上げ機能の精度を高めたり、付加的な情報を与えることができます。
例えば、以下のようなaria-label属性を使用してスクリーンリーダーを使うと、「ページ上部に戻る、既読リンク」と読み上げされます。
<a href="#top" aria-label="ページ上部に戻る">
↑
</a>a {
background-color: red;
width: 40px;
height: 40px;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 100px;
}
スクリーンリーダーは視覚障害を持つユーザーにアシストするための技術です。
テキストではない要素や画像などにaria-label属性を付与すれば、その情報を読み上げてくれます。ちなみに読み上げ機能ツールは、MacではVoiceOver、WindowsではNVDAやPC-Talkerが挙げられます。
例えば、上のようなトップに戻るボタンは見た目の要素で視覚的にトップに戻るボタンと分かりますが、視覚障害を持つユーザーの場合はそれが判別できません。その場合、aria-label属性を付与して音声でその要素の情報を伝える、というように使うことができます。
単なる詳細ボタンも、視覚的には（デザイン上では）記事詳細へのボタンと分かっても、視覚障害を持つユーザーには伝わらないため、aria-label属性で情報を付与します。
<button aria-label="記事詳細">詳細</button>ちなみに検証ツールでも「アクセシビリティ」からアクセシビリティツリーで確認することができます。
アクセシビリティツリーは、HTML→DOMツリー→アクセシビリティツリーというように文書構造に変換し、それを支援技術に情報伝達→スクリーンリーダーなら音声、点字ディスプレイなら点字に変換してくれます。
上の画像だとStaticTextの部分が要素に直接書かれたテキストになります。ここの部分でその要素の機能や目的が十分伝えられていない場合、aria-label属性を使って機能の説明を伝えることができます。
ヘッダーやフッター、ナビゲーションなどにもaria-label属性を付与してもいいと思います。
<header aria-label="サイトヘッダー">
<nav aria-label="サイトメニュー"> </nav>
</header>
<footer aria-label="サイトフッター"> </footer>ここまで読んでくださりありがとうございました。