技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
img要素にalt属性による代替テキストが設定されていないと指摘されます。

<img src="exampleoflogo.png"> <!-- alt属性がない -->

根拠

全盲の方は画像を見て内容を知ることは困難であり、同時に設定されているはずの代替テキストを代わりに読ませて内容を理解しようとします。代替テキストがないと、得られる情報は何も無いことになり、利用者はそこに何があるかを知ることができません。

サンプル写真

近年、FacebookなどいくつかのWebサービスでは画像を自動認識して代替テキストを付けてくれるようになりつつあります。例えば、この写真には alt="木、草の画像のようです"と自動的に代替テキストが設定されていました。

<img height="960" width="720" alt="木、草の画像のようです" class="(省略)" referrerpolicy="(省略)" src="(省略)">

なかなかの解析能力です。しかし、他にも良い例が無いか探しましたが、ほとんどが"写真の説明はありません。"としかありませんでした。生き物や人の表情については使いものになる解析が行われることも多い様ですが、まだまだ補助的なものとしてみておいた方が良さそうです。（マイクロソフト社が研究している画像認識技術では、人が記述したものと相違ないという研究結果も得られているようです。とても期待しています。）いまは、制作者自身が良く内容を考えて、代替テキストを設定すべきです。

修正方針

画像の目的によって次のように代替テキストを設定します。

意味を持つイメージ (Informative Images)

意味を持つイメージとは、その画像をあえて表示しないとしたら困るような画像のことです。そうしたイメージについては、その画像が持つ情報を代替テキストに設定し誰にでも伝わるようにします。例えば、電話のアイコン画像であれば alt="電話" のように設定します。何かの図解であれば、それを言葉で説明するつもりで考えたテキストを設定します。人物写真では、装飾的なものでない限り、それが誰で、場合によってはどのような感情なのか、あるいは写っている人たちの関係性まで記述します。ただし、冗長にならないことがもっとも大切です。必要な情報のみを的確に伝えましょう。

電話アイコンと電話番号、ファックスアイコンとファックス番号からなる例のイメージ

それぞれの画像に代替テキストによる説明がなければ電話とファックスの違いがわかりません。

<img src="tel-icon.png" alt="電話">03-6265-6620<br>
<img src="fax-icon.png" alt="ファックス">03-6265-6630

装飾的なイメージやイラスト (Decorative Images)

挿絵のような装飾的な画像や、セクションを区切りライン、目を引きやすくするために置いたワンポイントの画像などの場合は、空の代替テキストを設定します。（alt=""）仮に、alt属性そのものを付けていないと、音声ブラウザはsrc属性の内容を代わりに読み上げたり、画像が空であることをいちいち通知するので、利用者は余計な情報を聞くことになってしまいます。もし、判断に迷ったら、その画像を紙で隠してみてください。何も困らなければ、それは装飾的な画像として扱えます。

コーヒーアイコン

ここで一休み。少し休んでから続けましょう。

カップは単なる挿絵のようです。このような場合はalt=""で構いません。altすら付けないと、音声ブラウザは「コーヒー アイコン ドット ピーエネジー」あるいは「空の画像」のように読み上げてしまうことがあります。

<img src="coffee-icon.png" alt="">

機能を提供するためのイメージ (Functional Images)

その画像が何かのアクションにつながる場合は、その画像に表示されている内容を説明するのでは足りません。その画像を操作することで、何が起きるかを説明します。例えば、虫眼鏡マークがあって検索を意味するならば、"検索を実行"と入れます。ウィンドウを開くことを示すアイコンであれば、"別ウィンドウを開く"と入れます。なお、リンクであることを伝える必要は必ずしもありません。大抵の音声ブラウザは、リンクであることは"リンク画像 （代替テキストの内容）"のように同時に読み上げてくれるからです。

commenticon

このページでも使われているコメントをする時に使用するアイコンです。この画像に “吹き出し" や “コメント" とあっても今一つわかりにくいと思います。アクションを説明するぺきです。

<img src="comment-icon.png" alt="コメントを付ける">

テキストをイメージにしたもの (Images of Text)

画像に含まれる文字は全て代替テキストに設定しましょう。写真にたまたま映り込んだ文字や、大抵の人は読めないような飾りとしてのテキスト、あるいはロゴに添えてあるスローガンのような、伝える必要の無いテキストの場合は省略可能です。ただし、開催日が書いてあるなど少しでも情報を含んでいるならば代替テキストに含める必要があります。

カタログ

画像化されたテキストはそのまま代替テキストにいれます。

<img src="catlog-icon.png" alt="カタログ">

複雑なイメージ (Complex Images)

グラフや複雑な画像などは、それを掲載することで伝えたかった内容をできるだけ短くシンプルに記述します。どうしても説明が長くなる場合は、例えば、100字も超えるようであれば、画像を適当に分割し、それぞれに代替テキストを設けるか、画像ではなく本文に説明を追加し画像は補助的なものであるようにします。あるいはグラフであれば元データをcsvファイル等で提供するなどします。

複雑な表の例

この例では、ページ全体の内容も加味して考える必要があります。もし、売り上げが右肩上りで伸びていることを示したかったのならば、次の様で十分です。

<img src="graph.png" alt="売り上げが5年で指数関数的に伸びいていることを示すグラフ">

もし、そうした概要ではなく、具体的な情報を提供する必要があるならば、"2015年は2000万、2016年は2300万・・・"と具体的に設定します。それが、あまりに長くなるようであれば、csvファイルを添付し、それをグラフ化したものであることを設定します。

イメージのグループ (Groups of Images)

複数の画像で一つの情報を伝えることがあります。そのような場合は、一つずつの画像ではなく、最初の画像でその画像群の説明をします。

5つの星の画像を並べ、黒い星の数でスコアを示すような場合、一つ一つの画像に"黒い星""白い星"と入れるよりは、最初の画像に"星4つ"のようにいれます。

<img src="black-star.png" alt="星4つ">
<img src="black-star.png" alt="">
<img src="black-star.png" alt="">
<img src="black-star.png" alt="">
<img src="white-star.png" alt="">

イメージマップ (Image Maps)

組織図やフロアマップ、何かの処理のフロー図などが該当します。こうしたイメージは大抵の場合複雑であり（複雑だから絵イメージにしているので当然です）、一つの代替テキストで表現することは困難です。このような場合はarea要素を用いて領域を分割し、その領域ごとに代替テキストを設定します。その場合、関係性がわかる様にしておくことが必要です。

一つの画像で表現された組織図の例です。この例では一つの代替テキストで組織図の内容を記述できそうではありますが、少しでも情報量が多くなると代替テキストも長くなってしまいますので、次の様にすべきです。

<img src="organization.png"
     alt="会社組織図"
     usemap="#Map">
<map name="Map" id="Map">
  <area
    shape="rect"
    coords="516,20,828,180"
    href="…"
    alt="一番上に取締役会">  
  <area 
    shape="rect" 
    coords="278,264,590,424" 
    href="…"
    alt="内部監査室は取り締まり役会を監査する">
  <area 
    shape="rect" 
    coords="516,490,828,650" 
    href="…"
    alt="経営会議は取締役会に報告する">
  <area 
    shape="rect"
    coords="100,740,412,900"
    href="…"
    alt="総務は経営会議に報告する">
  <area
    shape="rect" 
    coords="516,740,828,900" 
    href="…"
    alt="営業部は経営会議に報告する">
  <area
    shape="rect" 
    coords="938,740,1250,900" 
    href="…"
    alt="開発部は経営会議に報告する">
</map>
areaダウンロード

なぜ、長い代替テキストは好ましくないのか

音声ブラウザで聞いているとき、何と喋ったか聞き取れなかったり、一度聞いただけでは覚えられなかったりすることがあります。そのような場合は、少し戻って聞き直したり、一文字づつ漢字を確認したりしながら読み進めることができるようになっています。

しかし、一般的な音声ブラウザでは、代替テキストに書かれている内容については、それはできません。読み始めたら最後まで聞くしかありません。もう一度聞こうとすれば、代替テキストの最初にまで戻って読み上げるのを聞くしかありません。よって、利用者にとって大切な情報が含まれているのであれば、あまり長い代替テキストは好ましくありません。

迷ったら

お客様によっては、代替テキストの処理を難しく考えすぎて、大きな負担になってしまっているケースがあります。本当は、代替テキストの設定は、コツさえ掴めばそれほど難しいものではありません。

例えば、全盲の方が目の前にいるとき、どのみなさんも、必要なことに絞って口頭でうまく説明するはずです。この画像がどのカテゴリーであるとか、短い長いだとか、そんなことを考える前に、さっと口頭で説明するはずです。それを代替テキストに入れれば良いのです。伝える時の反応が見られない分難しいですが、それは、目の前にいらっしゃると想像すると、幾分楽になります。

地図も迷うものの一つです。地図が持つ情報は大量で、その全ての情報を代替テキストにすることは不可能です。そもそも、テキストで説明できないから地図にしているのですから、それは当たり前のことです。必要なことは、それが地図であることを伝えることと、最低限必要な情報、例えば、最寄りの駅の名前であるとか、そこからの距離を代替テキストに入れて伝えます。

<img src="会社の周辺地図.png" alt="会社の周辺地図です。3番出口からだと5分程度で着きます。">

補足

代替テキストを設定するとき、空のリンクを作らない様に注意してください。この問題には、私どもの検査でもたびたび遭遇します。例えば、直前にリンクテキストがあり、続くリンク画像の代替テキストを二度同じことを聞かない様にするために空にしようとする時があります。このとき、その二つのリンクが分離されていると、画像リンクについては空のリンクになってしまいますので注意が必要です。

<!-- 悪い例
 代替テキストとしては「ホームに戻る」が適当だが、直前に説明があり空にした -->
<a href="home.html">ホームに戻る</a>
<a href="home"><img src="home.png" alt=""></a>
<!-- 良い例
 二つのリンクを一つにまとめた上でaltを空にした -->
<a href="home.html">
  ホームに戻る
  <img src="home.png" alt="">
</a>

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

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

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
<meta http-equiv="Refresh">を用いた画面の書き換えが行われ、かつページ指定の無い時、つまりリロードが行われる場合に検出されます。

根拠

利用者によっては画面に書かれた文字を読むことに時間を要することがあります。特に音声ブラウザの利用者においては、キーボードで操作し読み上げて内容を聞き取るため、黙読よりはどうしても時間がかかります。もし、黙読にかかる時間をもとに画面書き換えの時間を決めていたとしたら、おそらく、利用者によってはいつまでたっても情報を得られなくなります。

近年、refreshはほとんど見かけない様になりました。もっと高度な制御が必要になってきており、単純な繰り返しは使われる機会はなくなったのかもしれません。

修正方針

リロードは自動的にさせず、利用者の指示を待って移動するようにするなど変更します。

<!-- <meta http-equiv="refresh" content="20"> -->

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

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

技術コラムAMCC,miChecker

検出理由

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

根拠

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

<input type="image" src="kettei.png" alt="決　定">

音声ブラウザは「決　定」を＂けってい＂と読まずに"けつ　てい“と読み上げる可能性がある。利用者にはわかりにくい。（促音が失われている）

修正方針

代替テキスト中の無用な空白を取りぞいてください。

<input type="image" src="kettei.png" alt="決定">

補足

代替テキストであって、表示されるものでもないため文字間の空白は不要です。

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

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

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

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

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

技術コラムAMCC,miChecker

検出理由

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

根拠

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

<img src="seaside.png" alt="海　岸　の　様　子">

音声ブラウザは「海　岸　の　様　子」を＂かいがんのようす＂と読まずに"うみ　きし　の　さま　こ“と読み上げる可能性がある。利用者は何のことかわからない。

修正方針

代替テキスト中の無用な空白を取りぞいてください。

<img src="seaside.png" alt="海岸の様子">

補足

代替テキストであって、表示されるものでもないため文字間の空白は不要です。

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

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

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

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

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

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
area要素を用いてイメージマップ上でのクリック可能な領域を定義する時、領域を画像に変わって説明するalt属性に、空白を含むテキストが設定されていると検出されます。単語の間に空白があれば常に検出しているわけではなく、漢字の文字数と空白の数などで判定しているようです。漢字２文字からなる単語を１つの空白で２分割すると必ず指摘されます。漢字３文字あるいは４文字だと２つの空白で３分割されると指摘されます。

根拠

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

<area shape="rect" coords="0,0,100,50" href="#" target="_blank" alt="北　海　道">

音声ブラウザは「北　海　道」を＂ほっかいどう＂と読まずに"きた　うみ　みち“と読み上げる可能性がある。利用者は何のことかわからない。

修正方針

代替テキスト中の無用な空白を取りぞいてください。

<area shape="rect" coords="0,0,100,50" href="#" target="_blank" alt="北海道">

補足

代替テキストであって表示されるものでもないため文字間の空白は不要です。

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

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

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

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

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

技術コラム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対策テクニック集」に整理されています。)

技術コラムAMCC,miChecker

検出理由

「手動確認」項目のため、miCheckerによる自動検出はありません。

根拠

音声ブウラザによっては、ページで使われている言語と異なる言語が使われている箇所について、その言語に変えて読み上げてくれる機能を有します。ただし、その機能を使用するには、その箇所が異なる言語で書かれていることをlang属性で示しておく必要があります。lang属性が指定されていないと、英語であっても無理矢理に日本語読み上げようとするため、理解不可能な発声になる場合があります。

とはいえ、最近の音声合成ソフトは日本語のエンジンであっても、それなりに外国語もそれらくし読むようには配慮されています。以前ほど酷いことはないようです。しかし、それでも"criteria"などは"クリターヤ"と読み上げるため内容の理解は困難です。

さて、この項目はmiCheckerは自動検出はしてくれません。検証結果の一覧には、いつも『固有名詞、技術用語、どの言語なのか不明な語句、及びすぐ前後にあるテキストの言語の一部になっている単語又は語句を除いて、コンテンツの一節又は語句それぞれの自然言語がどの言語であるかを、プログラムが解釈可能であることを確認して下さい。』と出力されますので、それを受けて、自分で確認し結果を残すことになります。

修正方針

HTMLの場合、その部分にspan要素など用いlang属性を追加します。
XHTML1.0の場合、その部分にspan要素など用いlang属性とxml:lang属性を追加します。
XHTML1.1の場合、その部分にspan要素など用いxml:lang属性を追加します。(宮沢賢治 処世)

<p>「おもてなし」は英語にし難いが、もっとも近いのは<span lang="en">hospitality</sapn>であろう。</p>

一部分の言語の判断は常に難しいものです。もし判断が難しい場合は、その部分を日本語に置き換えてみてください。日本語にすると意味がなくなるような場合は、多くの場合、正しく言語指定をした方が良いでしょう。反対に、例えばネイティブの発音で読まれると日本語を母国語とする話者では混乱してしまうことが予想される場合は、無理に言語を変更する必要はないかもしれません。

補足

  • 日本語と英語を切り替えるために English というリンクが用意されている場合、そのリンクは英語の音声ブラウザ等で利用される可能性があります。そのような場合には正しく英語であることを指定しておく必要があります。
  • ホームページのフッターに配置される Copyright は多くの場合に英語で記述されておりlang属性が必要です。
  • 固有名詞、技術用語、言語が不明な語句及びすぐ前後にあるテキストの言語の一部になっている単語や語句は、例外とみなすことができます。
  • ISO 639-1 のコードリスト（別ウィンドウで開く）
  • 達成方法H57（別ウィンドウで開く）の訳註において、meta要素のcontent属性がtext/htmlの場合にはlang属性があれば、あるいは、application/xhtml+xmlの場合にはxml:lang属性があれば規格を満たすとされています。

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

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

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
そのページが何語で書かれているか、html要素にlang属性を用いた指定がありません。

根拠

音声ブウラザはそのページの使用言語がわかると読み上げに使用する音声エンジンをその言語に切り替える機能を持つものがあります。もし、英語のページなのに日本語と指定したりすると、日本語の音声エンジンで読み上げようとするため、無音になってしまうか、意味の無いアルファベットなど読み上げることになり、利用者を混乱させてしまいます。

『日本語のページは日本語で書かれているのだから、そのページが日本語で書かれていることはすぐにわかるのでは無いか。』と思われるかもしれません。確かに、広く使われているブラウザの場合は、lang属性がなくとも、そのページで使用されている言語を高い確率で推測する機能が備わっています。しかし、完璧とは限りませんし、音声ブウラザなど利用者の少ないブラウザでは、そうした機能が十分に備わっているわけではないとご理解ください。

修正方針

HTMLの場合、html要素にlang属性を追加します。
XHTML1.0の場合、html要素にlang属性とxml:lang属性を追加します。
XHTML1.1の場合、html要素にxml:lang属性を追加します。

<!-- htmlの場合 -->
<html lang="en">

<!-- xhtml1.0の場合 -->
<html lang="en" xml:lang="en">

<!-- xhtml1.1の場合 -->
<html xml:lang="en">

補足

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

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

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
<meta http-equiv="Refresh">を用いた画面の書き換えが行われ、時間が0秒以外の時に検出されます。ただし、miChekcerをローカルで実行する場合では、すぐにリダイレクトされてしまいリダイレクト後のページを検証することになるため、この問題はあまり検出されません。miCheckerを検証エンジンに持つクラウドサービス等では検出されることがあります。

根拠

利用者によっては画面に書かれた文字を読むことに時間を要することがあります。特に音声ブラウザの利用者においては、キーボードで操作し読み上げて内容を聞き取るため、黙読よりはどうしても時間がかかります。もし、黙読にかかる時間をもとに画面書き換えの時間を決めていたとしたら、おそらく、利用者によってはいつまでたっても情報を得られなくなります。

よく見かけるのは404ページにおいてです。一定時間、urlが変わったことを表示し、その後、リダイレクトするパターンです。

修正方針

遷移は自動的にさせず、利用者の指示を待って移動するようにします。利用者によっては、その間にブックマークを修正するかもしれませんし、別のアクションをとるかもしれません。あるいは、次ように間髪入れずリンクするようにします。

<meta http-equiv="refresh" content="0,(url)">

補足

urlが省略されている場合は周期的なリロードが行われることを意味します。この場合も同じ問題が発生していることになりますので、miCheckerは次の指摘を行います。

2.2.1 『周期的にページのリロードを行う事は避けてください (<meta http-equiv="Refresh">の利用は避けてください)』

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

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

技術コラムAMCC,miChecker

検出理由

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

なお、姓が「森」名が「花」というような場合に「森　花」と表現するのは間違いではありません。しかし、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属性”（検出語）”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。

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

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

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