💬

【WCAG2.1の達成基準を咀嚼する】1.3.3 感覚的な特徴

2024/08/11に公開

アクセシビリティ

WCAG

tech

これは何？

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

参考

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

コンテンツを理解し操作するための説明は、形、色、大きさ、視覚的な位置、方向、又は音のような、構成要素が持つ感覚的な特徴だけに依存していない。

対象コンテンツの形や空間的な配置を知覚できない場合でも、正しく情報を受け取れるようになっていれば良い。
悪い例として、「丸いボタン」、「右のボタン」などの指示は視覚情報に依存しているため、晴眼者以外は理解が困難になってしまう。

ただし、形や位置を用いて情報を提供すること自体は効果的な場合が多い。
（特に認知能力の低下している利用者に対して）
情報が他の方法でも提供されている場合は、形や位置を用いた指示を用いても問題ない

例外

ある言語においては、「上記」はコンテンツのその地点よりも前にあるコンテンツを指し、「下記」はその地点よりも後にあるコンテンツを指すことが共通理解となっている。そのような言語では、参照されているコンテンツが読み上げ順序の中で適切な位置にあり、かつ参照が明確ならば、「下記のリンクのいずれかを選択する」または「上記のすべてを選択する」などの文はこの達成基準に適合するだろう。

共通理解がある & 参照されているコンテンツが読み上げ順序の中で適切な位置にあり、参照が明確ならば、「上記のすべてを選択する」「下のリンクのいずれかを選択する」と表現しても良い。

WCAG はウェブページ上に表示されたコントロールのみに該当するよう設計された。その意図は、視覚的又は聴覚的な手がかりのみを参考にコントロールを説明をすることを避けるためである。これを物理的なハードウェアコントロール (専用コンテンツのあるウェブキオスクなど) を操作するための手順に適用するとき、おそらく触知できる手がかり (例えば、矢印の形をしたキー、右側の丸いキー) が説明されるだろう。この達成基準は、指示の中で触知できる手がかりの使用を防ぐことを意図したものではない。

物理的なボタンについて「矢印の形をしたキー」、「右側の丸いキー」と説明することは問題ない。
これらは触知できるため、視覚的な手かがりを利用できない場合でも問題なく手掛かりとして利用できる。

メリット

全盲及びロービジョンの人々は、説明文がコンテンツの形及び／又は位置の記述のみに依存している場合、その説明文を理解できないことがある。形及び／又は位置以外の追加情報を説明文の中に提供することで、たとえ利用者が形及び／又は位置を知覚できないとしても、説明文を理解できるようになる。

視覚的な情報への依存を避けることで、全盲及びロービジョンの利用者も説明文を理解できるようになる。

具体的な達成方法

適切なラベリング、ライティングを行うことが最も大切。
繰り返しになるが、コンテンツや操作方法を説明する際に、視覚的な情報だけに依存しないよう注意を払わなければならない。

非活性なボタンを説明する場合

button要素にdisabled属性を設定すると、そのボタンへのフォーカスが困難になるため「非活性のボタン」だということがスクリーンリーダーの利用者に伝わりにくい。
このような場合、代わりにaria-disabledを用いることでボタンが非活性であることを説明できるようになる。