HTML入力とラベル：ラブストーリー-CSSチュートリアル-php.cn

HTML入力とラベル：ラブストーリー

ほとんどの入力には共通点があります。コンパニオンレーベルで最も幸せです！そして、幸福はそこで止まりません。適切な入力とラベルを備えたフォームは、人々が使用するのがはるかに簡単で、それは人々も幸せにします。

この投稿では、セマンティックラベルと入力の組み合わせが不足しているため、あらゆる種類の人々がフォームを完成させることがはるかに難しくなっている状況に焦点を当てたいと思います。何百万人もの人々の生計はフォームに依存しているので、入力とラベルの間に充実した調和のとれた関係を作り出すために私が知っている最高のヒントに入りましょう。

コンテンツ警告：この投稿には、愛と人間関係のテーマがあります。

ラブストーリーはここから始まります！幸せなラベルと入力を作成するための基本をカバーしましょう。

ラベルと入力をペアリングする方法

ラベルと入力をペアリングするには、 2つの方法があります。 1つは、ラベル（暗黙的）に入力を包むことです。もう1つは、ラベルに属性と入力にIDを追加することです（明示的）。

暗黙のラベルは、入力を抱きしめていると考え、明示的なラベルは、入力の隣に立って手を握っていると考えてください。

 <label> 
  名前：
  
</label>

ログイン後にコピー

属性値の明示的なラベルは、入力のID値と一致する必要があります。たとえば、名前の値がある場合、IDにも名前の値が必要です。

  name：

ログイン後にコピー

残念ながら、たとえID属性が使用されていても、暗黙のラベルはすべての支援技術によって正しく処理されません。したがって、暗黙のラベルの代わりに明示的なラベルを使用することは常に最良のアイデアです。

 
<label> 
  名前：
  
</label>


<label for="rebricit-label-name"> name：</label>

ログイン後にコピー

各個別の入力要素は、1つのラベルとのみペアリングする必要があります。ラベルは1つの入力とのみペアリングする必要があります。はい、入力とラベルは一夫一婦です。 ♥♥

注：このルールには1つの例外があります。入力のグループを使用している場合は、いくつかのラジオボタンまたはチェックボックスを使用しています。これらの場合、A 要素は、ラジオボタンなどの特定の入力要素をグループ化するために使用され、グループ全体のアクセス可能なラベルとして機能します。

すべての入力がラベルを必要とするわけではありません

type = "submit"またはtype = "ボタン"を使用した入力には、ラベルが必要ありません。値属性は、代わりにアクセス可能なラベルテキストとして機能します。 type = "hidden"の入力もラベルなしで問題ありません。しかし、や<select>要素を含む他のすべての入力は、レーベルコンパニオンで最も幸せです。</select>

ラベルに入るもの

ラベルの内部にあるコンテンツは次のとおりです。

そのコンパニオン入力について説明してください。ラベルは、入力パートナーに属していることを全員に見せたいと考えています。
見える。ラベルをクリックまたはタップして、入力を集中させることができます。入力と対話するために提供する余分なスペースは、タップを増やすか、ターゲットをクリックするため、有益です。少しだけ取り上げます。
プレーンテキストのみが含まれています。見出しやリンクなどの要素を追加しないでください。繰り返しになりますが、この背後にある「なぜ」に進みます。

ラベル内のコンテンツでできる便利なことの1つは、ヒントのフォーマットを追加することです。たとえば、のラベルは、になります。しかし、その後、その要件を指定するラベルと入力の間のa の形で、日付を特定の形式で入力する必要があるというヒントをユーザーに提供することができます。ヒントは、日付形式を指定するだけでなく、入力上のARIAと説明された属性に対応するID値を持っています。

 
 start date 

<span>（dd-mm-yyyy）：</span>

ログイン後にコピー

このようにして、入力が何のためのものかを説明する明確なラベルの利点と、入力を特定の形式で入力する必要があることをユーザーにボーナスのヒントを得ることができます。

健全な関係のためのベストプラクティス

次のヒントは、基本を超えて、ラベルと入力ができる限り幸せであることを確認する方法を説明します。

DO：適切な場所にラベルを追加します

ページの視覚順序が要素がDOMに表示される順序に従う必要があると述べるWCAG成功基準があります。それは：

画面拡大鏡を使用して画面リーダーと組み合わせて使用するユーザーは、読み取り順序が画面上でスキップするように見えるときに混乱する場合があります。キーボードユーザーは、ソースオーダーが視覚順序と一致しない場合に、次に焦点がどこに行くかを予測するのに苦労するかもしれません。

それについて考えてください。ラベルが入力の前に来る標準のHTMLがある場合：

 <label for="orange"> orange </label>

ログイン後にコピー

これにより、ラベルはDOMの入力の前に配置されます。ただし、ラベルとフォームが柔軟な容器内にあるとし、CSSの注文を使用して、ラベルの前に入力が視覚的に来るものを逆転させます。

ラベル{注文：2; }
入力{注文：1; }

ログイン後にコピー

要素間をナビゲートしているスクリーンリーダーのユーザーは、入力が視覚的に最初に来るため、ラベルの前に入力がフォーカスを獲得することを期待するかもしれません。しかし、本当に起こることは、代わりにラベルが焦点を合わせていることです。スクリーンリーダーとキーボードでのナビゲートの違いについては、こちらをご覧ください。

だから、私たちはそれに注意する必要があります。チェックボックスとラジオボタンの入力の右側にラベルを配置することは従来です。これは、HTMLに入力した後にラベルを配置して、DOMと視覚順序の一致を確保することで実行できます。

ログイン後にコピー

DO：スクリーンリーダーで入力を確認します

入力がゼロから書かれているか、ライブラリで生成されているかにかかわらず、スクリーンリーダーを使用して作業を確認することをお勧めします。これを確認するためです：

関連するすべての属性が存在します。特に、forとid属性の一致する値です。
DOMは視覚順序と一致します。
ラベルのテキストは明確に聞こえます。たとえば、「DD-MM-yyyy」は、大文字の相当（DD-MM-yyyy）とは異なる方法で読み取られます。

過去数年にわたって、ダウンシフトなどのJavaScriptライブラリを使用して、入力や選択などのネイティブHTMLのものの上にオートコンプリートやコンボボックスなどの複雑なフォーム要素を構築しました。ほとんどのライブラリは、JavaScriptにARIA属性を追加することにより、これらの複雑な要素をアクセスできます。

ただし、JavaScriptを使用して強化されたネイティブHTML要素の利点は、JavaScriptが壊れているか無効になっている場合に完全に失われ、アクセスできません。したがって、これを確認し、安全なフォールバックとしてサーバーレンダリングされたJavaScriptの代替品を提供します。

これらの基本的なフォームテストをチェックして、さまざまなスクリーンリーダーが入力とそのコンパニオンラベルまたは伝説をどのように作成および発表するかを判断してください。

DO：ラベルを表示します

ラベルと入力を接続することは重要ですが、同様に重要なのは、ラベルを見えるようにすることです。可視ラベルをクリックまたはタップすると、入力パートナーが集中します。これは、膨大な数の人々に利益をもたらすネイティブのHTML行動です。

誇らしげに入力との関連性を誇らしげに見せたいラベルを想像してみてください。

そうは言っても、デザインが隠されたラベルを必要とする時があります。したがって、ラベルを非表示にしなければならない場合、アクセス可能な方法でそれを行うことが重要です。一般的な間違いは、表示：なしまたは可視性：ラベルを非表示にすることです。これらのCSSは、視覚的にだけでなく、スクリーンリーダーからの要素を完全に非表示にするプロパティを表示します。

次のコードを使用してラベルを視覚的に非表示にすることを検討してください。

 /*非neclationallyに焦点を合わせない要素の場合。ネイティブに焦点を当てる要素のために */
/ * .viseally-hidden：not（：focus）：not（：active） */
。
  境界線：0！重要。
  クリップ：rect（1px、1px、1px、1px）！重要;
  高さ：1px！重要。
  オーバーフロー：隠された！重要。
  パディング：0！重要。
  位置：絶対！重要;
  ホワイトスペース：nowrap！falight;
  幅：1px！重要;
}

ログイン後にコピー

Kitty Giraudelは、責任を持ってコンテンツを隠す方法を詳細に説明しています。

何を避けるべきか

入力とラベルの間に健全な関係を維持し、維持するために、ペアリングするときにやらないことがいくつかあります。それらが何であるか、そしてそれらを防ぐ方法に入りましょう。

しないでください：すべてのブラウザで入力が同じであることを期待してください

一部の古いデスクトップブラウザーにはサポートされていない特定の種類の入力があります。たとえば、Type = "Date"である入力は、Internet Explorer（IE）11、またはSafari 14 ¹ （2020年9月リリース）でもサポートされていません。このような入力は、type = "text"に戻ります。日付入力にクリアラベルがなく、古いブラウザのテキスト入力に自動的に戻ると、人々は混乱する可能性があります。

しないでください：ラベルをプレースホルダーに置き換えます

入力のプレースホルダー属性をラベルの代わりに使用しないでください。

すべてのスクリーンリーダーがプレースホルダーを発表するわけではありません。
プレースホルダーの価値は、小さなデバイスでカットオフする危険にさらされています。対照的に、ラベルのテキストコンテンツは、新しいラインに簡単にラップすることができます。
開発者が大きな網膜画面に、明るい部屋の薄い灰色のプレースホルダーのテキストを、気を散らす環境にある薄い灰色のプレースホルダーのテキストを見ることができるからといって、他の誰もができるという意味ではありません。プレースホルダーは、視覚の良い人でさえ目をぶらぶらして、最終的にはフォームをあきらめることができます。

文字が入力に入力されると、そのプレースホルダーは視覚的にも読者を選別するように見えません。誰かがフォームで入力した情報を確認するためにバックトラックする必要がある場合、再びプレースホルダーを見るためだけに入力されたものを削除する必要があります。
プレースホルダー属性はIE 9以下ではサポートされておらず、入力がIE 11に焦点を合わせたときに消えます。別のこと：プレースホルダーの色はIE 11のCSSでカスタマイズできません。

プレースホルダーは、すべてが完璧なときに現れる友人のようなものですが、あなたがそれらを最も必要とするときに消えます。代わりに、入力を素敵なハイコントラストラベルとペアにします。ラベルはフレーク状ではなく、100％の時間の入力に忠実です。

ニールセンノーマングループには、フォームフィールドのプレースホルダーが有害である理由を説明する詳細な記事があります。

しないでください：ラベルを別の属性または要素に置き換えます

ラベルが存在しない場合、一部のスクリーンリーダーは隣接するテキストを探し、代わりにそれを発表します。スクリーンリーダーが発表するテキストが見つからない可能性があるため、これはヒットアンドミスアプローチです。

以下のコードサンプルは、実際のWebサイトからのものです。ラベルは、入力に意味的に接続されていない要素で置き換えられています。

 <div>
  <span>カード番号</span>
  <div>
    
  </div>
</div>

ログイン後にコピー

上記のコードを書き直して、スパンを= "cardNumber"にラベルに置き換えることにより、アクセシビリティを確保する必要があります。これは、ほとんどの人に利益をもたらす最もシンプルで堅牢なソリューションです。

ラベルは、入力のAria-Labelledby属性と一致する値を持つIDを持つIDを持つスパンで置き換えることができますが、ラベルが許すのと同じ方法で入力に焦点を合わせてスパンをクリックすることはできません。ネイティブのHTML要素を再発明するのではなく、ネイティブのHTML要素の力を利用することが常に最善です。ネイティブの入力要素とラベル要素の間のラブストーリーは、書き直す必要はありません！それは素晴らしいです。

しないでください：インタラクティブな要素をラベル内に入れます

ラベル内には、プレーンテキストのみを含める必要があります。見出しなど、リンクなどのインタラクティブな要素を挿入しないでください。すべてのスクリーンリーダーが、プレーンテキスト以外のものが含まれている場合、ラベルを正しく発表するわけではありません。また、誰かがそのラベルをクリックして入力に焦点を合わせたいが、そのラベルにリンクが含まれている場合、誤ってリンクをクリックする場合があります。

ログイン後にコピー

現実の例

私はいつも、実際の例が私が何かを適切に理解するのに役立つことを見つけます。 Webを検索して、人気のあるコンポーネントライブラリとWebサイトからラベルと入力の例を見つけました。以下では、より良いペアリングを確保するために、要素をどのように改善できるかを説明します。

コンポーネントライブラリ：素材

Materialuiは、Googleの設計システムに基づいたReactコンポーネントライブラリです。これには、多くのデザイナーや開発者にとって人気のある人気のあるレーベルパターンを持つテキスト入力コンポーネントが含まれています。

入力をクリックすると、スムーズに感じられ、見栄えがします。しかし、それが問題です。その品質はほとんどが肌の深さです。

この投稿を書いている時点で、私がこのコンポーネントで見つけたいくつかの問題は次のとおりです。

入力を集中するためのインタラクティブな領域を増やすために、入力の外側にラベルを入力するオプションはありません。
以前に見たようなヒントを追加するオプションがあります。残念ながら、ヒントは、一致するIDとAria-DescribedByを介したものではなく、近接性による入力にのみ関連付けられています。これは、すべてのスクリーンリーダーがヘルパーメッセージを入力に関連付けることができるわけではないことを意味します。
ラベルはDOMの入力の背後にあり、視覚的な順序が正しくありません。
空の入力は、少なくともアクティブでない限り、すでに記入されているように見えます。
ラベルは、入力がクリックされるとスライドし、動きを減らすことを好む人には不適切になります。

Adam Silverは、フロートラベルが問題になっており、素材のテキスト入力設計の詳細な批判に巻き込まれる理由も説明しています。