GTM-MML4VXJ
Skip to main content

7.1.3.2 意味のある順序に関する達成基準

コンテンツが提供されている順序がその意味に影響を及ぼす場合には、正確な読み上げ順序はプログラムが解釈可能でなければならない。

引用元:JIS X 8341-3:2010「高齢者・障害者等配慮設計指針-情報通信における機器、ソフトウェア及びサービス-第3部:ウェブコンテンツ」

解説

コンテンツの並び順を意味の通じる「正確な音声読み上げ順序」にしなければなりません。

本達成基準を満たす方法として、最もシンプルなのは、見た目の並び順と音声読み上げ順序を一致させることです。HTMLのウェブページの場合、音声ブラウザやスクリーンリーダーによる音声読み上げ順序はソースコードに記述された順序になります。コンテンツがHTMLのソースコードに記述された順序で読み上げられたときに、意味が通じるかどうかを確認します。コンテンツをリニアライズする機能のあるチェックツールを用いると、目視でその順序を確認することができます。

しかし、本達成基準を満たすためには、必ずしもコンテンツの見た目の並び順が音声読み上げ順序と一致している必要はありません。例えば、ページ上部にヘッダー、その下の左にサブメニュー、右にメインコンテンツがあり、一番下にフッターの四つのセクションに分けられるウェブページがあるとします。見た目の並び順は、次のようになります。

  1. ヘッダー
  2. サブメニュー
  3. メインコンテンツ
  4. フッター

HTMLのソースコードに記述されている順序も同じ場合もあれば、例えば次のような順序で記述されていてCSSを用いて見た目の並び順を変更している場合もあります(「事例と実装」の「良い例 2」参照)。

  1. ヘッダー
  2. メインコンテンツ
  3. サブメニュー
  4. フッター

後者の場合、コンテンツの見た目の並び順とHTMLのソースコードに記述されている順序(つまり、音声読み上げ順序)が異なります。しかし、メインコンテンツとサブメニューの前後関係には意味がなく、順序は違っていてもコンテンツの意味が変わることはありません。このような場合には、コンテンツの見た目の並び順と異なっていても「正確な読み上げ順序」であるといえます。

また、リンクやボタンの操作をトリガーとして動的にコンテンツが挿入される場合、そのコンテンツが現在位置よりも後に挿入されるのであれば問題ありませんが、現在位置よりも前に挿入される際にはユーザーが気づかない可能性があります。これについては、近い将来的にはW3Cが策定中の『WAI-ARIA』を用いることで対処可能になります。

事例と実装

良い例 1:見た目の並び順とソースコードの記述順が同じ

スクリーンショット:見た目の並び順とソースコードの記述順が一致しているウェブページ

見た目に「ヘッダー、サブメニュー、本文、フッター」の順で並んでいて、ソースコードも同じように「ヘッダー、サブメニュー、本文、フッター」の順で記述されているため、「正確な読み上げ順序」であるといえる。

良い例 2:見た目の並び順とソースコードの記述順が異なる

スクリーンショット:見た目の並び順とソースコードの記述順が異なるウェブページ

見た目には、同じように「ヘッダー、サブメニュー、本文、フッター」の順で並んでいるが、ソースコードでは「ヘッダー、本文、サブメニュー、フッター」という異なる順序で記述されている。しかし、本文部分とサブメニュー部分は、それによって順序が入れ替わっているだけで、それぞれのコンテンツの意味は変わらないため、「正確な読み上げ順序」であるといえる。

悪い例:操作性に問題のある音声読み上げ順序

スクリーンショット:テキストフィールド、[検索]ボタン、ラジオボタンの順で読み上げられるサイト内検索

見た目の並び順と同様に、音声読み上げではテキストフィールド、[検索]ボタン、ラジオボタンの順で読み上げられる。[検索]ボタンの後に検索範囲を変更できるラジオボタンがあるため、音声読み上げではその存在に気づかない可能性がある。

参考情報

関連する達成基準

等級A