4.1.2 カスタムコントロールの操作性を担保する
適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
カスタムコントロールを実装する場合、支援技術などのユーザーエージェントがそのコンポーネントを正確に解釈して実行できるよう、Accessible Name と role を設定する。スクリーンリーダーなどの支援技術で動作確認をし、支援技術でも遜色なく機能を操作でき、状態の変化を認識できることを確認する。
カスタムコントロールとは
カスタムコントロールとは、その言語が提供していない「独自のユーザーインタフェースコンポーネント」のことを指す。例えばタブ、 <input type="checkbox"> を使わないチェックボックスなど。カスタムコントロールは、開発者が機能をスクリプトで実装する必要がある。
WebではWAI-ARIAを用いて実装することが多い。
Accessible Nameとは
Accessible Nameとは、ユーザーインターフェイスの名前である。機械的に識別可能な名前であり、表示されるラベルテキストと一致することが多いが、代替テキストのように支援技術向けにのみ実装されていることもある。WCAGではnameと記載されているが、HTMLのname属性とは関係がなく、誤解を生みやすいため、Accessible Name and Description Computation 1.1で定義されている用語の名称で表記している。
参考資料
roleとは
roleとは、ユーザーインターフェイスの機能を表すものである。たとえば画像やハイパーリンク、チェックボックス、ラジオボタンなど。参考資料
具体例
SegmentedControl
AmebaではSegmentedControlというカスタムコントロールのコンポーネントを利用している。これはページ内で機能やモードを切り替える際に用いる。基本的にはブラウザ標準のラジオボタンと同様の機能をもっており、単一の項目のみを選択できる。ブラウザ標準のラジオボタンとの違いはキー操作体系にある。上下左右キーでの移動だけで選択されるラジオボタンと違い、上下左右キーでの移動に加えEnter, Spaceキーを押下しないと選択されない。そのため、「キーボードフォーカス中ではあってもActiveではない」という、ラジオボタンとは異なる状態が存在する。以上の仕様を満たすため、カスタムコントロールとしての実装を選択しており、Acceessible Nameとroleの適切な設定が必要となる。
デモページ：SegmentedControl ⋅ Storybook
テスト・チェック方法
Web
- AccessibilityTree（ユーザー補助ツリー）のRole（役割）、Name欄に値が適切に反映されていることを確認する
例：SegmentedControlコンポーネントをChromeのインスペクター上のアクセシビリティタブを開き確認している様子のスクリーンショット。「ユーザー補助ツリー」「ARIA属性」「計算済みプロパティ」の項目があり、「計算済みプロパティ」には「Name: "中"」「役割: radio」「無効なユーザー入力: false」「フォーカス可能: true」「オン: false」と表示されている。Accessible Nameは「中」、Roleは「radio」、選択状態がfalseの要素を検証中であることがわかる。 - Lighthouseやaxe DevToolsなどのアクセシビリティ検証ツールで、不適切なAccessible Nameやrole、WAI-ARIA属性の付け方をしていないかを確認する
- スクリーンリーダーなどの支援技術を用いて操作し、クリックやタップでの操作時と遜色なく操作でき、Active状態・フォーカス状態が認識できることを確認する