🦁

スクリーンリーダーで読み上げできないWebサイトの事例集

1 min read

はじめに

Webサイトを閲覧していると、画面上には表示されているのにスクリーンリーダーで読み上げできない要素に遭遇することがあります。この記事ではスクリーンリーダー利用者とWebサイトの開発者の観点から、原因と解決策を示します。

(原因その1)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を例に説明します。

<!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>

残念ながら、間違ったaria-hidden属性を機械的に検出するのは困難です。コーディイング中の検出は諦めて、テストを充実させるのが解決策になるかと思います。

例示したHTMLは通販サイトを想定したものです。販売終了した商品は購入できないように、buttondisabled属性が付与されています。

おそらく、HTMLをレンダリングするときにdisabled属性のあたいをaria-hiddenに使い回したのでしょう。親のdivにはaria-hidden="true"が設定されているため、「カートへ追加」ボタンはスクリーンリーダーで読み上げされません。

親切心から「カートへ追加」ボタンをを読み上げしないようにaria-hidden属性を設定したのかもしれません。しかし、「販売終了しました」というテキストと「お問い合わせはこちら」というリンクまで隠れています。スクリーンリーダーの利用者はこの商品が購入できるのか、問い合わせ先はどこか、それらの情報が得られず混乱します。

上記のHTMLのように単純なものであれば気づくのは簡単です。しかし、レンダリング後のHTMLを人の目でチェックするのはこんなんです。

そもそもaria-hidden属性は可能な限り使うべきではありません。上記の例ではボタンが読み上げされても押すことはできないため、あえてスクリーンリーダーで読み上げされないように隠す必要はありません。

aria-hidden属性を利用するときは付与する箇所と範囲が適切か、十分に検討してください。

おわりに

スクリーンリーダーを利用していて遭遇した困りごとは、随時追加してく予定です。

Discussion

ログインするとコメントできます