飯塚慎司

検出理由

「問題の可能性大」として検出される項目です。
input要素のalt属性がmiCheckerの「不適切なalt属性リストの編集」で設定されている語句が使用されている場合に、この項目が検出されます。

<!-- 半角スペース -->
<input type="image" src="images/open.png" alt="void">

根拠

不適切と思われるalt属性値はアクセシビリティについての知識の無い方が入れがちなものがリストアップされています。いずれも、実際にそう設定されていたことがあるものです。

視覚に頼って操作している方は、次の例を考えて見てください。次のようなフォームがあったらどう思われますか? 文脈から何のボタンかわかるとしても、手を抜いたフォームだと思われませんか? 代替テキストをこのように設定することは、これと同じことをしているのと同じです。

修正方針

すべきことは簡単です。altにそのボタンの目的を記述します。検索を実行するためのものでならば"検索を実行"と入れるのが良いでしょう。フォームの送信であれば"送信"だけで十分かもしれません。

<!-- 半角スペース -->
<input type="image" src="images/open.png" alt="検索を実行">

補足

（なし）

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

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

---

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

検出理由

「問題あり」として検出される項目です。
alt属性が空、半角スペース、全角スペースのみで構成されている場合に、この項目が検出されます。

<!-- 半角スペース -->
<input type="image" src="images/open.png" alt=" ">

根拠

ボタンを画像で提供した場合、NVDAは「ボタン (代替テキスト)」と読み上げます。もし、代替テキストが空や空白文字だと「ボタン」としか読み上げません。それでは音声ブラウザの利用者は文脈から何のボタンかを想像するしかありません。

視覚に頼って操作している方は、次の例を考えてみてください。次のようなフォームがあったらどう思われますか? 文脈から何のボタンかわかるとしても、随分と不親切なフォームだと思われませんか? 代替テキストを設定しないとは、これと同じことをしているのと同じです。

修正方針

すべきことは簡単です。altにそのボタンの目的を記述します。検索を実行するためのものでならば"検索を実行"と入れるのが良いでしょう。フォームの送信であれば"送信"だけで十分かもしれません。

<!-- 半角スペース -->
<input type="image" src="images/open.png" alt="検索を実行">

補足

（なし）

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

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

---

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

検出理由

「問題あり」として検出される項目です。
object 要素によるコンテンツのレンダリングができない場合、代替のコンテンツが提供されるようになっていないと問題として指摘されます。

<object (10分おきの株価をイメージにして表示する外部コンテンツ)>
</object>

根拠

object要素によって組み込まれる外部コンテンツがレンダリングされない場合、代替のテキストが無いと利用者は何が起きているのか知ることができません。代替コンテンツを提供していれば、少なくとも、そこに何が提供されようとしていたのか、あるいは、同等のコンテンツを提供することも可能になるかもしれません。

修正方針

代替コンテンツを提供します。

例えば、10分おきに株価を表示する外部コンテンツを組み込む場合、仮にそれが機能しなくとも、そこで何が提供されているかわかるようにします。

<object (10分おきの株価をイメージにして表示する外部コンテンツ)>
  株価を10分おきに更新して表示するコンテンツがあります。お使いの環境では正しく動作していません。
</object>

可能ならば、代替となるページへのリンクも追加すると良いでしょう。

補足

(特になし)

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

• 達成基準 1.1.1 非テキストコンテンツ
• 達成方法 H53: object 要素のボディを使用する

---

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

検出理由

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

しかし、そもそも、HTML4.01以降では使用することのできない要素であり、いつ、ブラウザで動作しなくなるとも分かりません。これが検出された場合は、該当箇所の削除、あるいはobject要素など用いて他の方法で実装するべきです。どうしても残す場合は、埋め込むJava アプレットであることと目的を代替テキストとしてapplet要素に記述すると良いでしょう。

根拠

(省略)

修正方針

(省略)

補足

(特になし)

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

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

---

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

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

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) として代替テキストを設定します。

補足

(特になし)

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

• 達成基準 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) として代替テキストを設定します。

補足

(特になし)

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

• 達成基準 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) として代替テキストを設定します。

補足

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

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

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

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

---

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