ウェブ・アクセシビリティ・クックブック

第9章. フォームを構築する

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

フォーム はウェブの不可欠な要素である。リンクの他に、Webサイトにインタラクティブ性を提供する最も重要なツールだ。フォームによって、ユーザはニュースレターに登録したり、銀行口座にログインしたり、ホテルの部屋を予約したり、ソーシャルメディアにアイデアを投稿したりすることができる。

フォーム・デザインは複雑であり、複雑さにはミスや誤った判断の可能性がつきまとう。フォームデザインの「やるべきこと」と「やってはいけないこと」については、一冊の本が書けるほどだ。この章では、ユーザが直面する最も一般的で重大な問題に焦点を当て、表面を掻いたに過ぎない。

9.1 フォームを作成する

問題

フォームがうまくデザインされていないと、ユーザは申込書や問い合わせフォームへの記入、オンラインストアでの注文といった重要なタスクをこなすのに苦労するかもしれない。フォームデザインの悪い選択は、全てのユーザ、特にあまり知識のないユーザや、認知障害、運動障害、弱視のユーザに影響を与える。

解決策

フォームを作成するときは、ある基本原則に従うこと。

• 可能であれば、ネイティブのフォーム要素を使う。

• 意図した目的に適切なフォーム要素を使用する。

• フォームはできるだけ短く、わかりやすくする。

• すべてのフィールドにラベルを貼り、説明する。

• フォームの変更をユーザに知らせる。

図9-1と例9-1は、HTMLでシンプルだが機能豊富なフォームを作成するために、さまざまな要素と属性を使用することを示している。

図9-1. ラベルの付いたform フィールドとfieldsets

例9-1. ラベル付きform フィールドとfieldsets

<form>
  <div>
    <label for="username">Username</label>
    <input type="text" id="username" autocomplete="username">
  </div>

  <div>
    <label for="email">E-Mail</label>
    <input type="email" id="email" autocomplete="email">
  </div>

  <fieldset>
    <legend>T-Shirt size</legend>

    <div>
      <input type="radio" id="s" name="shirt">
      <label for="s">Small</label>
    </div>

    <div>
      <input type="radio" id="m" name="shirt">
      <label for="m">Medium</label>
    </div>

    <div>
      <input type="radio" id="l" name="shirt">
      <label for="l">Large</label>
    </div>
  </fieldset>

  <button>
    Sign up
  </button>
</form>

ディスカッション

通常、ユーザについて仮定するのは間違っているが、私が仮定してもいいと思うのは、ユーザは一般的にフォームに記入することに興奮しないということだ。オフラインであろうとオンラインであろうと関係なく、フォームへの入力は楽しいものではない。だから、フォームを作成するときは、複雑さを避け、わかりやすくすることで、できるだけ快適な体験を提供しよう。 ...