miChecker:『このページ内リンク”*”には、読み上げ可能な情報としてtitle属性のみが存在しています。リンク内に何らかのテキスト情報を提供することを検討してください。』

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。しかし、実際にはほとんどの場合が「問題あり」になります。
ページ内リンクにおいて、a要素の開始タグと終了タグの間に何もテキストの情報が提供されておらず、a要素にtitle属性が使用されている場合に、この項目が検出されます。

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

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

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

根拠

この問題はスクリーンリーダーの利用者にとっては致命的です。もし検出されていたら、いま直ぐに修正すべきです。title属性はアクセシビリティのための対策とはなりません。

目で見て操作している人にとっては、ツールチップが現れて便利かもしれません。(この場合でも、リンクの目的を示すようなものをそこに表示させているわけではなく、補助的な情報であることに注意が必要です) しかし、スクリーンリーダーで利用している人にとっては、依然、肝心のリンクが黒塗りされているか、切り取られて存在しない状態になっているようなものです。利用者には大変失礼であり、最悪の状態にあると思ってください。

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

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

修正方針

リンク画像の場合は画像にしっかりとalt属性を入れれば問題は解決します。title属性を消す必要はありません。ただし、alt属性とtitle属性を同一にすることはおかしなことです。title属性には、例え、それが誰にも伝わらなかったとしても、問題の無い補足的な情報を入れるに留めてください。

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

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

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon" title="ニュース最新情報"><span class="visually-hidden">ニュース</sapn></a>

補足

(なし)

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


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

2021年9月18日