レシピを見ながら楽しく実装、フォームのアクセシビリティ！その1

UI開発者 宇賀

先日（4月20日）、2016年版のWCAG 2.0達成方法集の日本語訳が公開されました。

WCAG 2.0 達成方法集

日本語訳がでたことで、より一層日本語Webページのアクセシビリティ向上に期待が高まりますが、「実際どこから手を付けたらいいのかわからない」ということはありませんか？

個人的なおすすめにはなりますが、わかりやすく手を付けやすい項目は「フォーム」のアクセシビリティだと感じています。日々の業務の中でも、フォームのアクセシビリティについての問い合わせが最も多いです。

そこで今回は、フォームのアクセシビリティ担保の方法を、いくつかの達成方法集（レシピ）とあわせて紹介したいと思います。

※ 簡単なアクセシビリティチェックの方法については、以前執筆した自分でできるWebページのアクセシビリティチェックをご覧ください
※ この記事に設置されている入力欄に入力された情報が当社に送信されることはありません
※ 作成したページや、本記事の実装例をVoiceOver（macOS、iOS標準搭載）などのスクリーンリーダーで実際に聴いてみると、より直感的に理解が深まります

label要素を使ってみよう

基本的なことの1つに、label要素の採用が上げられると思います。label要素は、フォーム関連要素に対してのラベル（キャプション）を表す要素ですが、これがある場合とない場合では大きく差がでます。

フォームのアクセシビリティを担保するために簡単にできる対応の1つです。

label要素を採用した場合としていない場合の実装イメージとHTMLソースを示します。

label要素を使っていない例
お名前
<span>お名前</span><br><input type="text">
label要素を使っている例
<label><span>お名前</span><br><input type="text"></label>

label要素を用いていると、「お名前」というテキストをクリックしたときにテキストフィールドにフォーカスが当たります。

また、テキストフィールドにフォーカスが当たったとき、スクリーンリーダーではラベル名がアナウンスされるため、何の入力項目なのかが適切に伝わります。

デザイン上、フォーム関連要素とラベルのテキストが離れていた場合でもlabel要素は、次のソース例のようにid属性を用いて関連付けを行うこともできます。

<label for="{{ unique id }}">ラベル名</label>

<input type="text" id="{{ unique id }}">

必ず1つの入力項目には少なくとも1つのラベルを置いてあげるようにしましょう。

これはテキストフィールドに限らず、ラジオボタンやチェックボックスにも言えます。

label要素を採用した場合としていない場合のラジオボタン、チェックボックスの実装イメージとHTMLソースを示します。

チェックボックス・ラジオボタンでlabel要素を使っていない例
選択A
選択B
選択C
いずれかを選択
いずれかを選択
いずれかを選択
<ul>
<li><input type="checkbox"><span>選択A</span></li>
<li><input type="checkbox"><span>選択B</span></li>
<li><input type="checkbox"><span>選択C</span></li>
</ul>

<ul>
<li><input type="radio"><span>いずれかを選択</span></li>
<li><input type="radio"><span>いずれかを選択</span></li>
<li><input type="radio"><span>いずれかを選択</span></li>
</ul>
チェックボックス・ラジオボタンでlabel要素を使っている例
<ul>
<li><label><input type="checkbox"><span>選択A</span></label></li>
<li><label><input type="checkbox"><span>選択B</span></label></li>
<li><label><input type="checkbox"><span>選択C</span></label></li>
</ul>

<ul>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
<li><label><input type="radio"><span>いずれかを選択</span></label></li>
</ul>

同様に、label要素を用いているとラベルテキストをクリックしても選択できる様子がわかります。

ラベルを設置した場合、必須項目であることを示すために「必須」と明記する場合がありますが、フォーム関連要素はrequired属性を用いて入力を必須にすることができます。

required属性を付与することで、ユーザーエージェントに対しても必須であることを伝えることができます。

HTMLの仕様から、form要素内の必須項目がすべて入力されているかを検証する機能が基本的にはWebブラウザに実装されているため、特殊なケースを除いて必須項目にはrequired属性を付けるようにしましょう。

逆に、required属性を付与したならば、色分けなどではなくテキストで、フォーム関連要素よりも先に登場するラベルに必須であることを含めるべきです（登場順序についてはスクリーンリーダーへの配慮）。

<label for="{{ unique id }}">ラベル名 必須</label>

<input type="text" id="{{ unique id }}" required>

label要素さえ抑えておけば、少なくともいま自身が何のフォーム関連要素を操作しているかを見失うことはなくなるでしょう。

実際に操作してみたり、スクリーンリーダーで聴いてみたりすることでユーザーエージェントの挙動が変わっていく楽しさに振れていれば、自ずとアクセシビリティ対応の大切さがわかってくる気がしませんか？

今回紹介した日本語訳を参考にしながら自身の成果物と照らし合わせて、楽しく体験的にアクセシビリティ対応をしていけると良いですね。

参考リンク：