miChecker：『ページ内リンク “*”　は、読み上げ可能なテキストを持たないため、音声アクセスできません。』

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
ページ内リンクにおいて、a要素の開始タグと終了タグの間に何もテキストの情報が提供されていない場合に、この項目が検出されます。

よく見かけるのはリンク画像を提供し、その代替テキストが空になっている場合です。あるいは、スタイルシートでリンクと分かるような画像を表示させている場合なども該当します。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news"><img src="newsicon.png" alt="" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon"></a>

根拠

この問題はスクリーンリーダーの利用者にとっては致命的です。もし検出されていたら、いま直ぐに修正すべきです。目で見て操作している人の状況に例えるならば、肝心のリンクが黒塗りされているか、切り取られて存在しない状態になっているのと同じ状態です。利用者には大変失礼であり、最悪の状態にあると思ってください。

しかし、残念ながらこの問題が検出されるウェブページは少なくありません。リンクが失われることは大きな問題になりますから、このような場合、スクリーンリーダーは読み上げるべき情報がないことを伝えたり、あるいは飛び先として指定されているURLを読み上げるなど工夫します。あるいは、そのページのタイトルを読み上げるような場合もあります。

URLなど読み上げて、たまたま内容が理解できれば良いですが、大抵はそのような情報は製作者の為のものであって、利用者に提供するものではないため、利用者においてはますます混乱してしまいます。

修正方針

リンク画像の場合は画像にしっかりとalt属性を入れれば問題は解決します。

cssで画像を表示している場合は少し対処は難しくなります。たまに、cssのcontentプロパティに情報を入れている場合がありますが、それでは不十分です。実は、スクリーンリーダーによってはcontentプロパティを読み上げてくれたりもしますが、読み上げない場合もありますし、htmlの定義から考えれば、cssにそのような役割をさせるべきではありません。このような場合は、非表示のテキストを追加するのがもっとも容易です。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news"><img src="newsicon.png" alt="ニュース" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon"><span class="screen-reader-text">ニュース</span></a>

class screen-reader-text については"White House の取り組むWebアクセシビリティ“をご覧下さい。これにより、視覚的に「ニュース」が表示されることはありませんが、音声ブラウザはしっかりと「ニュース」と読み上げてくれます。

なお、a要素にtitle属性を用いる方法では適合にはなりません。title属性は補足情報を提供するものであって、主となる情報提供に用いることはできません。

補足

（なし）

関連する達成基準、達成方法

(他のテクニックは「miChecker対策テクニック集」に整理されています。)

2021年9月18日