WCAG 2.2 達成基準 2.5.3 「ラベルを含む名前(name)」の検品について

今回は、WCAG 2.2の2.5.3「ラベルを含む名前(name)」について、その確認方法をご紹介します。
詳しい内容はSuccess Criterion 2.5.3をご参照ください。

達成基準の概要

以下は達成基準の日本語訳を引用したものです。

ユーザインタフェース コンポーネントがテキスト又は文字画像を含むラベルを持つ場合、視覚的に提示されたテキストが名前 (name) に含まれている。

この基準は、画面上に表示されているラベル（視覚的ラベル）と、スクリーンリーダーなどの支援技術が認識するプログラム的な名前が一致していることを求めています。
これにより、視覚障害のあるユーザーがスクリーンリーダーを使っても視覚的なラベルと同じ情報が伝わり、混乱や誤解を避けられます。

検品の方法

HTMLソースの確認

Google Chromeの開発者ツールを使用して、HTML内のlabelとフォーム要素が正しく関連付けられているかを確認します。
具体的には、フォーム要素のidとlabel要素の for属性の値が一致していることを確認します。
この関連付けが正しく行われていないと、スクリーンリーダーが誤った名前を読み上げる可能性があります。

また、aria-labelやaria-labelledbyが使用されている場合は、それが適切に設定されているかを確認します。
視覚的なラベルがない場合や、複雑なインターフェースでは、WAI-ARIA属性を用いて正確な名前を設定することがあります。

視覚的なラベルが含まれていることを確認

プログラム名に視覚的なラベルが含まれていることを確認します。
また、視覚的に表示されているラベルと、スクリーンリーダーが参照するプログラム名が一致しているのが理想です。
例えば、ボタンやリンクに表示されているテキストが「送信」であればスクリーンリーダーも「送信」と読み上げることで、支援技術を利用するユーザーが画面の内容を正しく理解し、操作を行う際の混乱を防げます。

自動ツールでの確認

axe DevToolsなどの自動チェックツールを併用して、視覚的ラベルとプログラムによる解釈が可能な名前の不一致を自動で検出することも可能です。
これらのツールは、HTMLコード内の問題点を迅速に検出し、効率的な検査をサポートします。
自動ツールで検出された問題箇所を確認し、適切に修正を行うことで、アクセスしやすいコンテンツを提供できるようになります。

確認時に気を付けるポイント

ラベルとプログラム名の一致を確認する際には、以下のポイントに注意します。

• 視覚的にラベルが表示されていても、スクリーンリーダーが異なる名前を読み上げていないか
• aria-labelやaria-labelledbyを使用している場合、それらの設定が適切か

これらのポイントを押さえることで、ユーザーが意図した操作を正確に行えるようになり、誤操作のリスクも減少します。
ラベルと名前の一致を確認し、より多くのユーザーにとって使いやすいWebサイトを提供しましょう。