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

H49-2: セマンティックなマークアップを用いて、強調又は特別なテキストをマークアップする

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

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

テストファイル

H49-2のテストファイル

見解

要注意

対象

cite, blockquote要素

注意点

現時点では、cite要素とblockquote要素の関連付けができないという問題がある。
引用文献等のタイトルを示す際にはcite要素を使用できるが、見た目にはそれが引用元であることが伝わらない。
また、blockquote要素を用いずに、CSSだけで引用部分であることを示してはいけない。

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

「」をつけたり、"出典元"、”引用元”などの文言を補足したほうがよい。
blockquote要素を使用する際には、文脈から引用部分であることが分かるようにすべきである。

備考

cite要素はスクリーンリーダーによるサポートが全くなく、blockquote要素をサポートしているのはJAWSとNVDAだけだが、使用することによる悪影響はなく、スクリーンリーダーによる今後の機能向上に期待する。

テスト結果の詳細

ユーザエージェント 検証結果 操作手順 備考
Internet Explorer 6.0 CSSを外した状態でも「わが人生の物語」は太字斜体、「ここが引用されている…」はインデント表示と、別々に表示された
Internet Explorer 7.0 - IEはCSSオフにできないので、ローカルにあるテストファイルのスタイルシートのファイル名を変更して実施。
「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
Internet Explorer 8.0 表示>スタイル>スタイルなしで実施。
「わが人生の物語」が太字のイタリック表示、「ここが引用されている・・・」以降が一行改行、およびインデントされ、他と区別がつくレンダリングになっていることを確認
Internet Explorer 9 表示メニュー>スタイル>「スタイルなし」を選択して実施
1:「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
2:「ここが引用されている・・・」でインデントされ、他と区別がつくレンダリングになっていることを確認
1:○
2:○
Firefox 3.5 Firefoxの機能「スタイルシートを使用しない」を使用して実施。
「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
Firefox 4.0 1:表示メニュー>スタイルシート>「スタイルシートを使用しない」を選択して実施。
「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
2:「ここが引用されている・・・」でインデントされ、他と区別がつくレンダリングになっていることを確認
Firefox 9.0 スタイルシート適用を以下のやり方でオフにした。
表示>スタイルシート
「スタイルシートを使用しない」を選択して実施
1:「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
2:「ここが引用されている・・・」でインデントされ、他と区別がつくレンダリングになっていることを確認
1:○
2:○
Safari 3.2 htmlファイルだけをローカルに落としてきてCSSをオフにした状態をつくり、検証。区別のつくレンダリングだった。
Safari 5.0.3
JAWS for Windows 9.0 ■操作手順
「わが人生の物語」は本文と同じように読み上げるが、「ここが引用されているブロックです…」はその前に「引用」と読み上げる
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です マル 引用 ここが引用されているブロックです マル ここが引用されているブロックです マル ここが・・・(最後まで)」(音声による変化はなかった)
音声による変化はなかった
ホームページ・リーダー 3.04 × ■操作手順
メタテキストで読み上げを違う設定にした状態でも同じように読み上げてしまう
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です。
ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。」
Homepage Readerでは対応していない模様
PC-Talker XP 3.06 × ■操作手順
特に強調した読み方はしていない。強調部分は区切って読んでいるだけである。
引用元も特に強調されていない。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です。
ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。」
Ctrl+矢印で読み上げると強調部分のところは続けて読まず、「本当に」と前後で区切っているが、読み上げの区別はつかない。引用元は続けて読むと一息おいているが、引用元だとはわからない。
PC-Talker XP 3.06 + NetReader 1.18 × ■操作手順
1. cite要素(「わが人生の物語」)が引用元を示すことが分かるように読み上げなかった。
2. blockquote要素(「ここが引用されている・・・」)が引用箇所であることが分かるように読み上げなかった。
■音声読み上げ
「次の文章は テン ヘレンケラーのわが人生の物語からの引用です マル ここが引用されているブロックです マル ~」
FocusTalk V3 × ■操作手順
cite、blockquoteともに、特に引用がわかる読み方はしていない。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です。
ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。」
NVDA 2010.1j ■操作手順
「わが人生の物語」は本文と同じように読み上げるが、「ここが引用されているブロックです…」はその前に「引用」と読み上げ、引用終了後には「引用終了」と読み上げる。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です 引用 ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです 引用終了」
NVDA 2011.1 ■操作手順
「わが人生の物語」は本文と同じように読み上げるが、「ここが引用されているブロックです…」はその前に「引用」と読み上げ、引用終了後には「引用終了」と読み上げた。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です 引用 ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです 引用終了」
Firefox18.0.1 スタイルシート適用を以下のやり方でオフにした。
表示>スタイルシート
「スタイルシートを使用しない」を選択して実施
1:「わが人生の物語」がイタリック表示、「ここが引用されている・・・」以降がインデントされ、他と区別がつくレンダリングになっていることを確認
2:「ここが引用されている・・・」でインデントされ、他と区別がつくレンダリングになっていることを確認
Google Chrome 25 【1】CSSをオフにした状態で、cite要素(「わが人生の物語」)でマークアップした箇所を他とは区別のつく見た目でレンダリングするか(多くの場合、cite要素はイタリックで表示される)を確認する。
CSSオフでの確認方法は次の通り
chromeはCSSをオフにする機能が提供されていないため、“テスト開始”から“テスト終了”までのエリアだけを別HTMLに書き出して表示確認した。
【2】CSSをオフにした状態で、blockquote要素(「ここが引用されている・・・」)でマークアップした箇所を他とは区別のつく見た目でレンダリングするか(多くの場合、blockquote要素はインデントされる)を確認する。
CSSオフでの確認方法は次の通り
chromeはCSSをオフにする機能が提供されていないため、“テスト開始”から“テスト終了”までのエリアだけを別HTMLに書き出して表示確認した。
【1】○
“わが人生の物語”がイタリックで表示さ、他とは区別がつく見た目であることを確認した。
【2】○
“ここが引用されている、、”のエリアがインデントされて表示されることを確認した。
Safari 6.0.5 スタイルシートの無効化はあらかじめ環境設定の詳細で「メニューバーに"開発"メニューを表示」を選択したうえで 開発→スタイルを無効にする を選択
NVDA 2012.3 ■操作手順
「わが人生の物語」は本文と同じように読み上げるが、「ここが引用されているブロックです…」はその前に「引用」と読み上げ、引用終了後には「引用終了」と読み上げた。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です 引用 ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです ここが引用されているブロックです 引用終了」
PC-Talker 7 2.12 × ■操作手順
Ctrl+下矢印キーで行読み、またはShiftキーで全文読み
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です。」
Ctrl+下矢印キー
「ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。」
引用元と引用部分が分かるようには読み上げない。
VoiceOver × ■操作手順
1. 1本指フリック、2本指フリックともに、cite要素でマークアップされた「わが人生の物語」を、引用元として認識して読み上げることができなかった。
2. blockquote要素でマークアップされた部分も、引用として認識して読み上げることができなかった。
■音声読み上げ
「次の文章は、ヘレンケラーのわが人生の物語からの引用です。
ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。ここが引用されているブロックです。」