AMCC

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

2021年4月3日技術コラム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：『* は画像ボタンのalt属性として不適切である可能性があります』

2021年3月28日技術コラムAMCC,miChecker

検出理由

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

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

登録された不適切なalt属性は次のようにして確認してください。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

根拠

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

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

修正方針

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

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

補足

（なし）

miChecker：『空白文字のみからなる文字列 * は画像ボタンのalt属性として不適切です。適切な代替テキストを指定してください』

2021年3月28日技術コラムAMCC,miChecker

検出理由

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

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

根拠

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

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

修正方針

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

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

補足

（なし）

miChecker：『object要素内には、代替テキストを提供してください』

2021年3月23日技術コラムAMCC,miChecker

検出理由

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

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

根拠

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

修正方針

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

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

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

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

補足

(特になし)

miChecker：『applet要素にalt属性を提供してください (もし読み上げる必要がないアプレットの場合は alt=”” と設定してください)』

2021年3月7日技術コラムAMCC,miChecker

検出理由

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

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

根拠

(省略)

修正方針

(省略)

補足

(特になし)

miChecker：『*は画像のalt属性として不適切な可能性があります。（もし支援技術がこの画像を無視するべき場合は、alt=””と設定してください。そうでなければ適切な代替テキストを提供してください。）』

2021年2月23日技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
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="" とするのが適切です。

miChecker：『*（を含む空白文字のみ）は画像のalt属性として不適切です。 (もし支援技術がこの画像を無視するべき場合は、 alt=”” と設定してください。そうでなければ適切な代替テキストを提供してください。』

2021年2月23日技術コラムAMCC,miChecker

検出理由

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

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

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

根拠

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

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

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

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

修正方針

支援技術がこの画像を無視して良いと判断できる場合は   を削除して alt=""としてください。

ただし、リンクの場合は、何らかの情報は必ず必要です。単純にnullにはしないでください。

補足

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

miChecker：『*はarea要素のalt属性として不適切である可能性があります。』

2021年2月17日技術コラムAMCC,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="開発部"
      >

補足

(特になし)

miChecker：『area要素にalt属性がありません： * 。代替テキストを提供してください。』

2021年2月17日技術コラムAMCC,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="開発部"
      >

補足

(特になし)

miChecker：『画像ボタンにalt属性がありません。代替テキストを提供してください。』

2021年2月17日技術コラムAMCC,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 ではより厳密に求められるようになります。

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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

検出理由

根拠

修正方針

補足

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