miChecker:『*( を含む空白文字のみ)は画像のalt属性として不適切です。 (もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください。そうでなければ適切な代替テキストを提供してください。』
検出理由
「問題あり」として検出される項目です。
alt属性に空白が設定されている場合に指摘されるとありますが、半角スペース、全角スペースではこの項目は検出されません。この項目が検出されるのは、調査した範囲では からなる場合のようです。あまり意味の無い例のように思いますので、他の検出例がありましたら、お知らせいただけると助かります。
なお、半角スペース、全角スペースのケースの場合は「問題の可能性大」の『*は画像のalt属性として不適切な可能性があります。(もし支援技術がこの画像を無視するべき場合は、alt=""と設定してください。そうでなければ適切な代替テキストを提供してください。)』にて検出されます。
<img src="example.png" alt=" ">
根拠
空白文字のみを代替テキストに入れるということは、不適切というよりは、代替テキストの目的を理解していないことを公表しているようなものです。必ず意味のあるテキスト情報を入れるか、alt=""と null を設定します。
ちなみに、NVDAでは次のように空白文字を扱うようです。(非リンクの場合)
- ノーブレークスペース の場合は、フォーカスがあたり「ブランク」と読み上げる。
- 半角スペース「 」の場合は、フォーカスは当たらず読み上げもしない。
- 全角スペース「 」の場合は、フォーカスは当たるが何も読み上げない。無音のままになる。
このように微妙な違いがあります。この違いを何か詩的な表現に使用してみたくなるかもしれませんがお勧めはできません。ブラウザによって動作が異なる可能性があるからです。
修正方針
支援技術がこの画像を無視して良いと判断できる場合は を削除して alt=""としてください。
ただし、リンクの場合は、何らかの情報は必ず必要です。単純にnullにはしないでください。
補足
音声ブラウザの黎明期の頃は、アスタリスクや半角スペースを何も無いことの印として入れる場合がありました。いずれもルールとして確立していませんので、WCAG 2.0で求めるとおり alt="" とするのが適切です。
関連する達成基準、達成方法
- 達成基準 1.1.1 非テキストコンテンツ
- 達成方法 F30: 達成基準 1.1.1 及び 達成基準 1.2.1 の失敗例 - 代替ではないテキストによる代替を使用している (ファイル名、プレースホルダーテキストなど)
- 達成方法 G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する
- 達成方法 H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない
(他のテクニックは「miChecker対策テクニック集」に整理されています。)