2023年5月31日

そのaria-labelは本当に必要ですか？

チーフアクセシビリティエンジニア黒澤

アクセシビリティ対応には複数の方法がありますが、方法によって運用負荷はさまざまです。

私はお客様に、aria-labelを設定するのではなく、画面に表示されているテキストで情報が伝わるようにすると運用負荷を抑えられますよ、という話をすることがあります。

aria-labelは指定をミスするとほぼ確実にアクセシビリティの問題につながりますが、画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくい性質があります。

実際、お客様サイト・サービスの現状把握や競合調査の業務ではaria-labelの作業漏れや指定ミスによるアクセシビリティの問題を多数見てきました。

この記事では実際の問題例をサイト・サービスが特定されないように調整したうえで紹介していきます。

紹介した例はいずれもaria-labelを削除するだけでアクセシビリティの問題が解消します。aria-labelを指定せずにサイト・サービスを運用していれば、アクセシビリティの問題も起きず、運用負荷も下げられていたのに、と思わずにいられません。

この記事が運用し続けられる、息の長いアクセシビリティ対応の参考になれば幸いです。

作業漏れ

なかなか信じていただけないことがありますが、次の例は実際のHTMLからaria-label以外の属性を取り除いたものです。

<button aria-label="Accessibility Text">OK</button>

aria-labelになんらかのテキストを入れようとしたのだと思いますが、その作業が漏れて公開されてしまったようです（複数箇所で発生していました）。

例に示した状態では「Accessibility Text」ボタンとして読み上げられますが、aria-labelを削除すると「OK」ボタンとして読み上げられます。aria-labelを指定することでアクセシビリティが低下しており、aria-labelを削除するとアクセシビリティが向上する状態でした。

<button>OK</button>

他にも典型的な作業漏れは多言語対応サイト・サービスでの翻訳漏れです。aria-labelは画面に表示されないため、翻訳原稿を用意したり反映したりする対象から漏れることも見受けられます。

<button disabled aria-label="unavailable">在庫なし</button>

この例は日本語のサイトでaria-labelに英語が残ってしまっている例です。

これまで述べてきた問題は、aria-labelをほかの内容から機械的に生成すれば防げるはず、と考えた方もいらっしゃるかもしれません。実際、機械生成されることも増えてきています。

一方で機械生成によって別の問題が生じることも多いです。

次の例はaria-labelを子孫のコンテンツから生成しようとしてHTMLまで含めてしまった例です。

<a href="..." aria-label="&lt;b>おまかせ設定で簡単・便利&lt;/b>">
<b>おまかせ設定で簡単・便利</b>
</a>

また、SPAなどでしばしば発生しているのがaria-label="[object Object]"です。これはaria-labelにJavaScriptの文字列ではなくオブジェクトを割り当てているケースです。

<h3 aria-label="[object Object]">検索結果（514件）</h3>

数字の1、2、3が表示される場所で0、1、2が指定されていることもありました。繰り返し処理で使っている変数をそのまま出力しているケースです。

<h3>ランキング</h3>
<div aria-label="0">1</div>
<div aria-label="1">2</div>
<div aria-label="2">3</div>

aria-labelの生成処理を修正し、正しく設定されていることを検証すれば、発生している問題は解決しますが、aria-labelを追加・変更するたびにそれらを行うには一定の負荷がかかります。

aria-labelを機械的に生成する場合、生成元のテキストを別の場所に表示していることがほとんどです。表示されているテキストで情報が伝わるように実装してaria-labelを削除すれば、そのような運用負荷を軽減できます。

aria-labelは画面に表示されないため、作業漏れが生じやすく、指定ミスに気がつきにくいというデメリットがあります。この記事で挙げたように指定ミスによる問題が実際に発生しています。

多くの場合、アクセシビリティ対応には複数の方法があり、無理にaria-labelを使う必要はありません。aria-labelを使わなくても画面に表示されているテキストで対応できるケースがほとんどです。

この記事が運用し続けられる、息の長いアクセシビリティ対応の参考になれば幸いです。