miChecker:『代替テキストが150文字を超えています。longdesc属性などを用いて、代替テキストを別に提供する事を検討してください』

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
alt属性に設定される文字列が150字を超え、151字以上になるとこの項目が検出されます。文字は半角でも全角でも1文字は1文字としてカウントされます。スペースも1文字としてカウントされます。

<!-- 150字を超える代替テキスト -->
<img src="images/logo.gif" alt="1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901">

根拠

音声ブウラザで読み進めているときに、うまく聞き取れず、少し戻って聞き直したい時があります。大抵のスクリーンリーダーでは、単語単位、一定の文字数あるいは一文字づつなど前に戻す仕掛けが用意されていますが、代替テキストの内容を読み上げているときは、それらの機能は利用できません。読み始めたら最後、最後まで聞くしかないのです。戻そうとすれば、読み上げポイントは先頭に戻ってしまい最初から聞くことになってしまいます。代替テキストが長ければ長いほど、このリスクは高まります。たとえ、巻き戻す必要がなかったとしても、利用者には常に注意深く聞かないといけないというストレスを与えます。

修正方針

解決は容易ではありません。説明を長くしたのにはそれなりの理由があるはずだからです。適当に短くするというわけにはいかないはずだからです。このような場合は、次の方法のいずれかを検討してみてください。

1. 代替テキストの内容をもう一度だけ再検討する

なかなか短くできるものではないのですが、それでも、一度は短くすることを考えましょう。それが本当にその画像を通して伝えたかったことなのか、画像の前後で説明済みではないのか、よくよく確認しましょう。

また、そもそも、その画像が視覚的に見る利用者にとって、意味のある情報を提供しているものなのかを考えることも大切です。なんとなく、雰囲気を伝えたくてパワーポイントの絵をそのままイメージにしていることはよくあります。そうした図では、視覚的に見る人にとっても極めて読みにくい場合も多く、そのような場合は"○○の参考図"くらいの代替テキストでも十分かもしれません。

2. area要素で画像を分割し、それぞの代替テキストを設定する

何かのフローやブロックを示すような図の場合は、いくつかのブロックに分割できるかと思います。そのような場合は、その単位でarea要素を使用し、代替テキストをそのブロックごとに設定します。

3. 画像の前後に補足する説明テキストを用意する

画像の説明しているポイントだけでも、テキストにして画像の前後に配置します。視覚的に見ている人にとってみると、画像を読めばわかることが、テキストでも提供されていることになります。やや冗長になるかもしれませんが、画像中の文字は読みにくいと感じる方にとってはありがたいことですし、コピべもできるようになります。そうして、テキストで書き出した分は、代替テキストからは省いてしまいます。

もし、どうしても視覚的に見える形でテキストを配置したくないのであれば、非表示のテキストでこの補足説明を提供する方法もあります。非表示のテキストについては、「White House の取り組むWebアクセシビリティ」を参考にしてください。

4. longdesc属性を利用する

「達成方法 H45」による方法です。別のページに説明を書いたテキストを用意しておき、それへのリンクを設定します。スクリーンリーダーによっては、詳細な説明があことを伝えるようになります。

補足

(なし)

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


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

2021年5月6日