AdvancedGFormsで行っているアクセシビリティ対応について紹介します。
AdvancedGFormsでは世界規格であるW3Cのwebアクセシビリティと日本規格であるJIS X 8341-3のwebアクセシビリティに従ってフォームのアクセシビリティ要件を満たすよう、セマンティックコーディングを行っております。
タブ遷移自体やフォーカススタイルを無効にしない
マウスを使用する事ができない状態の人や普段からキーボードでほとんどの操作を行っている人などはタブを使用して入力フィールド間を移動したり、ボタンやリンクをエンターキーで操作したりします。
通常inputタグやaタグ、buttonタグにはタブ移動時、フォーカスが当たり、フォーカスがどのアイテムにあたっているのか、現在地を示すために太めのボーダーが表示されます。
webサイトのデザインによっては、このタブ遷移やフォーカス時のスタイルがカッコ悪いからと言って無効する事を見かけますが、そのようなカスタマイズはアクセシビリティの観点からみるとよくないですので（ユーザーの操作を妨げる）AdvancedGFormsでは行っておりません。
ラベルの紐づけ
視覚的に判断すれば、入力エリアの近くにラベルがあればその入力エリアがどんな項目なのか判断する事が可能です。
ですが、支援ツールを使用している方やクローリングボットにはどのラベルとどの入力エリアが紐づいているのかが判断できません。
ですので入力エリアに対してラベルタグを使用し、この2つを連携さることが必要です。
<label for="name">お名前</label>
<input
type="text"
id="name"
/>このように、labelタグにはforを、inputタグにはidをセットし、同じ値を入れる事でラベルと入力エリアを紐づけることが可能です。
もしくは以下のようにする事で紐づける事も可能です。
<label>
お名前
<input
type="text"
/>
</label>この場合、forとidの設定は必要ありません。
とわいえ、デザイン上、labelの中に必ずinputを入れるというHTML構造にする事は難しい事が多いでしょう。
ですので、AdvancedGFormsでは、1番目に紹介したforとidを使用した紐づけを行っております。
説明の紐づけ
入力フィールドに何を入力すればいいのか、など、補足説明を表示する事は多くあります。
こちらもラベルの紐づけと同じくどの入力エリアにたいしての補足説明なのかを紐づける必要があります。
aria-describedby属性を使用し、以下のように紐づけます。
<input
type="text"
aria-describedby="nameDesc"
/>
<span id="nameDesc">姓と名の間は半角開けてください</span>必須要素
入力エリアが必項だった場合、*印や「必項」というタグをラベルの横に表示する事が一般的ですが、こちらも視覚的に判断するユーザーへのアプローチとなりますので、支援ツールには認識されません。
ですので、以下のようにrequired属性を付ける事でこの入力エリアが必項という頃を伝える事ができます。
<input
type="text"
required
/>さらに、WAI-ARIAにもaria-required属性というものが存在し、W3Cのwebアクセシビリティ項目にもaria-required="true"を付けるとよいと記載されいますので、こちらも追加します。
<input
type="text"
required
aria-required="true"
/>ラジオボタン・チェックボックスのグループ化
ラジオボタンやチェックボックスなどの複数の選択肢が存在する場合、グループ化し、選択肢のまとまりをそれぞれ明確にする事で支援ツールを使用している方やクローリングボットへ情報の関連性やまとまりを適切に伝えることが可能となります。
グループ化の方法は2つあります。
まず1つ目は以下のようにfieldsetを使用する方法です。
<fieldset>
<div>すきな食べ物はなんですか？</div>
<div>
<input type="radio">
<label>いちご</label>
</div>
<div>
<input type="radio">
<label>メロン</label>
</div>
</fieldset>
もう1つはrole属性を使用する方法です。
<div role="group">
<div>すきな食べ物はなんですか？</div>
<div>
<input type="radio">
<label>いちご</label>
</div>
<div>
<input type="radio">
<label>メロン</label>
</div>
</div>AdvancedGFormsでは、2つ目のrole属性を使用してグループ化をしております。
グループ化したinputに対してそのグループのラベルと、そのグループの説明を紐づける場合は以下のようにaria-describedby属性とaria-labelledby属性を使用して紐づけを行います。
<div>
<div id="group-label">すきな食べ物はなんですか？</div>
<div id="describedby">すきな食べ物を必ず1つ選択してください。</div>
<div
aria-describedby="describedby"
aria-labelledby="group-label"
role="group"
>
</div>
<div>
<input type="radio" id="input-item-1">
<label for="input-item-1">いちご</label>
</div>
<div>
<input type="radio" id="input-item-2">
<label for="input-item-2">メロン</label>
</div>
</div>エラー表示
ユーザーが入力フィールドへ値を入力した後にバリデーションチェックを行いますが、その際、入力値にエラーがあった場合はユーザーへフィードバックを行います。
通常は視覚的にフィールドを赤色表示にしたり、エラーメッセージを表示したりますが、支援ツールにはそのメッセージは伝わりません。
エラーということをツールなどに伝えるにはaria-invalid属性を使用します。
<input stype="text" aria-invalid="true"> // trueの場合はこのフィールドがエラーであることを指します。
<input stype="text" aria-invalid="fasle"> // falseの場合はこのフィールドにエラーはない事を指します。動的に変化するエラーメッセージを通知する
バリデーションチェック後、エラーがあった場合ユーザーにエラー内容を通知する必要がありますが、メッセージ内容の変更を支援ツールなどに通知する必要があります。
組み込みバリデーションチェックを使用する場合は通知設定は必要ありませんが、独自でバリデーションを実装している場合には通知設定が必要です。
通知するにはrole="alert"もしくはaria-live="assertive"をセットします。
この属性の設定は値が変更される前に設定してある必要がりますが、変更の前であればJavaScriptから動的に追加しても問題ありません。
<input type="text">
<p role="alert">ここにエラーメッセージが動的に追加されます</p>[WCAG 2.0]ARIA role=alert or aria-live=”assertive”
role="alert"とaria-live="assertive"の2つの設定方法がありますが、2つを同時に使用するとiOSで重複して読み上げられてしまうので2つ同時の使用はよくありません。
AdvancedGFormsではrole="alert"を使用しています。
