技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
a要素の開始タグと終了タグの間に何もテキストの情報が提供されていない場合に、この項目が検出されます。

よく見かけるのはリンク画像を提供し、その代替テキストが空になっている場合です。あるいは、スタイルシートでリンクと分かるような画像を表示させている場合なども該当します。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="/news/"><img src="newsicon.png" alt="" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="/news/" class="newsicon"></a>

根拠

この問題はスクリーンリーダーの利用者にとっては致命的です。もし検出されていたら、いま直ぐに修正すべきです。目で見て操作している人の状況に例えるならば、肝心のリンクが黒塗りされているか、切り取られて存在しない状態になっているのと同じ状態です。利用者には大変失礼であり、最悪の状態にあると思ってください。

しかし、残念ながらこの問題が検出されるウェブページは少なくありません。リンクが失われることは大きな問題になりますから、このような場合、スクリーンリーダーは読み上げるべき情報がないことを伝えたり、あるいは飛び先として指定されているURLを読み上げるなど工夫します。あるいは、そのページのタイトルを読み上げるような場合もあります。

URLなど読み上げて、たまたま内容が理解できれば良いですが、大抵はそのような情報は製作者の為のものであって、利用者に提供するものではないため、利用者においてはますます混乱してしまいます。

修正方針

リンク画像の場合は画像にしっかりとalt属性を入れれば問題は解決します。

cssで画像を表示している場合は少し対処は難しくなります。たまに、cssのcontentプロパティに情報を入れている場合がありますが、それでは不十分です。実は、スクリーンリーダーによってはcontentプロパティを読み上げてくれたりもしますが、読み上げない場合もありますし、htmlの定義から考えれば、cssにそのような役割をさせるべきではありません。このような場合は、非表示のテキストを追加するのがもっとも容易です。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="/news/"><img src="newsicon.png" alt="ニュース" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="/news/" class="newsicon"><span class="visually-hidden">ニュース</sapn></a>

なお、a要素にtitle属性を用いる方法では適合にはなりません。title属性は補足情報を提供するものであって、主となる情報提供に用いることはできません。

補足

（なし）

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

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

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。しかし、実際にはほとんどの場合が「問題あり」になります。
ページ内リンクにおいて、a要素の開始タグと終了タグの間に何もテキストの情報が提供されておらず、a要素にtitle属性が使用されている場合に、この項目が検出されます。

よく見かけるのはリンク画像を提供し、その代替テキストが空になっている場合です。あるいは、スタイルシートでリンクと分かるような画像を表示させている場合なども該当します。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news" title="ニュース一覧"><img src="newsicon.png" alt="" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon" title="ニュース一覧"></a>

根拠

この問題はスクリーンリーダーの利用者にとっては致命的です。もし検出されていたら、いま直ぐに修正すべきです。title属性はアクセシビリティのための対策とはなりません。

目で見て操作している人にとっては、ツールチップが現れて便利かもしれません。（この場合でも、リンクの目的を示すようなものをそこに表示させているわけではなく、補助的な情報であることに注意が必要です） しかし、スクリーンリーダーで利用している人にとっては、依然、肝心のリンクが黒塗りされているか、切り取られて存在しない状態になっているようなものです。利用者には大変失礼であり、最悪の状態にあると思ってください。

リンクが失われることは大きな問題になりますから、このような場合、スクリーンリーダーは読み上げるべき情報がないことを伝えたり、あるいは飛び先として指定されているURLを読み上げるなど工夫します。あるいは、そのページのタイトルを読み上げるような場合もあります。

URLなど読み上げて、たまたま内容が理解できれば良いですが、大抵はそのような情報は製作者の為のものであって、利用者に提供するものではないため、利用者においてはますます混乱してしまいます。

修正方針

リンク画像の場合は画像にしっかりとalt属性を入れれば問題は解決します。title属性を消す必要はありません。ただし、alt属性とtitle属性を同一にすることはおかしなことです。title属性には、例え、それが誰にも伝わらなかったとしても、問題の無い補足的な情報を入れるに留めてください。

cssで画像を表示している場合は少し対処は難しくなります。たまに、cssのcontentプロパティに情報を入れている場合がありますが、それでは不十分です。実は、スクリーンリーダーによってはcontentプロパティを読み上げてくれたりもしますが、読み上げない場合もありますし、htmlの定義から考えれば、cssにそのような役割をさせるべきではありません。このような場合は、非表示のテキストを追加するのがもっとも容易です。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news" title="ニュース最新情報"><img src="newsicon.png" alt="ニュース" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon" title="ニュース最新情報"><span class="visually-hidden">ニュース</sapn></a>

補足

（なし）

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

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

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
ページ内リンクにおいて、a要素の開始タグと終了タグの間に何もテキストの情報が提供されていない場合に、この項目が検出されます。

よく見かけるのはリンク画像を提供し、その代替テキストが空になっている場合です。あるいは、スタイルシートでリンクと分かるような画像を表示させている場合なども該当します。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news"><img src="newsicon.png" alt="" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon"></a>

根拠

この問題はスクリーンリーダーの利用者にとっては致命的です。もし検出されていたら、いま直ぐに修正すべきです。目で見て操作している人の状況に例えるならば、肝心のリンクが黒塗りされているか、切り取られて存在しない状態になっているのと同じ状態です。利用者には大変失礼であり、最悪の状態にあると思ってください。

しかし、残念ながらこの問題が検出されるウェブページは少なくありません。リンクが失われることは大きな問題になりますから、このような場合、スクリーンリーダーは読み上げるべき情報がないことを伝えたり、あるいは飛び先として指定されているURLを読み上げるなど工夫します。あるいは、そのページのタイトルを読み上げるような場合もあります。

URLなど読み上げて、たまたま内容が理解できれば良いですが、大抵はそのような情報は製作者の為のものであって、利用者に提供するものではないため、利用者においてはますます混乱してしまいます。

修正方針

リンク画像の場合は画像にしっかりとalt属性を入れれば問題は解決します。

cssで画像を表示している場合は少し対処は難しくなります。たまに、cssのcontentプロパティに情報を入れている場合がありますが、それでは不十分です。実は、スクリーンリーダーによってはcontentプロパティを読み上げてくれたりもしますが、読み上げない場合もありますし、htmlの定義から考えれば、cssにそのような役割をさせるべきではありません。このような場合は、非表示のテキストを追加するのがもっとも容易です。

<!-- リンク画像に代替テキストが設定されていないケース -->
<a href="#news"><img src="newsicon.png" alt="ニュース" /></a>

<!-- スタイルシートでアイコンを表示しているケース -->
<a href="#news" class="newsicon"><span class="screen-reader-text">ニュース</span></a>

class screen-reader-text については"White House の取り組むWebアクセシビリティ“をご覧下さい。これにより、視覚的に「ニュース」が表示されることはありませんが、音声ブラウザはしっかりと「ニュース」と読み上げてくれます。

なお、a要素にtitle属性を用いる方法では適合にはなりません。title属性は補足情報を提供するものであって、主となる情報提供に用いることはできません。

補足

（なし）

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

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

お知らせ

先日、聖火リレーの様子を見学する機会を得ました。

手話で話す人、車椅子の人、麻痺のある方、視覚に障害のある人、見た目ではなんの障害かわからない人、さまざまな方が笑顔で聖火をリレーしていきました。若い女性はしきりに髪型を気にして、その時を待っていましたし、緊張の面持ちだった方も最後の記念撮影では全力の笑顔でガッツポーズを繰り返していました。端の方では、静かに涙ぐむ姿ももありました。

ウェブアクセシビリティに取り組んでいる皆様の関心と努力は、きっと、ここにいるメンバー、家族、関係者が、思いもよらぬホームページの問題で、がっかりしたり、悔しい思いをすることがないようにすることに確かに貢献しているのだと思います。回り回って、多くの人を笑顔にすることに貢献しているはずです!

明日からパラリンピックです。これを目標にがんばってきた全ての選手と関係者の皆様が、健康上のリスクを最小限に、これまでの努力の成果を十分に発揮できるよう、心からお祈りします。

技術コラムAMCC,miChecker

検出理由

html要素にlang属性は存在していますが、プログラムがlang属性の値を読み取ることができない場合にこの問題が検出されます。

根拠

音声ブウラザはそのページの使用言語がわかると読み上げに使用する音声エンジンをその言語に切り替える機能を持つものがあります。ただしく、プログラムが解釈可能なように正しく設定されている必要があります。

そこで、miCheckerではlang属性が存在するか、また、正しく設定されているかをチェックし報告してくれます。本ページで紹介しているケースは、lang属性値が正しく設定されていない場合に検出されます。確認できた範囲では次のような時に検知されます。

  • lang="j" あるいは lang=" " のように属性値が適切でない状態
  • lang=ja" のように文法エラーがあってパーサーが正しく認識できない可能性がある状態 (ダブルクオテーションが欠けている)

また、属性間にスペースを設けない場合なども本問題が指摘される可能性があります。

なお、lang属性そのものが存在しない場合は、『文書内で主に利用されている言語を*属性を用いて明示してください (例： <html lang="ja">)』が検出されます。

修正方針

エラーが検出された場合、何か文法上のエラーが無いか確認してください。見つけたら、それを直してみてください。w3c validator を用いて確認するのも良いかもしれません。

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

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

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

補足

経験的にはCMSなど用いているわけではなく、ソースコードを直接エディターで編集しているようなケースで検出されることがあるように思います。ご注意ください。

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

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

技術コラム

Gmailはブラウザさえあれば利用できますから、ちょっとした時に便利で私もたまに使用しています。基本的にはテキストメールしか送らないのですが、たまに画像など貼り付ける場合もあります。そんなとき、Gmailが提供しているWysiWigエディターでは代替テキストを設定することができません。Gmailでできるのサイズを調整することくらいです。

Gmail WysiWig Editor

こんなときは、Googleドキュメントを開いて、そこに画像を貼り付けます。続いて、貼り付けた画像上で右クリックすると代替テキストの設定画面へのコンテキストメニューが現れます。

画像の上で右クリック、メニュー項目「代替テキスト」を含むコンテキストメニューが表示される

あとは簡単です。この代替テキスト設定済み画像をGmailのエディターにCopy&Pasteして貼り付けるだけです。これで代替テキストの付きのソースコードを含んだまま画像が貼り付けられます。

Googleドキュメントでなくとも、HTMLエディターであれば同様のことは可能なはずです。利用者の多いと思われるマイクロソフトワード については、デフォルトですとソースコード中に不要な要素が多く、GoogleのWysiWigエディターにはうまく貼り付けることができないようです。(ワードの設定でできるようになる可能性はありますが、試していません)

Gmailでは署名を管理する機能を提供しています。署名でも同様に他のエディターやあるいはWebページからそのまま貼り付けることで、代替テキスト付き画像を貼り付けた署名を作成することができまです。

Gmailには便利なプラグインが多数提供されています。ソースを直接編集可能にするエディターのプラグインなどもあるようです。そうしたものを使ってももちろん代替テキストの設定はできるようになるはずです。とはいえ、システム部門の方針でプラグインを自由に追加できない場合もあるでしょうから、上記の方法は覚えておくと良いと思います。

技術コラムAMCC,miChecker

検出理由

「問題あり」として検出される項目です。
input要素があって、title属性を用いているとき、そのtitle属性の値が空あるいは空白文字の場合に検出されます。

しかしながら、テストケースをいろいろ作成しましたが、この検出が再現できていません。label要素もtitle属性もないケースは「問題あり」として正しく検出しますが、title属性が空あるいは空白文字の場合は検出しません。

検出しないどころか、label要素もtitle属性も無い箇所が同時に存在し、それだけであれば検出するケースであっても、title="" あるいは title=" " があると検出しなくなるようですので注意が必要です。

加えて、参照する達成方法がH44になっています。title属性による対処はH65で、H44はlabel要素による対処ですので、label要素でのラベルが空のケース、および空白文字のみのテストケースも作成しましたが、いずれも検出はされませんでした。

<!-- 検出しないケース -->
<input type="text" class="form-ctl" id="search4" placeholder="🔍" title="">

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

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

技術コラムAMCC,miChecker

検出理由

「問題の可能性大」として検出される項目です。
alt属性に設定される文字列が150字を超え、151字以上になるとこの項目が検出されます。文字は半角でも全角でも1文字は1文字としてカウントされます。スペースも1文字としてカウントされます。

<!-- 150字を超える代替テキスト -->
<img src="images/logo.gif" alt="1234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901">

根拠

音声ブウラザで読み進めているときに、うまく聞き取れず、少し戻って聞き直したい時があります。大抵のスクリーンリーダーでは、単語単位、一定の文字数あるいは一文字づつなど前に戻す仕掛けが用意されていますが、代替テキストの内容を読み上げているときは、それらの機能は利用できません。読み始めたら最後、最後まで聞くしかないのです。戻そうとすれば、読み上げポイントは先頭に戻ってしまい最初から聞くことになってしまいます。代替テキストが長ければ長いほど、このリスクは高まります。たとえ、巻き戻す必要がなかったとしても、利用者には常に注意深く聞かないといけないというストレスを与えます。

修正方針

解決は容易ではありません。説明を長くしたのにはそれなりの理由があるはずだからです。適当に短くするというわけにはいかないはずだからです。このような場合は、次の方法のいずれかを検討してみてください。

1. 代替テキストの内容をもう一度だけ再検討する

なかなか短くできるものではないのですが、それでも、一度は短くすることを考えましょう。それが本当にその画像を通して伝えたかったことなのか、画像の前後で説明済みではないのか、よくよく確認しましょう。

また、そもそも、その画像が視覚的に見る利用者にとって、意味のある情報を提供しているものなのかを考えることも大切です。なんとなく、雰囲気を伝えたくてパワーポイントの絵をそのままイメージにしていることはよくあります。そうした図では、視覚的に見る人にとっても極めて読みにくい場合も多く、そのような場合は"○○の参考図"くらいの代替テキストでも十分かもしれません。

2. area要素で画像を分割し、それぞの代替テキストを設定する

何かのフローやブロックを示すような図の場合は、いくつかのブロックに分割できるかと思います。そのような場合は、その単位でarea要素を使用し、代替テキストをそのブロックごとに設定します。

3. 画像の前後に補足する説明テキストを用意する

画像の説明しているポイントだけでも、テキストにして画像の前後に配置します。視覚的に見ている人にとってみると、画像を読めばわかることが、テキストでも提供されていることになります。やや冗長になるかもしれませんが、画像中の文字は読みにくいと感じる方にとってはありがたいことですし、コピべもできるようになります。そうして、テキストで書き出した分は、代替テキストからは省いてしまいます。

もし、どうしても視覚的に見える形でテキストを配置したくないのであれば、非表示のテキストでこの補足説明を提供する方法もあります。非表示のテキストについては、「White House の取り組むWebアクセシビリティ」を参考にしてください。

4. longdesc属性を利用する

「達成方法 H45」による方法です。別のページに説明を書いたテキストを用意しておき、それへのリンクを設定します。スクリーンリーダーによっては、詳細な説明があことを伝えるようになります。

補足

（なし）

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

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

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

技術コラムAMCC,miChecker

検出理由

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

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

登録された不適切な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対策テクニック集」に整理されています。)