アクセシビリティから考えるフォームの実装方法
あなたは、アクセシビリティに配慮したフォームを作りたいけど、どうしたらいいのかわからない、と思ってはいませんか？
この記事では、アクセシビリティを向上できそうなフォームの作り方のアイデアを、デザインとコーディングに分けてお送りします。
目次
デザイン編
デザインにおいて、気をつけるといいポイントは以下です。
- プレースホルダーのみで項目名を表さない
- 必須、任意などの説明を記号や色だけで表さず、「必須」などと明記する
それぞれ解説します。
プレースホルダーのみで項目名を表さない
まず一つ目のポイントは、プレースホルダーを項目名代わりに使わないことです。というのも、ユーザーが何か文字を入力するとプレースホルダーの文字は消えてしまい、どこの入力欄がなんの項目なのか、わからなくなるためです。項目名を確認するには一度入力した値を消す必要があり、不便です。
対応としては、プレースホルダーとは別に項目を明示すると良いでしょう。
必須、任意などの説明を記号や色だけで表さず、「必須」などと明記する
例えば、「*」という記号だけで「入力必須」を表すケースが見られますが、これは避けた方が良いでしょう。理由は、記号や色だけでは意味が正確に伝わらない可能性があるためです。
「必須」など文字で情報を明示するのがおすすめです。
コーディング編
次に、コーディングの際に注意すべきポイントをご紹介します。
- label要素と入力項目を紐づける
- チェックボックスなどに対して「display:none;」を使わない
- フォーカスが当たっているときに要素の装飾を変える
- 二つ以上の項目を一つにまとめたいときは、fieldset要素とlegend要素などを使う
それぞれ解説します。
label要素と入力項目を紐づける
以下二つの方法のいずれかで、label要素と入力欄を結びつけるようにします。
・入力欄をlabel要素で囲む
・label要素のfor属性に、入力欄のid属性を入れる
コードで表すと、以下のような形です。
“`HTML
<!– 入力欄をlabel要素で囲む –>
<label>
氏名<input type=”text” name=”your-name” >
</label>
<!– label要素のfor属性に、入力欄のid属性を入れる –>
<label for=”your-name”>氏名</label>
<input type=”text” name=”your-name” id=”your-name” />
“`
こういった実装には、以下二つのメリットがあります。
- 項目名をクリックすると、対応する入力欄にフォーカスがあたる。
- 音声読み上げツールがラベルと入力欄間の紐付けを認識する
2点目に関しては、例えばmacOSのVoiceOverだと入力欄にフォーカスした時に「氏名、テキストを編集」などと読み上げられ、今どの入力欄にフォーカスが当たっているのか、がわかりやすくなります。
チェックボックスなどに対して、「display:none;」を使わない
特にオリジナルなデザインのチェックボックスやラジオボタンを実装する際、チェックボックスやラジオボタンそのものは「display:none」で非表示にしておいて、それらの擬似要素でオリジナルデザインのチェックボックスなどを実装する、という手法があります。しかし、このような場面で「display:none;」を使うべきではありません。なぜなら、「display:none;」が当てられた要素はtabキーでフォーカスを当てることができなくなるためです。
対策としては、「display:none」の代わりに「appearance:none;」を使うと良いでしょう。 この実装方法ならば、キーボードで操作できるようにした上で、チェックボックスをオリジナルのデザインにすることができます。
フォーカスが当たっているときに要素を変化させる
フォーカスが当たっている時に要素を変化させることで、どこにフォーカスが当たっているのか、がわかりやすくなります。
例えばアウトラインをつけるなどして、フォーカスが当たっていることをわかりやすくするのがよいでしょう。
二つ以上の項目を一つのグループにまとめたいときは、fieldset要素とlegend要素などを使う
フォームにおいて、二つ以上の入力欄をまとめて一つのグループにしたいケースがあります。例えば以下です。
- ラジオボタン
- チェックボックス
- 姓、名でそれぞれ入力欄を作成してまとめて「氏名」というグループにする
こういった時、label要素だけでは不十分です。なぜなら以下のように、すでにそれぞれの入力欄にlabel要素が割り当てられているためです。
“`HTML
<label>
<input type=”radio” name=”gender” checked>男性
</label>
<label>
<input type=”radio” name=”gender”>女性
</label>
<label>
<input type=”radio” name=”gender”>その他
</label>
“`
そこで、以下2つの方法のうちいずれかで対応します。
- fieldset要素とlegend要素を使う
- role属性にgroup（ラジオボタンの場合はradiogroup）を指定し、aria-labelledby属性で項目と関連づける
それぞれ解説します。
fieldset要素とlegend要素を使う
fieldset要素でラベル含む選択肢全体を囲み、legend要素でグループに対する説明を加えます。
コードにすると、以下のような形です。
“`HTML
<fieldset>
<legend>性別</legend>
<label>
<input type=”radio” name=”gender”>男性
</label>
<label>
<input type=”radio” name=”gender”>女性
</label>
<label>
<input type=”radio” name=”gender”>その他
</label>
</fieldset>
“`
このようにすると、例えばmacOSのVoiceOverでラジオボタンを読み上げた場合には、「性別、グループ」などとグループ全体に対する説明が追加されます。
role属性にgroup（ラジオボタンの場合はradiogroup）を指定し、aria-labelledby属性で項目と関連づける
ラジオボタンをまとめたdiv要素などのrole属性にgroup（ラジオボタンの場合はradiogroup）を指定し、aria-labelledby属性で項目名とグループと関連づけます。
コードにまとめると、以下のような形です。
“`HTML
<div role=”radiogroup” aria-labelledby=”gender-label”>
<span id=”gender-label”>性別</span>
<label>
<input type=”radio” name=”gender” checked>男性
</label>
<label>
<input type=”radio” name=”gender”>女性
</label>
<label>
<input type=”radio” name=”gender”>その他
</label>
</div>
“`
まず、複数の入力欄をまとめたHTML要素のrole属性にgroupを、ラジオボタンをまとめる場合はradiogroupを指定します。
次に、グループ全体のラベルとなる要素を作成（ここでは「性別」）し、適当なid属性（ここでは「gender-label」）を指定します。
最後に、先ほどrole= “radiogroup”を指定した要素にaria-labelledby属性を追加し、その値に先ほどのラベルのid属性を指定します。
このようにすると、例えばmacOSのVoiceOverでラジオボタンを読み上げた場合には、「性別、ラジオボタン グループ」などとグループ全体に対する説明が追加されます。
aria-labelledby属性とはWAI-ARIAの一つで、指定した値をid属性として持っている要素を、ラベルとして関連づけることができます。label要素におけるfor属性は「〜に対してラベルをつける」という能動的な働きを持っていますが、aria-labelledby属性は逆に「〜によってラベルをつけられる」という受動的な働きをするわけです。
まとめ
この記事では、アクセシビリティに配慮したフォームの作り方の一例を紹介しました。デザインとコードを工夫することで、誰にとっても使いやすいフォームを目指しましょう。
