aria-labelledby属性を試してみる
概要
aria-labelledby属性が???だったので調べていたところ、そもそもアクセシビリティについて無知だったので、WAIのことから動作確認も含めて試してみた
アクセシビリティとは？
What is accessibility? - Learn web development | MDN
Accessibility is the practice of making your websites usable by as many people as possible. We traditionally think of this as being about people with disabilities, but the practice of making sites accessible also benefits other groups such as those using mobile devices, or those with slow network connections.
できるだけ多くの人に対し、Webサイトを利用しやすくすること。障がいのある方のためだけではなく、モバイルデバイス利用者やネット速度が遅いユーザに対しても有益である。
WAI
Web Accessibility Initiative(WAI) アクセシビリティへの理解向上と基準、サポート資料を率先して行っている組織。 W3Cの内部組織として発足した。 Home | Web Accessibility Initiative (WAI) | W3C
W3Cとは(The World Wide Consortium)Web: HTML,CSS and more の国際標準化を推進している組織。
アクセシビリティガイドライン(WCAG)
WAIが策定しているアクセシビリティを推進するためのガイドライン WCAG 2 Overview | Web Accessibility Initiative (WAI) | W3C
WAI-ARIA (Accessible Rich Internet Applications)
WAI-ARIA は W3C によって定められた仕様で、要素に適用できる追加の意味論を提供する一連の HTML 属性を定義しており、それが欠けているどのような場所でもアクセシビリティを向上させます。
WAI-ARIA Overview | Web Accessibility Initiative (WAI) | W3C WAI-ARIAの基本 - ウェブ開発を学ぶ | MDN
スクリーンリーダーを試してみる
macOSの場合はcommand + touchID３回クリックでVoid Overが使用できる。
後は読み上げたいWebサイトに行くだけでスクリーンリーダーが起動する。
aria-*属性を試してみる
よく使う属性2つをスクリーンリーダーで試しながら使ってみる
aria-label属性
アイコンボタンなど、視覚的には意味がわかるものの、テキストを持たない要素にラベルを与えるために使用する。
例えば、Xを閉じるボタンとして使用している例。
これをスクリーンリーダーで読み上げると、「閉じる ボタン」と読み上げてくれる。元のラベルである「X」は上書きされる。
<button aria-label="閉じる">X</button>
aria-labelledby属性
aria-labelと同じ動きをするが、属性値には文字列ではなく、要素のIDを指定する。- スペースで区切って、IDを複数指定することもできる。
生年月日を送信するフォームで、年・月・日が複数の入力フィールドに分かれている場合、「生年月日」という一つの情報を取り扱っているとaria-labelledby属性を使って表現する例
<div id="birthday">生年月日</div>
<input
id="yearInput"
type="number"
aria-labelledby="birthday yearLabel" // 生年月日のラベルIDをつけている
/>
<label id="yearLabel" htmlFor="yearInput">
年
</label>
<input
id="monthInput"
type="number"
aria-labelledby="birthday monthLabel"
/>
<label id="monthLabel" htmlFor="monthInput">
月
</label>
<input
id="dayInput"
type="number"
aria-labelledby="birthday dayLabel"
/>
<label id="dayLabel" htmlFor="dayInput">
日
</label>
<button id="savebutton" aria-labelledby="birthday savebutton">
保存する
</button>
こうすると、birthdayと関連づけられるので、スクリーンリーダーでは、「生年月日 年」「生年月日 月」「生年月日 日」と読み上げてくれる
