（Webアクセシビリティ）スクリーンリーダーで読み上げできない項目に遭遇した場合の対処法
はじめに
Webサイトを閲覧していると、画面上には表示されているのにスクリーンリーダーで読み上げできない要素に遭遇することがあります。この記事ではスクリーンリーダー利用者とWebサイトの開発者の観点から、原因と解決策を示します。
（その１）aria-hiddenの使い方が間違っている
要素にaria-hidden="true"属性が設定されている場合、スクリーンリーダーはその要素を読み上げしません。この属性をCSSで例えるなら、目が見える人にとってのdisplay: hidden;に相当します。
遭遇した場合の対処法
スクリーンリーダー利用者の観点から対処法を説明します。ブラウザの開発者コンソールを開いて、以下のコードを貼り付けてください。
let a = document.querySelectorAll('[aria-hidden="true"]'); a.forEach((e) => e.setAttribute("aria-hidden", "false"));
エンターキーを押してから開発者コンソールを閉じると、隠されていた要素がスクリーンリーダーで読み上げできるようになります。
根本的な解決策
次はWebサイト開発者のために根本的な解決策を説明します。
以下のHTMLは通販サイトを想定したものです。販売終了した商品は購入できないように、buttonにdisabled属性が付与されています。
<!DOCTYPE html>
<html lang="ja">
<title>商品名 - 通販サイト</title>
<body>
<h1>商品名</h1>
<p>商品の説明です。</p>
<div aria-hidden="true">
<button disabled="true">カートへ追加</button>
<p>この商品は販売終了しました<p>
<a href="/help">お問い合わせはこちら</a>
</div>
</body>
</html>
おそらく、disabled属性のあたいをaria-hiddenに使い回したのでしょう。親のdivにはaria-hidden="true"が設定されているため、「カートへ追加」ボタンはスクリーンリーダーで読み上げされません。
親切心から「カートへ追加」ボタンをを読み上げしないようにaria-hidden属性を設定したのかもしれません。しかし、「販売終了しました」というテキストと「お問い合わせはこちら」というリンクまで隠れています。スクリーンリーダーの利用者はこの商品が購入できるのか、問い合わせ先はどこか、それらの情報が得られず混乱します。
残念ながら、間違ったaria-hidden属性を機械的に検出するのは困難です。コーディイング中の検出は諦めて、テストを充実させるのが解決策になるかと思います。
そもそもaria-hidden属性は可能な限り使うべきではありません。上記の例ではボタンが読み上げされても押すことはできないため、あえてスクリーンリーダーで読み上げされないように隠す必要はありません。aria-hidden属性を利用するときは付与する箇所と範囲が適切か、十分に検討してください。
おわりに
スクリーンリーダーを利用していて遭遇した困りごとは、随時追加してく予定です。
Discussion