WAI-ARIAとHTML5でinput要素におけるrequiredの定義の仕方(WCAG 2.0も考慮して)【WAI-ARIA】【HTML5】

お問い合わせフォーム等に入力が必須かどうかを指定するために、HTML5ではrequiredコンテンツ属性、WAI-ARIAではaria-requiredプロパティがあります。

これらの定義の仕方について調べたので、WCAG 2.0にも準拠した形での定義方法です。

必須項目の示し方

いくらWAI-ARIAとHTML5には必須項目かどうかを指定するためのプロパティや属性があるからといって、手がかりを示さないのは恐らくユーザビリティ的によくないと思います。

そのため、必須ならば『必須』とテキストで手がかりを示すべきだと思いますが、注意しなければならないのは、その手がかりが下記のように『色のみ』で提供してはなりません。

これはWCAG 2.0で達成基準として示されています。

1.4.1 色の使用: 情報を伝える、何が起こるか又は何が起きたかを示す、ユーザの反応を促す、もしくは視覚的な要素を区別する唯一の視覚的な手段として、色だけを使用しない。 (レベルA)

これは色弱のユーザーが利用する場合に、色が知覚できない場合があるからです。そのため、下記のようにテキストでの手がかりを用意しなければなりません。

以下のWCAG 2.0実装方法集が参考になります。

必須のための*(アスタリスク)の使用

よく必須のための*(アスタリスク)を用いている場合がありますが、WCAG 2.0実装方法集には、下記のように示されているように、スクリーンリーダーによっては読み上げられなかったりと、使わないほうが良いと言えます。

注記:アスタリスクは、スクリーンリーダー(やその読上げモード)によっては読上げられないことがあり、 またデフォルトの文字サイズよりも小さいサイズで表示されるため、弱視の利用者にとっては見づらいかもしれない。コンテンツ制作者としては、 アスタリスクが用いられていることをテキストで示すとともに、表示されるアスタリスクの文字サイズを大きくすることが重要である。【訳注:日本語の場合は、アスタリスクよりも文字で「必須」と示したほうが、音声読み上げと見た目の両方でより確実である。】

手がかりとしての『必須』のロケーション

また、スクリーンリーダー等を使っているユーザーのために、手がかりとしての『必須』のロケーションも気にしなければなりません。

上記の場合だと、必須がinput要素の後ろにあるために、ユーザーはその項目が必須であることが入力が終わってから気づくことになりますので、入力の前からその項目が必須であるということを示すべきであると考えられます。

それと同様に記入例もinput要素の前に示すほうがよいでしょう。理由は、同じです。

<label for="place">住所(必須):(例:兵庫県神戸市北区なんとか20-14)</label>
<input type="text" name="place" id="place" size="50" value="" />

CSSで『必須』の手がかりはどうか?

『必須』の手がかりを背景画像として示す場合があったりするかと思います。僕は、したことがないのですが、こういうケースもスクリーンリーダー等を使っているユーザーにとって良くないと思いますので、オススメはしません。

<label for="place" class="required">住所(必須):</label>
<input type="text" name="place" id="place" size="50" value="" />
.required {
  background: url(required.png) no-repeat 0 0;
  padding-left:15px;
}

requiredコンテンツ属性

これまでは必須項目が抜けている場合などには、JavScriptやPHPで制御する必要がありましたが、HTML5からはrequiredコンテンツ属性が追加されたことによってHTMLレベルで制御を行うことができるようになります。

<label for="place">住所(必須):(例:兵庫県神戸市北区なんとか20-14)</label>
<input type="text" name="place" id="place" size="50" value="" required />

requiredコンテンツ属性はHTML5 & CSS3 Supportによると、Google Chrome 9と10、Opera10と11、Safari5がサポートしているようです。Firefox3.6と4、IE9ではサポートされていないようです。

aria-requiredプロパティ

requiredコンテンツ属性は非常に便利なのですが、スクリーンリーダーユーザーのために、WAI-ARIAのaria-requiredプロパティを用いることにより、よりアクセシブルになります。

フォームを送信する前に、その要素へのユーザー入力が必須であることを示す。例えば、ユーザーが住所のフィールドを記入しなければならないのであれば、aria-requiredをtrueに設定すべきである。

<label for="place">住所(必須):(例:兵庫県神戸市北区なんとか20-14)</label>
<input type="text" name="place" id="place" size="50" value="" required aria-required="true">

結論

これまで示した通り、requiredコンテンツ属性とaria-requiredプロパティは今後おおいに使うことになると思います。

また今回はWCAG 2.0も意識した形で記述しました。手がかりをinput要素の前に置く、これはIAの考え方でもあるかと思います。しかし、デザインの要件においてはそうはいかない場合もあったりします。なので、なるべく手がかりはinput要素の前に置くようにしたほうがユーザーフレンドリーであることは覚えておく必要はあるかと思います。

関連記事