ウェブアクセシビリティを少しだけ改善してみた

概要

私の運用しているサイトのTOPページのウェブアクセシビリティを少しだけ改善しようと思います。
ここでは以下の要素に注力した改善とします。

• 目が見えなくても情報が伝わること・操作できること

※そもそも目が見えない状態の方が私のサイトを見る必要があるのかという点はここでは考えません(^p^)

忙しい人向けまとめ

• Windowsナレーターで読み上げされる文章とHTMLのOutlineの内容は関係ない（ただしページ構成を把握するのには重要な情報なためOutLineをおろそかにして良いという意味ではない）
• Tabフォーカスが必要な要素にはtabindex="0"
• Tabフォーカスが不要な要素にはtabindex="-1"
• 読み上げて欲しい内容はaria-label="読み上げて欲しい内容"で修正可能であるが明らかに誤解を招くもの以外は放置

ウェブアクセシビリティとは

個人的には政府広報オンラインのこちら記事がわかりやすかったです。
https://www.gov-online.go.jp/useful/article/202310/2.html#fourthSection

検証方法

• WEBページの読み上げにはスクリーンリーダーを使用します
• ここではWindowsに搭載されているナレーターを使用します
• 『Windowsキー』+『Ctrl』+『Enter』で起動します
• ナレーターを起動した状態でブラウザ(Chrome)からサイトへアクセスします
• 『Tab』キーを押すとページ内のコンテンツがフォーカスされます
• フォーカス時に読み込まれた内容でページの情報が得られるかどうかを検証します

ウェブアクセシビリティ考慮前

Tabキーでフォーカスされる場所

赤枠部分がフォーカスされた内容です。
…あれ？全然フォーカスされない(´;ω;｀)

読み上げされる内容

読み上げされた内容を記載します。

• みだしレベルいち　リンク　にどくメモ
• リンク　ログイン
• リンク　しんきとうろくはこちら
• リンク　ログインはこちら
• リンク　メモいちらんさんこうがぞう
• リンク　がっきょくしぼりこみさんこうがぞう
• リンク　メモしょうさいさんこうがぞう
• リンク　フリーワードけんさくさんこうがぞう
• リンク　ついったー
• りんく　じたぶ

さすがに固有名詞は意図と異なる読み上げがされるかなと感じました。
（GitHubはネイティブ発音だとそうなるかもなとも思いつつ）

読み上げが意図と異なったところ

読み上げ元ワード	実際に読み上げられた内容	読み上げて欲しかった内容
IIDXMEMO	にどくメモ	ツーディーエックスメモ
GitHub	じたぶ	ギットハブ

備考

ちなみにページのOutlineはこんな感じです。
そんなに汚くはないと思います。
(Chomreの拡張機能HTML5 Outlinerで表示）

Windowsナレーターでの読み上げは特にOutlineの内容は関係ないんだなと感じました；

HTMLの修正

Tabフォーカスして欲しい内容に応じてHTMLを修正します。

Tabフォーカスが必要な要素

要素にtabindex="0"を追加します。
私はOutlineの見出しに沿ってフォーカスされて欲しかったのでそれに沿って追加します。

修正例

- <div class="card mt-4">
+ <div class="card mt-4" tabindex="0">
    <div class="card-header"><h2>IIDXMEMOとは？</h2></div>
    <div class="card-body">
        ～略～
    </div>
</div>

Tabフォーカスが不要な要素

読み上げしたい場所同様に要素にtabindexを追加します。
不要な場合はtabindex="-1"を追加します。
今回不要部分は無かったので割愛。

読み上げて欲しい内容の修正

aria-label="読み上げて欲しい内容"で修正できます。
ですが、スクリーン・リーダーによる漢字や英単語の読み上げが誤っていることはよくありまして、それを踏まえたガイドラインを設定している会社もある様子です。
なので完全に意図通りの読み方で読ませようとする方針は放念しようと思います。

参考

もし修正するのであれば以下のようにするのかなと。
Windowsのナレーターで読み上げた時に、Tabフォーカスされたときはaria-labelのツーディーエックスメモを読んでくれます。
しかしながら、ページをすべて読み上げた際には「見出しレベル2にどくめも」と結局aria-label外を読んでしまう様子です。
混乱を招く結果となるため、こちらの修正は適用しませんでした。

修正例

<div class="card mt-4" tabindex="0">
-    <div class="card-header"><h2>IIDXMEMOとは？</h2></div>
+    <div class="card-header"><h2 aria-label="ツーディーエックスメモとは">IIDXMEMOとは？</h2></div>

    <div class="card-body">
        ～略～
    </div>
</div>

ウェブアクセシビリティ考慮後

Tabキーでフォーカスされる場所

意図的になりました！

読み上げされる内容も読み方は置いておいて視覚的に表示されているものが読み上げられるようになったのでヨシとします。

所感

万人が使えるサイトというのは難しいと痛感しました。