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

G115-4: セマンティックな要素を用いて、構造をマークアップする

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

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

テストファイル

G115-4のテストファイル

見解

要注意

対象

em要素

注意点

blockquote要素などとは異なり、文脈だけでは利用者は判断できない。

代替もしくは推奨する方法

強調されている箇所が分からないとコンテンツを理解できない場合には、何らかの方法で示さなければならない。
また、em要素とstrong要素の違いが分からないとコンテンツを理解できない場合には、その違いが分かるように何らかの方法で示さなければならない。

備考

使用することによる悪影響はなく、スクリーンリーダーによる今後の機能向上に期待する。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 1. CSSをオフにした状態で、em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所が、他とは区別のつく見た目でレンダリングされた。
2. em要素とstrong要素との区別も付くようにレンダリングされた
(em要素はイタリック、strong要素は太字)
Internet Explorer 7.0 em要素(「本当に」)又はstrong要素(「素晴らしい」)がマークアップした箇所を他とは区別のつく見た目でなおかつ、この二つの要素が区別できる状態でレンダリングされている。
Internet Explorer 8.0 1.em要素(「本当に」)又はstrong要素(「素晴らしい」)がマークアップした箇所を他とは区別のつく見た目になる。
2.この二つの要素が区別できる状態でレンダリングされている。em:太字・イタリック、strong:太字
Internet Explorer 9 以下の方法でスタイルシートを無効にした。
表示メニュー>スタイル>スタイルを使用しないを選択
1:em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所を他とは区別のつく見た目で表示されることを確認
2:em要素とstrong要素のと区別がつくようには表示されることを確認
1:○:「素晴らしい」の部分が太字になっていることを確認
2:○:「本当に」がイタリックで、「素晴らしい」が太字になっていることを確認
Firefox 3.5 1. CSSをオフにした状態で、em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所が他とは区別のつく見た目でレンダリングされた。
2. em要素とstrong要素との区別も付くようにレンダリングされた。
(em要素はイタリック、strong要素は太字)
Firefox 4.0 以下の方法でスタイルシートを無効にした。
表示メニュー>スタイルシート>スタイルシートを使用しないを選択
1:em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所を他とは区別のつく見た目で表示されることを確認
2:em要素とstrong要素のと区別がつくようには表示されることを確認
Firefox 9.0 以下の方法でスタイルシートを無効にした。
表示メニュー>スタイル>スタイルを使用しないを選択
1:em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所を他とは区別のつく見た目で表示されることを確認
2:em要素とstrong要素のと区別がつくようには表示されることを確認
1:○:「素晴らしい」の部分が太字になっていることを確認
2:○:「本当に」がイタリックで、「素晴らしい」が太字になっていることを確認
Safari 3.2 メニューバー「開発」からスタイルを無効にするにしてCSSオフに設定
本当:斜体に
素晴らしい:太字 で変わらずに表示されている
Safari 5.0.3
JAWS for Windows 9.0 × ■操作手順
次のように読み上げる
■音声読み上げ
「ドットドットドット 彼女が本当に言いたかったのは テン コーテーション これは良いどころではなく テン むしろすばらしい コーテーション ということだった カンタンフ ドットドットドット」(音声による変化はなかった)
em要素も、strong要素の部分も強調されていることがわかるようには読み上げない、JAWSオプションの調整で「画面エコー」を「強調表示」にして確認したが変わらず
ホームページ・リーダー 3.04 × ■操作手順
em要素もstrong要素も、他との区別なく読み上げられたため、強調されている箇所がわからなかった。
■音声読み上げ
「彼女が本当に言いたかったのは、"これは良いどころではなく、むしろ素晴らしい"ということだった」
em要素もstrong要素も解釈していないようだったので、×にしました。
PC-Talker XP 3.06 × ■操作手順
斜体と太字の部分は強調されて読み上げられなかった。
■音声読み上げ
...彼女が本当に言いたかったのは、"これは良いどころではなく、むしろ素晴らしい"ということだった!…
強調した読み上げはしない
PC-Talker XP 3.06 + NetReader 1.18 × ■操作手順
em要素(「本当に」)、strong要素(「素晴らしい」)ともに、強調されている箇所であることが分かるようには読み上げなかった。。
■音声読み上げ
「ピリオド 彼女が本当に言いたかったのは テン コーテーション これは良いどころではなく テン むしろ素晴らしい コーテーション ということだった カンタンフ ピリオド」
FocusTalk V3 ■操作手順
「彼女が本当に 強調 言いたかったのは、"これは良いどころではなく、むしろ素晴らしい 強調 "ということだった」と強調箇所の後に「強調」と読み上げ、強調していることが分かる。
■音声読み上げ
「彼女が本当に 強調 言いたかったのは、"これは良いどころではなく、むしろ素晴らしい 強調 "ということだった」
左記は、一文ずつ読み上げた結果。
全文読みで読み上げた場合、「本当に」や「素晴らしい」の後に「強調」とは発声されない。
NVDA 2010.1j × ■操作手順
該当項目は通常の本文と同じように読み上げられた。
■音声読み上げ
「...彼女が本当に言いたかったのは、"これは良いどころではなく、むしろ素晴らしい"ということだった!...」
NVDA 2011.1 × ■操作手順
該当項目は通常の本文と同じように読み上げられた。
■音声読み上げ
「...彼女が本当に言いたかったのは、"これは良いどころではなく、むしろ素晴らしい"ということだった!...」
Firefox18.0.1 以下の方法でスタイルシートを無効にした。
表示メニュー>スタイル>スタイルを使用しないを選択
1:em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所を他とは区別のつく見た目で表示されることを確認
2:em要素とstrong要素のと区別がつくようには表示されることを確認
Google Chrome 25 【1】CSSをオフにした状態で、em要素(「本当に」)又はstrong要素(「素晴らしい」)でマークアップした箇所を他とは区別のつく見た目でレンダリングするかを確認する。
【2】em要素とstrong要素との区別も付くようにレンダリングするか(多くの場合、em要素はイタリック、strong要素は太字)を確認する。
【1】○
【2】○
em要素とstrong要素との区別も付くように、“本当に”はイタリック、“素晴らしい”は太字でレンダリングすることを確認した。
Safari 6.0.5 スタイルシートの無効化はあらかじめ環境設定の詳細で「メニューバーに"開発"メニューを表示」を選択したうえで 開発→スタイルを無効にする を選択 em要素はイタリック、strong要素は太字で表示された
NVDA 2012.3 × ■操作手順
該当項目は通常の本文と同じように読み上げられた。
■音声読み上げ
「...彼女が本当に言いたかったのは、"これは良いどころではなく、むしろ素晴らしい"ということだった!...」
PC-Talker 7 2.12 × ■操作手順
Ctrl+下矢印キーで行読み、またはShiftキーで全文読み
■音声読み上げ
...彼女が 本当に 言いたかったのは、これは良いどころではなく、むしろ 素晴らしい ということだった!…
強調されていることが分かるようには読み上げない
VoiceOver × ■操作手順
該当項目は通常の本文と同じように読み上げられた。
■音声読み上げ
「省略記号 彼女が本当に言いたかったのは、これは良いどころではなく、むしろ素晴らしいということだった 省略記号」