アクセス可能な入力要素 |基本

TL;DR: コンポーネントがどれほど小さいかに関係なく、実装時には常にさまざまな異なるユーザーとその能力を考慮してください。一見すると、チェックボックスなどの入力要素は簡単に修正できるように見えますが、アクセス可能であることを確認するために考慮すべき点がいくつかあります。

このシリーズでは、さまざまな種類の入力要素と、それらをよりアクセスしやすくする方法について取り上げます。まずは、正しい入力タイプの使用とラベルの関連付けという基本から始めます。

見てみましょう。

正しい入力タイプの選択

HTML で input 要素を使用する場合、対応する要素に常に正しい入力タイプを設定する必要があります。デフォルトの入力タイプはテキストであり、さまざまなケースで機能しますが、できるだけ具体的であることがすべてのユーザーに役立ち、多くの固有の機能が付属しています。 <入力タイプ="数値">たとえば、数値入力フィールドを定義し、携帯電話でキーボードの代わりにテンキーを開き、最小値と最大値を使用して範囲を制限できます。 <入力タイプ="パスワード">対応する入力をマスクするため、ユーザーのプライバシーが保護されます。ブラウザによっては、日付ピッカーを開きます...など。正しい入力タイプを選択することで、HTML の特定の継承機能を使用できるようになり、作業が楽になり、同時にユーザー エクスペリエンスも向上します。

入力要素にラベルが常に関連付けられていることを確認する

使用している入力の種類に関係なく、入力フィールドに必ずラベルを関連付けてください。通常、これは を使用して実行できます。要素と for 属性。

<label for="firstname">First name:</label>
<input type="text" name="firstname">



<h3>
  
  
  aria-label vs. aria-labelledby
</h3>

<p>In a case in which a visual label is not an option or can't be associated with input element in the above mentioned way, aria-labels can also be used to identify form controls. If you are familiar with ARIA a little bit, you may be aware that the preferred option, if possible, is to work without aria whenever possible - however, in the real life of course, this isn't always feasible. </p>

<h4>
  
  
  aria-label
</h4>

<p>An aria-label can be used when no visible text label is present, for example, when an icon button is used without any text.<br>
</p>

<pre class="brush:php;toolbar:false"><button aria-label="Search"><img src="search-icon.svg" alt=""></button>

aria-labeledby

入力のラベル付けの参照として別の要素が使用される場合、aria-labelledby が便利です。

<div role="ダイアログ">



<p>可能な限り、セマンティック HTML を使用して、入力要素にアクセス可能な名前を付けるようにしてください。この特定のケースではそれが不可能であることが確認された場合にのみ、aria 属性の使用に戻してください。 </p>

<p>セマンティック構造の使用、正しい入力タイプの追加、ラベルの関連付けなどの基本を理解したら、入力要素をよりアクセスしやすくするための他の側面 (無効な入力要素など) を詳しく見ることができます。フォーカスのスタイルと色のコントラスト、および予想されるキーボード ナビゲーション。 </p>

<p><strong>リソース:</strong></p>

• W3Schools: HTML 入力タイプ
• コントロールのラベル付け - W3
• A11y Collective - Aria-label vs. aria-labeledby

以上がアクセス可能な入力要素 |基本の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。