フォームのアクセシビリティラベルの確認方法。
ラベルを確認するときはプログラム上の名前と見える文脈を見ます。近くの文字だけではアクセシブルな関連付けにならない場合があります。
作業手順をタスクに合わせましょう。
各部品のプログラム上の名前と表示ラベルとのつながりを調べます。明示的なラベル、囲むラベル、関連する ARIA 参照を確認し、欠けた名前や誤解を招く名前を要素の位置とともに報告してください。自動検査で意味を判断できない場合は手動確認を加えます。
- 用意するもの
- 表示されたフォームの入力欄と操作部品。
- 得られるもの
- 欠けたアクセシブルなラベルと不明瞭な名前。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Supplied markup: <span>Email</span><input id="email" type="email">. No other naming attributes. Correct the label association.
完成例
Finding: the visible caption has no programmatic association with the input. Proposed markup: <label for="email">Email</label> <input id="email" type="email"> Verify the id is unique and the control's accessible name is Email in the complete page.
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
プレースホルダー文字は常時表示のフォームラベルの代わりですか？
入力中に消えるため、明確に関連付けられたラベルの確実な代わりにはなりません。見える名前とプログラム上の名前の両方を確認してください。
見える説明が入力欄のラベルとして読み上げられないのはなぜですか？
一致する for/id の組など、有効な関連付けがないかもしれません。近さだけでなく結び付きを調べてください。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑