miChecker:『同一テキストの繰り返しがあります』

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
画像の代替テキストと隣接するテキスト、あるいは隣接する画像の代替テキストが同じ内容になっている箇所があるため問題として検出されています。

画像の代替テキストと続くテキストが同じ様子であることを示した説明図
<img src="(画像ファイル)" alt="abcの写真">
<p>abcの写真</p>
二つの画像が並び、両方の代替テキストが同じ内容であることを示した説明図
<img src="(画像1のファイル)" alt="写真">
<img src="(画像2のファイル)" alt="写真">

根拠

音声ブラウザを利用している人は、指摘された箇所では、二度、同じ内容を音声で聞くことになります。まず、これが大きな問題であると知ることが大切です。音声ブラウザでの操作はもともと時間がかかるもので、さまざまな工夫をしながら操作されています。このような時に、二度同じことが聞こえてくるというのは、操作性を失望とともに下げてしまうものです。3分で読み出していたものが6分になるかもしれないのです。ページの構成の理解も難しくしてしまいます。何より、この問題は昔から指摘されている典型的な問題のため、利用者には「このページ制作者は、アクセシビリティのことを全然意識していないのだな」と思われてしまう可能性もあります。

それでもピンと来ない方は、この行を読めば、何が問題か分かるはずです。
それでもピンと来ない方は、この行を読めば、何が問題か分かるはずです。

わざと二行に同じことを書いてみました。違和感はありませんか?
この問題が指摘される箇所は、これと同じような状態だとお考えください。

修正方針

画像の代替テキストの内容を再検討し変更してください。多くの場合、画像の代替テキストは空で構わないはずです。先の一つ目の例にあたります。二つ目の例では、それぞれの写真の簡単な説明を入れるか、最低でも"写真1″と “写真2″のように通し番号など入れて区別できるようにします。

  • 空にできないか検討する。
  • 代替テキストに適度に情報を追加する。
画像の代替テキストを空にして、続くテキストと重複しないようにしたことを示す説明図
<img src="(画像ファイル)" alt="">
<p>abcの写真</p>
二つの画像の代替テキストを、例えば連番をつけることで異なるものであるようにしたことを示す説明図
<img src="(画像1のファイル)" alt="写真1">
<img src="(画像2のファイル)" alt="写真2">

なお、miCheckerはテキストの前後のスペースは無視しますので、対策としてalt="abc&nbsp;"としても効果はありません。ツールをごまかす方法はいろいろあるのですが、まずはそうした方法ではなく、純粋にどうあるべきかを考えれば、大抵はそれでうまくいくはずです。

また、画像リンクにおいて、代替テキストがリンクテキストの唯一の情報である場合は、alt="" として空にすることは絶対にしないでください。視覚的に見て操作している人は、その画像をクリックしてリンクさせることが可能ですが、音声ブラウザの利用者では、そこにリンクがあることにすら気がつかなくなる恐れがあります。miCheckerでは、このような場合、『このリンク内には読み上げ可能なテキストが存在しないため、アクセシブルではありません。』(問題の可能性大)として検出します。もし、ページ内リンクの場合は、『ページ内リンク “*" は、読み上げ可能なテキストを持たないため、音声アクセスできません』」(問題あり)として検出します。

補足

次のように、リンクとしてテキストも画像も存在していない場合はどう判定すべきでしょうか?

<a href="(url)"></a>

miCheckerはページ内リンクの場合は「問題あり」として検出しますが、ページ外へのリンクの場合は実は何も検出しません。これは、視覚的に見て何も無いことが許されているならば、音声で聞こえる必要もない、と判断しているのかもしれません。しかし、実際にはクラスを用いて擬似画像を表示することもできるわけですから、これは目視検査では不適合となります。「miCheckerで検出されないから問題無い」というわけでは無いことにご注意ください。

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


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

2021年1月17日