🕌

【WCAG2.1の達成基準を咀嚼する】1.3.1 情報及び関係性

2024/08/11に公開

アクセシビリティ

WCAG

tech

これは何？

WCAG2.1のガイドライン中で示されている達成基準を、フロントエンドエンジニア視点でざっくりと噛み砕いてまとめたものです。
この記事では、達成基準 1.3.1 情報及び関係性について記載しています。

参考

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

何らかの形で提示されている情報、構造、及び関係性は、プログラムによる解釈が可能である、又はテキストで提供されている。

視覚的に伝えられている情報及び関係性を、視覚情報以外の手段でも同様に得られる必要がある
- 画面上の配置において、位置関係に依存しない表現をする
- 色を用いる場合、色以外でも情報を得られるようにする
視覚情報による情報の区別を、マークアップでも同等に表現できている必要がある

要するに、視覚で得られる情報は他の手段（スクリーンリーダー等）でも同様に得られる必要があるということ。

メリット

・この達成基準は、ユーザエージェントが個々の利用者のニーズに応じてコンテンツに適応できるようにすることによって、様々な障害のある利用者の役に立つ。
・全盲の (スクリーンリーダーを使用している) 利用者が、色を用いて伝えられている情報をテキストでも得られるようになる (色を用いて情報を伝えている画像のテキストによる代替を含む)。
・点字ピンディスプレイを使用している盲ろうの利用者は、色に依存した情報を利用できないことがある。

Webアクセシビリティを取り扱う上での基本的な考え方になるが、ユーザーの利用環境によって得られる情報に差をつけてはならない。
情報をプログラムによって解釈可能にしておけば、支援技術を通じて多様な利用状況に対応可能になる。

具体的な達成方法

視覚的、聴覚的な体裁によって暗に伝えられている情報や関係性を、コンテンツの利用方法が変わったときにも同様に担保する必要がある。それを実現するために、情報及び関係性をプログラム側が解釈できるようにセマンテックな構造を提供すれば良い。

※ 全て記載すると膨大な量になるため具体例は割愛
※ 気になる方は https://waic.jp/translations/WCAG21/Understanding/info-and-relationships.html を参照してください

WAI-ARIA の利用について

基本的には、WAI-ARIAではなくセマンティックなHTMLを優先するべき
参考：ARIA無しのほうが、悪いARIAよりも良い

WAI-ARIAによってroleを付与することはできるが、あくまでもroleを与えるだけであって、そのroleに期待される振る舞いをするわけではない。
そのroleに準じた振る舞いが無い場合、特にスクリーンリーダーやキーボード操作時に混乱を生む原因となる。