miChecker:『* は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性がありますフォントサイズは相対的な大きさで指定してください。』
検出理由
「問題の可能性大」として検出される項目です。
文字間に空白を含んでいるときに検出されます。単語の間に空白があれば常に検出しているわけではなく、漢字の文字数と空白の数などで判定しているようです。漢字2文字からなる単語を1つの空白で2分割すると必ず指摘されます。漢字3文字あるいは4文字だと2つの空白で3分割されると指摘されます。
なお、姓が「森」名が「花」というような場合に「森 花」と表現するのは間違いではありません。しかし、miCheckerではこれも問題の可能性大として検出します。そのため、すべての検出箇所は目視で本当に問題かどうかを確認する必要があります。
根拠
ブラウザや支援技術などのプログラムは、テキストを解析する際に空白は区切りであると認識する可能性があります。例えば、音声ブラウザは読み上げの際に誤った読み上げを行う可能性があります。あるいは、音声認識プログラムで操作しようとしたとき、発声した内容とプログラムが認識している語に相違が生じる可能性もあります。
音声ブラウザは「日 時」を"にちじ"と読まずに"ひ じ“と読み上げる。
音声入力でブラウザを操作している場合、「入 力」ボタンがあったとして、「にゅうりょく」と発声しても反応せず、「いり ちから」と発声しないと反応しない。
修正方針
文字間に空白を入れたい場合は letter-spacing を使います。調整のコツは半角スペースを追加しているケースならば 0.5em、全角スペースを追加しているケースならば1em、全角スペース2個ならば2em程度を追加すれば似たような感じになります。
.space {letter-spacing: 1em;}
ただし、文字をセンタリングしている場合は、文字が左側に寄り気味になるはずです。その場合は text-indentを加えて調整します。
.space {letter-spacing: 1em; text-indent: 0.5em;}
補足
日本語の場合、文字間を広めても比較的混乱はし難いですが、英単語の場合は、もともと空白が単語と単語の区切りを示すので過度に文字間を広げると読みにくくなります。また、日本語の場合でも、読字障害などではやはり文字間隔の空いたテキストは認識が困難になる場合があります。画面を拡大して文字を追っている人も当然読みにくくなります。よほど詰まって見難いという時以外は、無用に文字間を広げるべきではありません。
miCheckerでは文字間空白を次のケースでも検出し報告します。
- ”(検出語)”ボタン(inputのvalue属性)は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
- (検出語)は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります
- areaのalt属性”(検出語)”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
- 画像のalt属性”(検出語)”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
- 画像ボタンのalt属性”(検出語)”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
「問題の可能性大」の項目ではありますが、指摘の正解率も高い項目ですので、指摘された箇所はすべて確認し問題の無いことを確認すべきです。
関連する達成基準、達成方法
- 達成基準 1.3.2: 意味のある順序
- 達成方法 C8: フォントサイズにパーセントを使用する
- 失敗例 F32: 単語内の間隔を制御するために、空白文字を使用しているフォントサイズに em 単位を使用する
(他のテクニックは「miChecker対策テクニック集」に整理されています。)