web-dev-qa-db-ja.com

入力ボタンのアクセシビリティをクリアする方法の説明が必要

クリアボタン(looks like "x")。このボタンをクリックすると、入力からすべてのテキストが削除されます。

enter image description here

このためのマークアップは次のようになります。

  <label for="first-name">First name</label>

  <div class="input-and-buttons">

    <button role="button" aria-label="Clear" tabindex="0">
      X
    </button>

    <input id="first-name" tabindex="1"></input>

  </div>

このボタンの意味と、スクリーンリーダー（NVDAやVoiceOverなど）を使用するユーザーの入力との関係を最もよく表す方法は？

web-appaccessibilityinput-fieldswebhtml5
1
kamituel

「Clear First name」など、コンテキストの入力のラベルを追加するだけです。これは、このタイプのボタンがページの複数のフィールドに存在する場合に特に役立ちます。そうでない場合、特にユーザーがボタンで移動したりフォームアイテムのリストを表示したりすると、このボタンがクリアしているフィールドが不明確になる可能性があります。

ここに表示しているマークアップに関する無関係な2つのメモ：

  • tabindex="1"の使用は 悪い習慣 です。代わりに、DOMで順番にマークアップする必要があります。 <button>は入力フィールドの後に後に来る必要があり、これは視覚的な順序と一致します。
  • role="button"の属性tabindex="0"と<button>は必要ありません。これらはネイティブに暗黙的に指定されている（ボタンはデフォルトでフォーカス可能であり、ネイティブの要素であるためそのセマンティックロールが組み込まれている）ため、余分なマークアップを追加するだけで、メンテナンスが困難になります。
4
Victor