アクセシビリティ・サポーテッド(AS)情報:G138

G138: 色の手がかりを用いる際は、必ずセマンティックなマークアップを用いる

関連する達成基準の実装方法一覧

7.1.3.1情報及び関係性に関する達成基準 (等級A)

テストファイル

G138のテストファイル

見解

要注意

対象

注意点

セマンティックなマークアップとして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要素でマークアップされた「[必須]」が、強調されていることは分かるように読み上げられなかった。
■音声読み上げ
「件名 [必須]: エディットオートコンプリート
お名前 [必須]: エディットオートコンプリート」