スクリーンリーダーの利用を意識したコーディング

2024-08-13T00:00:00+09:00 | 3分で読めます | 更新日時 2024-08-13T00:00:00+09:00

@ ShigeUe

インターネットを閲覧している人は様々です。中には目の見えない方もいらっしゃいます。
そういった方にも情報を伝えるためには、HTMLを正しくコーディングしていく必要があります。
いくつか考えてみましょう。

最近書いた「実際的なimgタグのalt属性の付け方」という記事でもalt属性をスクリーンリーダーを意識して付ける必要があることが分かります。

また、「HTMLの見出しタグの使い方」でも触れていますが、スクリーンリーダーは見出しタグを目次のように利用して、必要な場所にジャンプすることが分かります。

その他にもどんなことを考えておくことができるでしょうか。

読ませたくないものを疑似要素にする

例えば

＼ゆっくりしていってね／

こんな要素を作りたいとします。

一番簡単に考えると、

<div class="yukkuri">
  <span class="left-slash">＼</span>
  ゆっくりしていってね
  <span class="right-slash">／</span>
</div>

のようなHTMLを作り、スラッシュの角度を整える、という感じにするかもしれません。
でもこうしてしまうと、このスラッシュをスクリーンリーダーが「記号」として読み上げてしまうかもしれません。

この場合は、HTMLは

<div class="yukkuri">ゆっくりしていってね</div>

これだけにして、::beforeと::afterの疑似要素を使って、スラッシュ部分を作ります。
そうすると、この部分は読み上げられることはありません。

liを使わない箇条書きのようなものを作り時も ◆ 項目 のような表示は◆の部分は疑似要素にする方が良いですね。

こういったボタン、よく見ますよね。
文字入りで画像が書き出されていてalt属性が適切に付けられていれば全く問題ありません。

でも「hoverすると背景がボケるボタンで上に文字が乗っている」というような場合、画像ボタンの上にposition: absluteで文字を乗せる、というような組み方をすることがあります。

この場合、こんな風に組んでしまいかねません。

<div class="picture-button">
  <a href="#"></a>
  <span>重ねたい文字</span>
</div>

これのどこがいけないかというと、リンクに文字が含まれていません。
そうするとスクリーンリーダーはこのリンクを利用者に伝えることができなくなってしまいます。

この場合作り方を変える必要があります。

<div class="picture-button">
  <a href="#">重ねたい文字</a>
</div>

HTMLは普通の実装になり、要件通り背景がぼかされています。
backdrop-filterという新しいプロパティを知らないとなかなか到達できないですが、アンテナを張り巡らして新しい便利なプロパティを覚えていかないといけませんね。

少々HTMLの構造が複雑になっても、スクリーンリーダーで正しい読み上げができるような状態を目指した方が良いと思います。
「そんなの考えている余裕がない」と思われるかもしれません。

ただ知っているか知っていないかによって選択肢の幅が違います。
アクセシビリティにも重きを置くクライアントに当たった時には、こうした知識が生きてくることになるでしょう。