miChecker:『もしこのテキストがASCIIアート、顔文字、もしくはリート語であるなら、その直前か直後に代替テキストがあることを確認して下さい』

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
miCheckerでは顔文字は検出していないようです。検出するのはASCIIアートの一部である罫線に記号テキストを用いた場合に、この項目が検出されるようです。

<!-- 31個以上の記号 -->
-------------------------------

確認した範囲では、 – (マイナス)、= (イコール)、* (アスタリスク)、# (シャープ) については、これが31個以上使われていると問題の可能性があると判断していました。おそらく、一般的な記号文字を使った場合も同様と思われます。また、30個以下の場合は検出しないようですが、スペースの含み具合などでは検出する場合もありました。全角文字は検出していないようですが、定かではありません。

根拠

古い音声ブラウザでは、こうした記号の羅列があると、ひたすらその記号を読み上げます。マイナス記号を40個ならべて罫線を表したとすれば、利用者は「マイナス マイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナスマイナス」と耳にすることになります。これは明らかに不便です。

最近の音声ブラウザでは、ある一定数を超えると、「マイナス 40個」などのように読み上げますが、それが問題解決となっているわけではありません。利用者は「マイナス 40個」と聞いて、そこに罫線があるのだと理解するとは限りません。制作者が意図する、例えばコンテンツの区切りと理解してもらえるかどうかは分かりません。

また、記号は読み上げない場合もあります。"(" や “^" は NVDAではデフォルトでは読み上げません。そのため、フェースマーク (^_^) などは「アンダーライン」としか読み上げません。そこに笑顔があることはまず伝わらないでしょう。

iPhone等では単純なフェースマークは、自動的に解釈して、その内容を読み上げることもありますが、すべての顔文字を読み上げることが保証されているわけではありませんから、なんの対策も無しに使用することは止めた方が良いでしょう。

修正方針

基本的にASCIIアートや顔文字は使用しないことをお勧めします。どうしても使用する場合は、前後にテキストで内容を説明してください。あるいは画像で提供することを検討してください。追加するテキストは非表示でも構いません。

<p>旅行はとても楽しかったです。 (^_^)<span class="sr-only">笑顔マーク</sapn>
.sr-only {
  position: fixed !important;
  /* keep it on viewport */
  top: 0px !important;
  left: 0px !important;
  /* give it non-zero size, VoiceOver on Safari requires at least 2 pixels
     before allowing buttons to be activated. */
  width: 4px !important;
  height: 4px !important;
  /* visually hide it with overflow and opacity */
  opacity: 0 !important;
  overflow: hidden !important;
  /* remove any margin or padding */
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* ensure no other style sets display to none */
  display: block !important;
  visibility: visible !important;
}

補足

クラスsr-onlyについては、次のサイトなど参考にしてください。現在は visually-hidden としているようです。

https://getbootstrap.jp/docs/5.0/helpers/visually-hidden/

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


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