Zenn
👏

【WCAG2.1の達成基準を咀嚼する】1.3.2 意味のある順序

2024/08/11に公開
accessibility
wcag
tech

これは何？

WCAG2.1のガイドライン中で示されている達成基準を、フロントエンドエンジニア視点でざっくりと噛み砕いてまとめたものです。
この記事では、達成基準 1.3.2 意味のある順序 について記載しています。

参考

「達成できている」と言える状態

コンテンツが提示されている順序が意味に影響を及ぼす場合には、正しく読むシーケンスはプログラムによる解釈が可能である。

スクリーンリーダー等の支援技術に依存している利用者が、意味のある順序通りに情報を受け取り、内容を正しく理解できるようになっていればOK。
つまり、

  • ページ内の全てのコンテンツが意味のある順序に沿って提示されており、
  • プログラムによってもその順序が解釈が可能な状態

であれば良い。

注意点

「視覚的にどう見えるか」を気にした実装を行なった場合、簡単にこの基準に違反してしまう。
例えば、

  • table要素をレイアウトに利用する
  • CSSによってマークアップ順序と表示順序を入れ替える（正しい順序でマークアップされていない）
  • 空文字を利用してレイアウトを行う

といった実装はスクリーンリーダーの利用者が混乱するので避けた方が良い。

例外

コンテンツの並び順を変更すると、コンテンツの意味に影響を及ぼす場合、その順序には意味がある。
例えば、あるページに二つの独立した記事がある場合、それらの記事の相対的な順序がそれぞれの意味に影響を及ぼす可能性はない。そのような状況においては、それらの記事自体には意味のあるシーケンスがあるかもしれないが、それらの記事が入っているテキストコンテナには意味のあるシーケンスはないかもしれない。

ページ内に独立したコンテンツが複数存在する場合、各コンテンツは独立した情報のため、表示順序を変更しても問題はない。
（もちろんどのコンテンツを先に読んでも影響がない場合のみ）

コンテンツの並び順には、常に意味があるとは限らない。例えば、あるウェブページのメイン部分とナビゲーション部分の相対的な順序は、それぞれの意味には影響を及ぼさない。それらは、プログラムによる解釈が可能な音声読み上げ順序で、どちらが先にもなりえる。

CSSを用いた表示順序の調整により、視覚的にはコンテンツよりもグローバルナビゲーションの方が上に表示されている場合、どちらを先に読み上げてもそれによってそれぞれの意味が変わるわけではないので問題ない。

メリット

この達成基準は、コンテンツを読み上げる支援技術に依存している利用者の役に立つ。デフォルトの表現における情報の並び順で明らかになる意味は、コンテンツを読み上げで提示したときも同じになるはずである。

引用箇所に記載の通り。
コンテンツを理解する上でその順序が重要な場合、支援技術の利用者も齟齬なく情報を得られるようになる。

具体的な達成方法

何はともあれ、コンテンツを意味のあるシーケンスでマークアップすることが大事。
視覚的な並び順だけを気にしてマークアップ順序がめちゃくちゃになってはいけない。

また、レイアウト目的の空文字は避ける。
文字間隔の調整が必要な場合は letter-spacingを利用する。

表記方向の異なるテキストが混在している場合（英語とヘブライ語など）はdir属性を利用可能。
以下、サンプルコードを引用する。

<p>The title says "<span lang="he" 
dir="rtl">פעילות הבינאום, W3C</span>" in Hebrew.</p>

https://waic.jp/translations/WCAG21/Techniques/html/H56

Discussion