ウェブアクセシビリティ基準における「名前（name），役割（role），及び値（value）」は、画面上のインターフェース要素が、視覚障害者や認知障害を持つユーザーにも正確に伝わるようにするための重要なガイドラインです。この基準に従うことで、支援技術がユーザーに要素の内容や機能を正確に伝え、操作ミスを防ぐことができます。
本記事では、「名前、役割、及び値」がもたらすメリットや、その具体的な実装方法について解説します。
名前（name），役割（role），及び値（value）とは？
「名前、役割、及び値」は、特にスクリーンリーダーや音声認識ツールなどの支援技術がウェブページの要素を正しく解釈し、ユーザーに情報を伝えられるようにするための情報です。
-
名前（name）：要素の名称であり、ユーザーにとってわかりやすいテキストです。例えば、ボタンに「送信」や「検索」などのラベルが設定されている場合、このラベルが「名前」に該当します。
-
役割（role）：要素が持つ機能や用途のことです。例えば、ボタンやチェックボックス、スライダーなど、支援技術が要素の種類を認識するために使用します。
-
値（value）：要素の現在の状態や選択されている内容です。たとえば、チェックボックスの「オン/オフ」状態や、スライダーの位置などが「値」に該当します。
WCAG基準での「名前、役割、及び値」の意義
WCAG（Web Content Accessibility Guidelines）では、すべてのインターフェース要素が正確な「名前、役割、および値」を持つことが推奨されています。これにより、支援技術が以下のように情報を正確に伝えられるようになります。
- 名前：要素が何を意味するのかが伝わり、ユーザーが誤解せずに操作できるようになります。
- 役割：要素が何のためにあるのかが明確になり、操作の意図が伝わります。
- 値：要素の現在の状態がわかるため、ユーザーが必要な操作を判断しやすくなります。
名前、役割、及び値を設定する方法
1. 名前を設定する
要素にわかりやすい名前を設定することで、ユーザーがその要素の意味や内容を認識しやすくなります。たとえば、ボタンやリンクには、テキストラベルをつけるか、ARIA属性のaria-labelを用いて名前を設定します。
<button aria-label="送信">📤</button>
2. 役割を設定する
特定の要素に役割を設定するためには、role属性を活用します。たとえば、リンク要素をボタンとして扱いたい場合、以下のように設定できます。
<a href="#" role="button">送信</a>
3. 値を設定する
動的な要素には、現在の状態や値をユーザーに伝えるための値を設定します。チェックボックスやスイッチの状態など、ユーザーが現在の値を把握できるように設定することが重要です。
<input type="checkbox" aria-checked="false" aria-label="同意する">
名前、役割、及び値の設定で注意すべき点
-
ラベルと名前の整合性：ラベルがない要素に対してはaria-label属性を使い、支援技術が内容を正確に読み上げるようにします。
-
動的要素の更新：値が変化する要素（チェックボックス、スイッチ、スライダーなど）では、aria-live属性を使用して支援技術が更新情報をリアルタイムに伝えられるようにします。
-
ARIA属性の過剰使用を避ける：ARIA属性は必要な箇所だけに使用し、過剰な設定は避けることが推奨されます。例えば、ネイティブな<button>要素にはrole="button"を設定する必要はありません。
まとめ
「名前、役割、及び値」の正確な設定は、すべてのユーザーが平等にWebコンテンツを利用できるようにするための重要な要素です。特に支援技術を利用するユーザーにとって、各要素の名称や機能が正確に伝わることで、誤操作や混乱を防ぎ、スムーズな操作が可能になります。
アクセシビリティの基本として、名前、役割、及び値の設定を心がけ、すべてのユーザーが快適に操作できるWebサイトを目指しましょう。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティウィジェットツールをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。