miChecker：『*ボタン（inputのvalue属性）は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。』

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
ボタンを構成するinput要素のvalue属性のテキストに空白が含まれているときに検出されます。単語の間に空白があれば常に検出しているわけではなく、漢字の文字数と空白の数などで判定しているようです。漢字２文字からなる単語を１つの空白で２分割すると必ず指摘されます。漢字３文字あるいは４文字だと２つの空白で３分割されると指摘されます。

根拠

ブラウザや支援技術などのプログラムは、テキストを解析する際に空白は区切りであると認識する可能性があります。例えば、音声ブラウザは読み上げの際に誤った読み上げを行う可能性があります。あるいは、音声認識プログラムで操作しようとしたとき、発声した内容とプログラムが認識している語に相違が生じる可能性もあります。

<input class="order" type="button" value="日 時 を 決 定">

音声ブラウザは「日 時 を 決 定」を＂にちじ　を　けってい＂と読まずに"ひ　じ　を　けつ　てい“と読み上げる可能性がある。利用者は何のことかわからない。

修正方針

文字間に空白を入れたい場合は letter-spacing を使います。調整のコツは半角スペースを追加しているケースならば 0.5em、全角スペースを追加しているケースならば1em、全角スペース2個ならば2em程度を追加すれば似たような感じになります。

<input class="order space" type="button" value="日時を決定">
.space {letter-spacing: 1em;}

微調整は text-indent など利用してください。

補足

日本語の場合、文字間を広めても比較的混乱はし難いですが、英単語の場合は、もともと空白が単語と単語の区切りを示すので過度に文字間を広げると読みにくくなります。また、日本語の場合でも、読字障害などではやはり文字間隔の空いたテキストは認識が困難になる場合があります。画面を拡大して文字を追っている人も当然読みにくくなります。よほど詰まって見難いという時以外は、無用に文字間を広げるべきではありません。

miCheckerでは文字間空白を次の様なケースでも検出し報告します。

  • （検出語）は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります
  • areaのalt属性”（検出語）”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
  • 画像のalt属性”（検出語）”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。
  • 画像ボタンのalt属性”（検出語）”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。

「問題の可能性大」の項目ではありますが、指摘の正解率も高い項目ですので、指摘された箇所はすべて確認し問題の無いことを確認すべきです。

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

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

2021年2月9日