操作を保ってHTMLアクセシビリティを修正する方法。
意味的な HTML 修正は機能を保ち、文脈内でテストします。ARIA の追加は、正しいネイティブ要素の選択の代わりにはなりません。
作業手順をタスクに合わせましょう。
コントロールの実際の目的を特定し、既存の動作を保つ適切なネイティブの意味を選びます。必要な名前や状態を加え、全体の文脈でキーボード、フォーカス、フォームの操作を確認してください。
- 用意するもの
- HTML 断片と指定されたアクセシビリティの問題。
- 得られるもの
- 確認事項を含む意味的なマークアップ修正案。
入力と結果を確認しましょう。
説明用の入力と出力 · 実際の WebAct 実行ではない学習用サンプル
入力項目サンプル個
Replace <div onclick="submitForm()">Send message</div> in an existing HTML form. The form's submit handler already performs validation and calls submitForm().
完成例
<button type="submit">Send message</button> The native submit button uses the existing form submission path. Verify Enter/Space interaction, visible focus, validation errors and prevention of duplicate sends. Do not retain a second click handler that also calls submitForm().
この入力をプロンプトに読み込み、WebAct にコピーして試してください。結果は掲載例と異なる場合があります。
判断のポイントとトラブル対処。
ARIA ロールだけで div は完全なボタンになりますか？
キーボード動作やフォームの意味は自動実装されません。目的に合うならネイティブボタンを優先してください。
クリックできる要素を置き換えると意図せずフォームが送信されるのはなぜですか？
ボタンの型を確認してください。通常の操作向けなら送信動作ではなく type="button" が必要な場合があります。
自分の資料で試しましょう。
タスクのプロンプト内の例を自分の資料に置き換えてください。必要な要件を残し、タスクを WebAct にコピーします。
タスクを調整してコピー ↑