ラベルと説明

ラベルと説明はユーザーがフォームをコントロールする際に重要

ラベル

• ラベルはユーザーが認識できる文言

  ラベルによってフォームの目的がわkるはユーザーが認識できる文言

説明

• フォームの入力規則やフォームのラベルで説明できない点を説明する

悪い事例一覧

事例1. プレスホルダーでラベルを表している

<input style="width:300px" type="text" placeholder="ここにテキストを入力してください"/>
>
    

問題点

• プレスホルダーの色薄く視認しずらい

  原因: プレスホルダーは色が薄い色が使われる

• プレスホルダーとフォームコントローラーの値の区別がつかない

  薄い色を濃い色に変えて上の問題を解決しようとした時に入力値と勘違いされてしまう

• フォームコントローラーに値を入力したときにプレスホルダーの値が見えなくなってしまう

  入力するべき値がわからなくなる

事例2. 説明がフォームの後に配置されている

<div>
    <label for="userform">
    ユーザ名</label>
    <br/>
    <input type="text" id="username"/>
    <br/>
    <span id="description">
    (半角英数字で入力)</span>
</div>
>
    

問題点

• 説明の存在に気づかず入力し始める

事例3. フォームコントロールにラベルと説明が関連付けられてない

スクリーンリーダーはフォームコントロールに関連付けられた情報を読み上げる

事例4. 入力必須の説明をしていない

問題点

• 米印の意味を理解していないユーザーがいる

  原因: プレスホルダーは色が薄い色が使われる

改善事例一覧

事例1. フォームコントローラーにラベルと説明を関連付ける

• label要素を使ってフォームコントロールにラベルと説明を関連づける

  そうすることでNameプロパティとして認識してくれて両方読み上げてくれる

• WAI-AREAを使って関連づける

  ラベルと説明の両方を読み上げてくれる

  <form>
      <span id="username-label">
      ユーザ名</span>
      <span id="username-description">
      (半角英数字で入力)</span>
      <br/>
      <input type="text" style="width:300px" id="username" aria-labelledby="username-label" aria-describedby="username-description" required=""/>
  </form>
  >
      

  ユーザ名(半角英数字で入力)
  

注意点

フォームコントロールにさまざまな要素を使ってlabel要素が使えなくなっている時だけ使う

事例2. フォームコントロールに不可視のラベルをつける

• 直感的にわかりやすいラベルには不可視のタイトルをつける

  事例： 検索

• WAI-AREAを使って関連づける

  ラベルと説明の両方を読み上げてくれる

  <form>
      <span id="username-label">
      ユーザ名</span>
      <span id="username-description">
      (半角英数字で入力)</span>
      <br/>
      <input type="text" style="width:300px" id="username" aria-labelledby="username-label" aria-describedby="username-description" required=""/>
  </form>
  >
      

  ユーザ名(半角英数字で入力)
  

事例3.グループにラベルと説明を関連づける

グループ全体をfiedlset要素で囲み、グループのラベルと説明をlegend要素に含める

注意点

読み取られなくなってしまうので、div要素で囲まない