これはなに？
aria-label の使い方についてMDNを読んでいると下記のように記載がありました。
Don't "overuse" aria-label
(訳: aria-label を使いすぎないで)
この記事では aria-label の適切な利用をするために、 aria-label を使う前に取るべき選択肢がなにかを調べてまとめました。
aria-label とは
aria-label とはWAI-ARIAのNameプロパティに属します。
aria-label はインタラクティブな要素にオブジェクトの名前（アクセシブルな名前ともいう）を与えることができます。
aria-label で付与されたアクセシブルな名前は不可視で、スクリーンリーダーなどで読み上げられます。
よく使われる例としてアイコンがあります。
例えばX（旧Twitter）へのリンクが、Font Awsomeのアイコンフォントで配置されている場合があります。
<a href="">
<i class="fa-brands fa-x-twitter"></i>
</a>
このとき、スクリーンリーダーで認知しているユーザーになにが表示されているのかわかりません。
下記のように aria-label を追加すると、アクセシブルな名前を与えることができます。
<a href="" aria-label="X(Twitter)">
<i class="fa-brands fa-x-twitter"></i>
</a>
aria-label を使う前に取るべき選択肢
aria-label は不可視です。
基本的にスクリーンリーダーの利用者にのみ意味があります。
WAI-ARIAはどんなユーザーにも同じ情報を提供することが目的です。
スクリーンリーダーの利用者だけに伝わる状況も、それは意に反していると言えます。
情報が可視化されていれば、視覚で情報を拾い上げることができるユーザーにも同じ内容を伝えることができます。
そのためにできることを調べてみました。
選択肢1:テキストで表現する
まずは、テキスト情報を追加できるか検討すべきです。
先程のX（旧Twitter）へのリンクも下記のようにテキストがあれば、幅広いユーザーになんのリンクなのか伝えることができます。
<a href="">
<i class="fa-brands fa-x-twitter">公式X（旧Twitter）はこちら</i>
</a>
他にもテキストのメリットがあります。
- テキストは検索できる
- テキストはコピーできる
- テキストは翻訳できる
-
aria-labelが翻訳されないブラウザもあります
-
そもそもHTMLとは HyperText Markup Language です。
テキストはWebの基本と言えるのではないでしょうか。
選択肢2:セマンティックなHTMLで実装する
WAI-ARIAよりもHTMLネイティブセマンティックは優れています。
セマンティックなHTMLは適切な role を持っています。
読み上げだけでなく、キー操作なども適切に付与してくれます。
また、セマンティックなHTMLの実装をした上で、テキストを可視化できるか検討してみてください。
下記のHTML要素ではアクセシブルな名前を与える方法があります。
| HTML | アクセシブルな名前を与える方法 |
|---|---|
href を持つ <a>
|
<a> の中にテキストを入れる |
<button> |
<button> の中にテキストを入れる |
<fieldset> |
<legend> を追加する |
<figure> |
<figcaption> を追加する |
<img> |
alt を追加する |
<input> |
<label> を追加する |
<select> |
<label> を追加する |
<textarea> |
<label> を追加する |
<table> |
<caption> を追加する |
選択肢3: aria-labelledbyでアクセシブルな名前を参照する
例えば <daialog> （role=daialog も同様）は、アクセシブルな名前を持つことが求められます。
複数のダイアログが存在する場合、ユーザーが現在どのダイアログを操作しているか伝えるために、アクセシブルな名前が必要になります。
<dialog aria-labelledby="daialogTitle">
<h1 id="daialogTitle">モーダルダイアログ</h1>
...
このように参照できるテキストが存在する場合は、aria-labelledby を使うことで、スクリーンリーダーの利用者と視覚で情報を拾い上げることができるユーザーも同じ情報を得ることができます。
それでもだめなら aria-label を使う
以上の選択肢を検討した上で、UIやデザイン上制限が出てしまうなら、 aria-label を使いましょう!
この記事が誰かのお役に立てると幸いです。
参考
- aria-label - Accessibility | MDN
- 伊原力也、小林大輔、桝田草一、山本伶. Webアプリケーションアクセシビリティ 今日から始める現場からの改善. 技術評論社
- aria-label を使いすぎない