WCAG 2.1 は 2018年6月5日に勧告（Recommendation勧告）になりました。それからすでに3年近く経ちますが、普及これからのようです。特に、解説書が示す達成方法（Techniques）が十分ではなく、追加された達成基準の意図はわかりますが、実際にどうしたらよいかが明確ではなかったからだと思います。しかし、昨年 2020年12月2日に公開された解説書では、ふたつの達成基準を除いて、ひととおりの達成基準で達成方法（十分な達成方法を含む）が示されるようになり、今後は検査も容易になり普及が進むものと思われます。

日本ではWAICの有志メンバーが中心となって規格の翻訳は終えています。（JIS X 8341-3:2010の時に比べると翻訳の質がとても高くなったと思います。素晴らしい活動だと思います。）しかし、解説書の方は2019年3月6日版が公開されていますが、本家の2020年12月2日のバージョンのものは未だ翻訳中です。（2021年3月7日時点）そのため、達成方法については日本では未だ不十分な情報しか得られない状況にあります。また、解説そのものも、2019年3月6日版と2020年12月2日版ではそれなりの差異があり、現状でWCAG2.1を日本で普及させていくにはまだまだ情報が足りていない印象があります。

規格 : WCAG 2.1 Recommendation – 2018/6/5

https://www.w3.org/TR/WCAG21/

規格の翻訳版 : 2018/6/5

https://waic.jp/docs/WCAG21/

解説書 : Understanding WCAG 2.1 – 2020/12/2

https://www.w3.org/WAI/WCAG21/Understanding/

解説書の翻訳版 : 2019/3/6 (少し古いことに注意)

https://waic.jp/docs/WCAG21/Understanding/

また、WCAG 21 解説書ですが、WAIに敬意を持ちつつ発言しますが、正直なところ理解が難しいところがいくつもあるように感じます。もしかすると、Webの専門家には当たり前で理解は容易なことばかりなのかもしれませんが、自治体や企業でウェブを運用している現場の責任者においては、180度誤った解釈をしかねないような項目もあります。これでは普及は難しいのではないかと不安になります。

そこで、WCAG 2.1 解説をもう一段わかりやすくした入門編を提供しようと思います。入門編を理解した上で、解説書を読んでいければ、もう少し理解が容易になるのではないかと期待しています。

WCAG 2.1 の特徴

WCAG 2.1 の特徴を書き出しておきます。

2.0 の達成基準の削除や変更はありません。新しく17項目が追加されたのが WCAG 2.1 です。よって、2.1 を満たせば 2.0を満たしていることになります。

認知あるいは学習障害

障害としては、脳による情報処理に関連する認知あるいは学習障害に特にフォーカスを与えています。これら障害に対する配慮が欠けているということは、WCAG 1.0 の時から指摘されていたのですが、10年経ってその領域の知識も多くなり、やっと配慮すべき項目を検討できるようになったのだと思います。追加された項目は、誰でも得て不得手として、あるいは環境によっと受ける困難を改善するものであり、WCAG 2.1の有用性が高まったとも言えます。具体的なことは今後の記事の中で説明させていただきます。

ロービジョン

ロービジョンに対する配慮はより幅広く厳格になりました。WCAG 2.0 まではコントラスト比についてはテキストにのみ適用されていましたが、今後は情報を伝えるシンボル、アイコンといったものに対しても適用されます。とても細かく規定されていて、慣れるもでは運用に苦労するかもしれません。

モバイル機器

また、なんといっても、モバイル機器に対する配慮がいくつか加わっています。スマートフォンの普及により、タッチやジェスチャーによる操作に対する配慮が必要になりました。

これら特徴の他、もう一つ大切なことは、スマートフォン等のネイティブアプリへ対応することも意識されています。これまで、モバイルアプリ用の規格としてはBBCが提供するものくらいしかなかったのですが、今後は、WCAG 2.0 を用いたアプリの試験が増えているものと予想されます。ただ、HTML技術に対する達成方法は多く示されていますが、ネイティブアプリに対する達成方法は示されていませんので、先行してアプリ開発でWCAG 2.1を利用している企業があれば、積極的にその具体的な基準（実装方法チェックリスト等）を公開して欲しいものです。

WCAG 2.1 で追加された達成基準

4月から達成基準ごとに説明ページを追加し、次の表からリンクさせる予定です。6月までに全項目の追加を目標にしています。

検出理由

「問題の可能性大」として検出される項目です。
alt属性が半角スペースか全角スペースのみで構成されている場合、およびmiCheckerの「不適切なalt属性リストの編集」で設定されている語句が使用されている場合に、この項目が検出されます。

<!-- 半角スペース -->
<img src="example.png" alt=" ">
<!-- 全角スペース -->
<img src="example.png" alt="　">
<!-- miChecker の不適切なalt属性に含まれる語句が設定されている -->
<img src="example.png" alt="image">

miCheckerのメニューからの場合、「ウィンドウ」-「設定」で設定パネルが開きますので、音声ユーザビリティ視覚化の不適切なalt属性にある[不適切なalt属性リストの編集]を選択してください。一覧が表示され内容を確認できます。

初期値では、つぎの語句が登録されています。自分で追加・削除することも可能です。

image, blank, void, jpeg image, gif, line, alt, click here!, icon, banner, photo, spacer gif, gif image, ボタン, space, button, clickhere, null, jpeg, spacer, bullet, click here, dashiline, spacer.gif

image という語句が適切な場合も当然のことながら十分にありえます。そのため、この項目は「問題あり」ではなく「問題の可能性大」になっており、miCheckerを使った人自身が最終的な判定を行う必要があります。

根拠

空白文字のみを代替テキストに入れるということは、不適切というよりは、代替テキストの目的を理解していないことを公表しているようなものです。必ず意味のあるテキスト情報を入れるか、alt=""と null を設定します。

ちなみに、NVDAでは次のように空白文字を扱うようです。（非リンクの場合）

• ノーブレークスペース   の場合は、フォーカスがあたり「ブランク」と読み上げる。
• 半角スペース「 」の場合は、フォーカスは当たらず読み上げもしない。
• 全角スペース「　」の場合は、フォーカスは当たるが何も読み上げない。無音のままになる。

このように微妙な違いがあります。この違いを何か詩的な表現に使用してみたくなるかもしれませんがお勧めはできません。ブラウザによって動作が異なる可能性があるからです。

不適切なalt属性リストにある語句は、実際によく見かけることの多い語句で大抵の場合画像の内容を適切に表現したものになっていません。どのように設定すれば良いかわからず、エイヤーで image のように入れてしまっていると思われます。

修正方針

支援技術がこの画像を無視して良いと判断できる場合はスペースを削除して alt=""としてください。ただし、リンクの場合は、何らかの情報は必ず必要です。単純にnullにはしないでください。

無視するべきではない画像の場合は、miChecker：『画像にalt属性がありません。代替テキストを提供してください。(もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*”』を参考に適切な代替テキストを設定してください。

補足

音声ブラウザの黎明期の頃は、アスタリスクや半角スペースを何も無いことの印として入れる場合がありました。いずれもルールとして確立していませんので、WCAG 2.0で求めるとおり alt="" とするのが適切です。

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 F30: 達成基準 1.1.1 及び 達成基準 1.2.1 の失敗例 － 代替ではないテキストによる代替を使用している (ファイル名、プレースホルダーテキストなど)
• 達成方法 G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する

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

検出理由

「問題あり」として検出される項目です。
alt属性に空白が設定されている場合に指摘されるとありますが、半角スペース、全角スペースではこの項目は検出されません。この項目が検出されるのは、調査した範囲では   からなる場合のようです。あまり意味の無い例のように思いますので、他の検出例がありましたら、お知らせいただけると助かります。

なお、半角スペース、全角スペースのケースの場合は「問題の可能性大」の『*は画像のalt属性として不適切な可能性があります。（もし支援技術がこの画像を無視するべき場合は、alt=""と設定してください。そうでなければ適切な代替テキストを提供してください。）』にて検出されます。

<img src="example.png" alt="&nbsp;">

根拠

空白文字のみを代替テキストに入れるということは、不適切というよりは、代替テキストの目的を理解していないことを公表しているようなものです。必ず意味のあるテキスト情報を入れるか、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対策テクニック集」に整理されています。)

代替テキストに関する一般的な事項は miChecker：『画像にalt属性がありません。代替テキストを提供してください。(もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*”』に整理していますので、そちらもご覧ください。

検出理由

「問題の可能性大」として検出される項目です。
href属性を持つarea要素に、miCheckerの設定で「不適切なalt属性」として登録されたテキストと一致する場合か alt="" と設定されている場合です。

  <area
      shape="rect"
      coords="469,370,1625,450"
      href=".."
      alt="image"
      >

alt属性がまったく存在していない場合は、『area要素にalt属性がありません：*。代替テキストを提供してください。』が検出されます。

alt属性に文字間に空白を含む代替テキストが設定されている場合は、『areaのalt属性 ”*”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。』が検出されます。確認して、不要ならば空白を取り除きます。

根拠

area要素はイメージマップを提供する時に使われます。視覚的に見ている人は領域を目視で判別し、クリックしたことで起きるアクション（大抵はリンク）を想像します。しかし、音声ブラウザで操作する人は、area要素で示されるものは画像ですから、その領域固有の情報を代替テキストから得られないと、リンクの目的を知ることができません。（マップ画像全体の代替テキストだけでは不十分です。）

なお、href属性を持たないarea要素の場合、alt属性を省略して良いことになっています。miCheckerも何も検出しません。

修正方針

その領域を選択することで何が起きるかを、機能を提供するイメージ (Function Images) として代替テキストを設定します。

リンクであることは音声ブラウザが伝えてくれますので、わざわざリンクであることを伝える必要はありません。視覚的に見る情報と同じで大抵の場合は十分です。

  <area
      shape="rect"
      coords="469,370,1625,450"
      href=".."
　　　 alt="開発部"
      >

補足

(特になし)

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 F30: 達成基準 1.1.1 及び 達成基準 1.2.1 の失敗例 － 代替ではないテキストによる代替を使用している (ファイル名、プレースホルダーテキストなど)
• 達成方法 G94: 非テキストコンテンツに対して、それと同じ目的を果たし、かつ同じ情報を示す、簡潔なテキストによる代替を提供する

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

代替テキストに関する一般的な事項は miChecker：『画像にalt属性がありません。代替テキストを提供してください。(もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*”』に整理していますので、そちらもご覧ください。

検出理由

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

  <area
      shape="rect"
      coords="469,370,1625,450"
      href=".."
      >

alt属性が空の場合、あるいは不適切と考えられる代替テキストが設定されている場合は、『*はarea要素のalt属性として不適切である可能性があります』が検出されます。* の内容を見直す必要があります。

alt属性に文字間に空白を含む代替テキストが設定されている場合は、『areaのalt属性 ”*”は文字間に空白を含んでいるため、音声で正確に読み上げることが出来ない可能性があります。』が検出されます。確認して、不要ならば空白を取り除きます。

根拠

area要素はイメージマップを提供する時に使われます。視覚的に見ている人は領域を目視で判別し、クリックしたことで起きるアクション（大抵はリンク）を想像します。しかし、音声ブラウザで操作する人は、area要素で示されるものは画像ですから、その領域固有の情報を代替テキストから得られないと、リンクの目的を知ることができません。（マップ画像全体の代替テキストだけでは不十分です。）

なお、href属性を持たないarea要素の場合、alt属性を省略して良いことになっています。miCheckerも何も検出しません。

修正方針

その領域を選択することで何が起きるかを、機能を提供するイメージ (Function Images) として代替テキストを設定します。

リンクであることは音声ブラウザが伝えてくれますので、わざわざリンクであることを伝える必要はありません。視覚的に見る情報と同じで大抵の場合は十分です。

  <area
      shape="rect"
      coords="469,370,1625,450"
      href=".."
　　　 alt="開発部"
      >

補足

(特になし)

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 F65: 達成基準 1.1.1 の失敗例 － img 要素、area 要素、及び type "image" の input 要素の alt 属性又はテキストによる代替を省略している
• 達成方法 H24: イメージマップの area 要素にテキストによる代替を提供する

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

代替テキストに関する一般的な事項は miChecker：『画像にalt属性がありません。代替テキストを提供してください。(もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください)： src=”*”』に整理していますので、そちらもご覧ください。

検出理由

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

<input type="image" src="search.png"> <!-- alt属性がない -->

根拠

画像ボタンはアクションを引き起こす元になりますので、そのボタンを押すと何が起きるかが正確に伝わらないと、利用者は操作を誤る可能性があります。例えば、検索ボタンにおいては alt="実行" だけですと、何を実行するのか分からない可能性があります。alt=""では、そもそも検索ボタンを見つけられなくなります。

修正方針

そのボタンを押すとどんなアクションがおきるのか、機能を提供するイメージ (Function Images) として代替テキストを設定します。

お勧めは動詞で書くことです。動詞を用いてアクションであることを明確にします。次のような場合、英語では"search"で十分かもしれませんが、日本語の場合に"検索"だけでは名詞として捉えられる可能性もあり、"検索を実行"あるいは"検索を実行する"とすることをお勧めします。

<input type="image" src="search.png" alt="検索を実行">

補足

placeholderをラベルの代わりに用いるケースが散見されます。一つの方法ではありますが、placeholderはカーソルを当てれば消えてしまいますので、目的には適しません。あくまで補助的なものと位置付けて考えるべきです。

ページ右上の虫メガネマークといえばサイト内検索であるということは、おおよその利用者にとっての共通のエクスペリエンスとなっています。そのため、視覚的にはラベルを省略するケースはあっても良いかもしれません。しかし、音声ブラウザで聞く人、あるいはプログラムが解釈するという観点で見れば、慎重にラベルや実行ボタンは十分な代替情報を記述すべきです。これは、WCAG 2.1 ではより厳密に求められるようになります。

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 F65: 達成基準 1.1.1 の失敗例 － img 要素、area 要素、及び type "image" の input 要素の alt 属性又はテキストによる代替を省略している
• 達成方法 H36: 送信ボタンとして用いる画像の alt 属性を使用する

(他のテクニックは「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)

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

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

<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>

<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>

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 F38: 1.1.1 の失敗例 － 支援技術が装飾的な画像を無視できる方法で、HTML でその画像をマークアップしていない
• 達成方法 F65: 達成基準 1.1.1 の失敗例 － img 要素、area 要素、及び type "image" の input 要素の alt 属性又はテキストによる代替を省略している
• 達成方法 H37: img 要素の alt 属性を使用する
• 達成方法 H67: 支援技術が無視すべき画像に対して、img 要素の alt テキストを空にして、title 属性を付与しない

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

検出理由

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

根拠

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

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

修正方針

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

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

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

• 達成基準 2.2.1: タイミング調整可能
• 達成基準 2.2.4: 割り込み
• 達成基準 3.2.5: 要求による変化
• 達成方法 F41: 達成基準 2.2.1、達成基準 2.2.4、及び 達成基準 3.2.5 の失敗例 － ページを再読み込みするために、meta 要素リフレッシュを使用している
• 達成方法 G76: 自動的に更新する代わりに、利用者がコンテンツの更新を要求するメカニズムを提供する
• 達成方法 G180: 利用者がデフォルトの制限時間を 10 倍に設定できる手段を提供する
• 達成方法 G198: 利用者が制限時間を解除するための手段を提供する
• 達成方法 H76: クライアントサイドで瞬間的にリダイレクトするために、meta 要素の refresh を使用する
• 達成方法 SVR1: クライアントサイドではなく、サーバサイドで自動リダイレクトを実装する

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

検出理由

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

根拠

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

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

修正方針

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

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

補足

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

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

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

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

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

• 達成基準 1.3.2: 意味のある順序
• 達成方法 C8: フォントサイズにパーセントを使用する
• 失敗例 F32: 単語内の間隔を制御するために、空白文字を使用しているフォントサイズに em 単位を使用する

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

検出理由

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

根拠

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

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

修正方針

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

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

補足

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

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

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

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

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

• 達成基準 1.3.2: 意味のある順序
• 達成方法 C8: フォントサイズにパーセントを使用する
• 失敗例 F32: 単語内の間隔を制御するために、空白文字を使用しているフォントサイズに em 単位を使用する

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