アクセス可能な形

ログインフォーム

<form>
  <h2>Login</h2>
  <label for="username">Username</label>
  <input id="username" type="text" placeholder="spacemanspiff8"    title="enter your username here">
  <label for="password">Password</label>
  <input id="password" type="password" placeholder="******">
  <button type="submit">Login</button>
</form>

これはいくつかのあなたのためにレビューすることがありますが、それは良い機会を我々はすべての日に30回-ログインフォームを使用して何かに行くことです.まず第一に、我々は、我々のユーザーにフォームの目的の堅実な考えを与えるために、トップでH 2タグを持っています.次に、各入力のラベルを持ち、それぞれの入力に対応する“id”に“for”属性を付けます.JSXユーザーの反応では、“for”の代わりに“htmlfor”を使用してください.標準のHTML要素とその属性には、多くのアクセシビリティが組み込まれています.一度ラベルを入力にリンクすると、他の年のハードワークの残りの部分を行います.
多くの開発者は、最小限のデザイン原則を犠牲にすることを恐れて、ラベルを省略したいと思います.あなたが本当にラベルの外観を嫌悪する場合は、視覚的に機能を失うことなくそれらを隠す方法を学ぶためにこの記事をチェックアウトすることができます.
最後に-私たちの提出ボタン.完全に準拠し、信頼性の高い、これらのボタンは“Submit”の“タイプ”値を取る必要があります.それは十分やさしい.

測量時間

<form>
  <h2>Tell us about you</h2>
  <fieldset>
    <legend>Preferred Drink</legend>
    <p>
      <input type="radio" name="drink" id="drink_1" value="coffee">
      <label for="drink_1">Coffee</label>
    </p>
    <p>
      <input type="radio" name="drink" id="drink_2" value="tea">
      <label for="drink_2">Tea</label>
    </p>
  </fieldset>
  <fieldset>
    <legend>Preferred Animal</legend>
    <p>
      <input type="radio" name="animal" id="animal_1" value="cats">
      <label for="animal_1">Cats</label>
    </p>
    <p>
      <input type="radio" name="animal" id="animal_2" value="dogs">
      <label for="animal_2">Dogs</label>
    </p>
    <p>
      <input type="radio" name="animal" id="animal_3" value="both">
      <label for="animal_3">I like both cats and dogs</label>
    </p>
  </fieldset>
</form>

ここでは、本当の楽しみが始まるところです.私はfieldsetタグの外観が好きです、しかし、彼らは単に彼らがどのように見えるかよりはるかに多くです.上記のコードでは、フィールドセットタグの2つのセットがあることに気付きます.フィールドセット要素は、同じ目的を共有するウィジェットのグループを作成するための理想的な方法です.伝説のタグは、入力の各グループにタイトルを与え、いくつかの支援技術も伝説のときに、各入力オプションを話す含まれます.例えば、上記の最初のfieldsetを読むとき、スクリーンリーダーは言います:第1の入力と「好ましい飲物:茶」のための「好ましい飲物:コーヒー」.
また、各ウィジェット、またはオプションに気づくかもしれませんが、pタグでラップされます.フォームに固有のHTML要素を追加すると、それらを正しく使用すると、補助テクノロジを破壊しません.上の例では、pタグはウィジェットを規則的に保ちます.それから、デフォルトCSSはそれぞれのPタグをそれ自身の行に置きます.かなり良い.
ラベルを使用して対応するウィジェットをアクティブにすることができますので、ユーザーだけでなく、入力をテキストをクリックすると、正しい選択を行うには、より多くの表面積を与えて、テキストをクリックすることができます.これは特に、モバイルデバイス上のユーザーのための視覚障害者、または誰がギヌス親指を持っている人々に便利です.
一歩戻って、覚えておいてください、アクセシビリティは包括的なデザインの一部だけです.我々は最終的な製品は、ユーザーに意味を作り、すべてのユーザーに意味を確認します.これは、ユーザーが同じスキル、能力、または知識を持っていると仮定しないように最善の練習です.

チェックリスト

入力要素に対応するラベル要素があります

送信ボタンを“送信”の“タイプ”を持っている

ラジオボタンとして使用される入力要素はfieldsetタグの内部に入れ子になっています

fieldset要素に対応するラベル要素があります

このチュートリアルでは、アクセス可能なフォームの構築を開始する必要があります.そして、より包括的なリソースをチェックアウトすることをお勧めします.
このコードにアクセスしたい場合はfeel free to grab it from my github
https://developer.mozilla.org/en-US/docs/Learn/Forms/How_to_structure_a_web_form
http://wtfforms.com/
https://www.w3.org/TR/html401/interact/forms.html