操作部品の名前・役割・今の状態や値をソフトにも伝える。

05条件と補足

名前、役割、状態や値の違い

名前は、ソフトが操作部品を利用者に識別させるためのテキストです。「名前 (name)」はHTMLのname属性とは別の概念です。役割は、その部品がボタン、リンク、入力欄など、どんな機能を持つかを表します。

状態や値には、開閉状態、選択状態、入力した文字列、スライダーの現在値などがあります。フォーカスがあるかも重要な状態です。必要な情報は部品の種類によって変わります。

図のボタンでは、名前は「受講前の準備」、役割は「ボタン」、状態は「展開」又は「折りたたみ」です。文字入力欄なら、項目名とは別に、現在入力されている文字列もソフトが扱えるようにします。

読み取れること、設定できること、変更が伝わること

必要なのは情報を読み取れることだけではありません。利用者が設定できる状態・特性・値は、ブラウザーや支援技術が対応する方法で、ソフトからも設定できる必要があります。変更通知もブラウザーや支援技術が利用できるようにします。

今回の例では、標準のボタンを通じて開閉を操作でき、開閉するたびにaria-expandedを更新します。案内が開いているときはtrue、閉じているときはfalseにして、現在の表示と一致させます。

変更通知を利用できることと、毎回同じ文章が自動で読み上げられることは別です。この例では、開閉状態をソフトへ伝えるために、毎回の状態を読み上げる独自の案内を追加していません。

標準のHTMLとARIA

button、input、select、リンクなど、標準のHTML要素を仕様に沿って使うと、役割や操作方法、状態や値をブラウザーが支援技術へ伝えます。入力欄のlabelなど、部品に必要な名前も適切に関連付けます。

独自の部品や追加の機能を作る場合は、必要な役割・状態・特性をARIAなどで補います。図ではbuttonの標準の役割を使い、aria-expandedで開閉状態を補い、aria-controlsで対象の案内に関連付けています。aria-controlsの使用は、この教材で選んだ実装方法です。

divやspanにrole="button"を付けるだけでは、キーボードで押す動作は追加されません。名前や状態を伝えることに加え、2.1.1「キーボード」などの操作要件も確認します。

見えるラベルや一貫した識別との違い

この基準で扱う名前は、画面に見える場合と、支援技術だけに伝わる場合があります。4.1.2だけで、すべての名前を画面に表示することまで求めるわけではありません。

一方、入力を求める場面のラベル又は説明は3.3.2「ラベル又は説明」で確認します。見えるラベルに文字がある場合、その文字を名前に含めることは2.5.3「ラベルを含む名前 (name)」で確認します。3.2.4「一貫した識別性」は、ページ一式で繰り返す同じ機能を一貫して識別できることを扱います。

図は開閉ボタンについての例です。名前・役割・状態が伝わることだけで、画面やサイト全体のWCAG適合を示すものではありません。