WCAG 2.2 達成基準 4.1.2 「名前 (name)・役割 (role)・値 (value)」の検品について
品質管理部スタッフ 坂下今回は、WCAG 2.2の4.1.2「名前 (name)・役割 (role)・値 (value)」について、その確認方法をご紹介します。
詳しい内容はSuccess Criterion 4.1.2 Name, Role, Valueをご参照ください。
達成基準の概要
以下は達成基準の日本語訳を引用したものです。
すべてのユーザインタフェース コンポーネント (フォームを構成する要素、リンク、スクリプトが生成するコンポーネントなど) では、名前 (name) 及び役割 (role) は、プログラムによる解釈が可能である。又、状態、プロパティ、利用者が設定可能な値はプログラムによる設定が可能である。そして、支援技術を含むユーザエージェントが、これらの項目に対する変更通知を利用できる。
この基準は、フォームやリンクなどの要素に正確な名前、役割、状態、値が定義されることで、支援技術がユーザーに正しく情報を伝えることを目的としています。
そのためには、各要素を適切にマークアップすることやWAI-ARIA属性を適用することが大切です。
検品の方法
検品の際は、仕様書をもとに要素に設定された名前、役割、値が適切に実装されているかを確認します。
開発者ツールでの確認
ブラウザの開発者ツールを使用して、該当要素のコードを確認します。
例えば、トグルボタンやスイッチコンポーネントに対して、role="switch"のようにコンポーネントの振る舞いに応じた適切な役割 (role) が設定されているか、あわせてaria-*属性（例：aria-label、aria-checked、aria-describedby）によって名前 (name) や状態、説明が提供されているかを確認します。
また、アイコンのみで表現されているボタンなど、見た目から操作内容を判断できない要素については、支援技術に名前 (name) を提供する必要があるため、アイコンボタンの画像には適切なalt属性が設定されているかを確認します。
これらの属性が正しく設定されていれば、支援技術はその要素の役割、名前、状態、説明を正確にユーザーに伝えることができます。
自動ツールでの確認
axe DevToolsなどのブラウザ拡張機能を使用して、要素の名前、役割、値が適切に設定されているかを確認します。
特に動的コンテンツや、JavaScriptを使用した複雑なインターフェースを含む場合は自動ツールを使用することで手動確認では見落としがちなポイントもカバーできます。
ただし、すべてのアクセシビリティ上の問題を検出できるわけではないため、役割 (role) や名前 (name) が適切に提供されているかといった点については、開発者ツールなどを用いた目視確認や実際の操作確認も併せて行う必要があります。
確認時に気を付けるポイント
標準的なHTML要素を使用している場合は、大きな問題は発生しにくいですが、カスタムコンポーネントや独自のインタラクションが含まれる場合は特に注意が必要です。
例えば、見た目がボタンのカスタムコンポーネントが、プログラム上でも正しくボタンとしての役割を持ち、標準的なHTML要素が使えない場合にはrole="button"といった属性で、ユーザーに対して正しい役割を与えているかを確認します。
また、プログラム上でそのカスタムコンポーネントを識別するための名前 (name) が不足していたり、誤っていたりしないかも確認が必要です。
視覚的にわかりやすくてもマークアップが適切でなければ、支援技術を使用しているユーザーに同じ情報が伝わらない場合があります。
特に、支援技術はページ上に表示されているすべての情報を拾うことができないため、適切にマークアップすること、プログラム上で明確に定義することが必要です。
マークアップの妥当性を確認し、より多くのユーザーにとって使いやすいWebサイトを提供しましょう。