要注意
色
セマンティックなマークアップとしてstrong要素を用いたとしても、スクリーンリーダーによるサポートが十分ではないので、それだけでは不十分なことがある。
色の違いで情報を伝える際には、G138だけではなく、達成基準7.1.4.1を満たすことのできる実装方法も用いるべきである。
例えば、(X)HTMLでテキストを赤色の太字にする際には、font要素とb要素を用いるのではなく、strong要素を用いてCSSで文字色を指定すべきである。
ユーザエージェント | 検証結果 | 操作手順 | 備考 |
---|---|---|---|
Internet Explorer 6.0 | ○ | [必須]が赤フォント太字で表示されている。 | |
Internet Explorer 7.0 | ○ | [必須]が赤の太文字で表示されており、他のテキストと区別がつく | |
Internet Explorer 8.0 | ○ | [必須]が赤の太文字で表示されており、他のテキストと区別がつく | |
Internet Explorer 9 | ○ | strong要素でマークアップされた「[必須]」が、強調されていることが分かるように、他のテキストとは区別がつくように表示されるか確認(例:太字で表示される) | |
Firefox 3.5 | ○ | 「[必須]」が、赤い太文字で強調されていて、他の文字と区別できるようになっている。 | |
Firefox 4.0 | ○ | 1:「[必須]」が、太字で強調されており、他のテキストとは区別がつくように表示されていることを確認 | |
Firefox 9.0 | ○ | strong要素でマークアップされた「[必須]」が、強調されていることが分かるように、他のテキストとは区別がつくように表示されるか確認(例:太字で表示される) | |
Safari 3.2 | ○ | [必須]が太字でマークアップされて、他の表示と区別がつくようになっている。 | |
Safari 5.0.3 | ○ | ||
JAWS for Windows 9.0 | △ | ■操作手順 1.「件名 [必須]」と読み上げた。お名前も同様。 ■音声読み上げ 「件名 ダイカッコヒラキ 必須 ダイカッコトジ コロン エディット」 「お名前 ダイカッコヒラキ 必須 ダイカッコトジ コロン お勤め先 コロン エディット」 |
2.strong要素でマークアップされた「[必須]」が、強調されていることが分かるように読み上げられなかった お名前エディットの読み上げ時、お勤め先まで読んでしまう(JAWSの問題?) |
ホームページ・リーダー 3.04 | △ | ■操作手順 1.「フォーム1の先頭」「件名」「必須」「テキスト」、「お名前」「必須」「テキスト」、「お勤め先」「必須」「テキスト」、「送信」「実行ボタン」「フォーム1の終わり」と読み上げる。 2.[必須]は普通に読み上げて強調であることは分からない ■音声読み上げ 「フォーム1の先頭 件名 必須 テキスト お名前 必須 テキスト お勤め先 必須 テキスト 送信 実行ボタン フォーム1の終わり」 |
1:○ 2:×強調した読み上げ方はしない |
PC-Talker XP 3.06 | △ | ■操作手順 1.「件名」及び「お名前」のテキストフィールドを読み上げる際に、「[必須]」もあわせて読み上げている。 2.マークアップされた「[必須]」が、強調されていることが分かるようには読み上げられていない。 ■音声読み上げ 「入力に際してのご注意 赤色の太字で[必須]と示されている項目は、必須項目ですので必ず入力してください。 件名 [必須]: のエディット 文字入力 お名前(お勤め先といっているので間違えているかも??)のエディット 文字入力 お勤め先: のエディット 文字入力」 |
|
PC-Talker XP 3.06 + NetReader 1.18 | △ | ■操作手順 「件名」及び「お名前」のテキストフィールドを読み上げる際に、「[必須]」もあわせて読み上げた。 strong要素でマークアップされた「[必須]」が、強調されていることが分かるように読み上げられなかった。 ■音声読み上げ 「入力に際してのご注意 赤色の太字で カクカッコ 必須 カクカッコトジと示されている項目は テン 必須項目ですので必ず入力してくださいマル 件名 カクカッコ 必須 カクカッコトジ コロン 文字入力・・・」 |
|
FocusTalk V3 | △ | ■操作手順 1.「件名 空きカギカッコ 必須 閉じカギカッコ コロンのエディット」、「お勤め先のエディット」、「エディット」、「送信のボタン」と読み上げる。 2.[必須]は普通に読み上げて強調であることは分からない ■音声読み上げ 「件名 空きカギカッコ 必須 閉じカギカッコ コロンのエディット お勤め先のエディット エディット 送信のボタン」 |
1:× ・空きカギカッコ、閉じカギカッコは発声する場合もあるが、発声しない場合もある。どのような操作によりそれらが変わるのかは、不明。(FocusTalkの設定は常に初期値の状態) ・「お名前[必須]」のエディットボックスのラベルが、「お勤め先」と読み上げられる。また「お勤め先」のエディットボックスのラベルは読み上げられない。 2:× |
NVDA 2010.1j | △ | ■操作手順 1. 「件名」及び「お名前」のテキストフィールドを読み上げる際に、「[必須]」もあわせて読み上げられた。 2. strong要素でマークアップされた「[必須]」が、強調されていることが分かるように読み上げられなかった。 ■音声読み上げ 「件名 [必須]: エディットオートコンプリート付 お名前 [必須]: エディットオートコンプリート付」 |
|
NVDA 2011.1 | △ | ■操作手順 1. 「件名」及び「お名前」のテキストフィールドを読み上げる際に、「[必須]」もあわせて読み上げられた。 2. strong要素でマークアップされた「[必須]」が、強調されていることは分かるように読み上げられなかった。 ■音声読み上げ 「件名 [必須]: エディットオートコンプリート お名前 [必須]: エディットオートコンプリート」 |