aria-labelの適切な利用について調べてみた #HTML

これはなに？

aria-label の使い方についてMDNを読んでいると下記のように記載がありました。

Don't "overuse" 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 は不可視です。
基本的にスクリーンリーダーの利用者にのみ意味があります。
WAI-ARIAはどんなユーザーにも同じ情報を提供することが目的です。
スクリーンリーダーの利用者だけに伝わる状況も、それは意に反していると言えます。

情報が可視化されていれば、視覚で情報を拾い上げることができるユーザーにも同じ内容を伝えることができます。
そのためにできることを調べてみました。

まずは、テキスト情報を追加できるか検討すべきです。
先程のX（旧Twitter）へのリンクも下記のようにテキストがあれば、幅広いユーザーになんのリンクなのか伝えることができます。

<a href="">
    <i class="fa-brands fa-x-twitter">公式X（旧Twitter）はこちら</i>
</a>

他にもテキストのメリットがあります。

そもそもHTMLとは HyperText Markup Language です。
テキストはWebの基本と言えるのではないでしょうか。

WAI-ARIAよりもHTMLネイティブセマンティックは優れています。
セマンティックなHTMLは適切な role を持っています。
読み上げだけでなく、キー操作なども適切に付与してくれます。

また、セマンティックなHTMLの実装をした上で、テキストを可視化できるか検討してみてください。
下記のHTML要素ではアクセシブルな名前を与える方法があります。

例えば <daialog> （role=daialog も同様）は、アクセシブルな名前を持つことが求められます。
複数のダイアログが存在する場合、ユーザーが現在どのダイアログを操作しているか伝えるために、アクセシブルな名前が必要になります。

<dialog aria-labelledby="daialogTitle">
  <h1 id="daialogTitle">モーダルダイアログ</h1>
  ...

このように参照できるテキストが存在する場合は、aria-labelledby を使うことで、スクリーンリーダーの利用者と視覚で情報を拾い上げることができるユーザーも同じ情報を得ることができます。

以上の選択肢を検討した上で、UIやデザイン上制限が出てしまうなら、 aria-label を使いましょう!

この記事が誰かのお役に立てると幸いです。