ラベルなしでアクセス可能な検索バーをつくる方法

あなたがラベルなしで検索バーを造ろうとしているならば、これは動きです

<form role='search'>
  <label for="searchBar" class="sr-only">Search Term</label>
  <input id="searchBar" type="text" placeholder="Search Term">
  <button>Search</button>
</form>

を追加

.sr-only {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}

私たちのCSSは、画面の読者を悩ませていない画面のラベルの方法を設定しますが、視覚的に簡単な検索入力を残します.どのように高さと幅が1 pxに設定されているか注意してください.各ピクセルのリーダーが0 pxに設定した場合、スクリーンリーダーは完全にスキップしますので、1 pxにしてください.オーバーフローが隠されているので、長いラベルのタイトルを書いた場合は、間違いなく、画面上に終了しないだろう.Placeholderを使用すると、意味のHTMLで標準的に来るすべてのアクセシビリティを維持しながら、我々は、目撃者のユーザーに入力の機能を伝えることができます.
ここでは同じオプションですが、すべての反応ユーザーのためのJSXで書かれて

<form role='search'>
  <label htmlFor="s" className="sr-only">Search Term</label>
  <input id="s" type="text" name="search" placeholder="Search Term"/>
  <button>Search</button>
</form>

コードは機能的に同じ反応ですが、htmlfor ="s "の使用に注意してください.

第2のオプション

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term"   title="Search Term">
  <button>Search</button>
</form>

ラベルが存在しないとき、タイトル属性はラベルとして機能します、あなたはそれを望まないかもしれません、しかし、あなたが第2のために入力を乗り越えるとき、ツール・チップで株は来ます.

最後のオプション:

<form role='search'>
  <input id="searchBar" type="text" placeholder="Search Term" aria-label="Search Term">
  <button>Search</button>
</form>

アリアラベルを使用してジョブを取得
それでも、最善の方法は、あなたの入力をラベルして、ラベルを「ID」で入力IDにリンクすることです.これは、おそらく、退屈だが、それは、誰のために動作します.

<form role='search'>
  <label for="searchBar" >Search Term</label>
  <input id="searchBar" type="text">
  <button>Search</button>
</form>

注意することは重要です、ラベルはキーボード入力をコントロール入力を形成するのを助けます.そして、ため息をつけられたユーザーがラベルだけでなく入力自体をクリックする能力を許します.さらに、彼らは普遍的なブラウザーとスクリーンリーダー支持をします.
もちろん、これを行うには、多くの方法があり、はるかに良いドキュメントは、以下に記載されているこれらのコアの概念は、検索バーや検索フォームにアクセスするための基本的な必要性を与える.
このブログはアクセシビリティに関するシリーズの第一です.アクセシビリティを持つ共通のコンポーネントを構築するための出発点を提供することに努めています.

資源

https://webaim.org/techniques/forms/advanced
http://web-accessibility.carnegiemuseums.org/code/search/
https://designsystem.digital.gov/components/form-controls/