accessibility / label / accessible name
labelとアクセシブルネームの境界を確認する
visible label、accessible name、descriptionの役割を固定例で確認します。実サイトのDOM取得やARIAの自動修正はしません。
名前の判断表
見えている文字と支援技術へ渡る名前は、descriptionや補助説明と役割が異なります。
| ケース | visible label | accessible name | 確認点 |
|---|---|---|---|
| explicit-label-name | メール | メール | labelとcontrolを関連付ける |
| icon-aria-label | アイコンのみ | 検索 | icon buttonに名前を付ける |
| describedby-description | パスワード | パスワード | 補足説明はdescriptionへ分ける |
| visible-name-difference | 保存 | 下書きを保存 | visible textとnameの差を確認 |
| missing-name-fail-closed | アイコンのみ | 未定義 | 名前なしを安全側で保留 |
確認の順番
- 操作対象にvisible labelがあるか見る。
- accessible nameが操作を一意に表すか確認する。
- 補足説明はdescriptionと混同しない。
- 名前なしは自動補正せず実装前に決める。
固定例だけを表示します。実サイトのDOM、入力、外部通信、ARIA自動修正はありません。