WCAG 2.2を反映する

[tsmd]

WCAG 2.2が勧告になりました。
内容をLIFULLアクセシビリティガイドラインにも反映したいと思っています。

反映案

• 実装 - フォーカスインジケーターは、スティッキーヘッダー・フッターがある場合にscroll paddingを設定することを求める【2.4.11】

• デザイン - フォーカスインジケーターは、コントラストに加えて2pxの太さが必要なことを求める【2.4.13】

• 同じくデザイン - フォーカスインジケーターは、背景色によるフォーカスインジケーターの場合のチェック項目と例示を追加する【2.4.13】

• デザイン - シンプルなポインター操作は、長押しやフリックは許容する。また、overflow領域のスクロールについても許容する【2.5.7】

• デザイン - ユーザー認証は、パスワードマネージャーの動作やコピペを妨げる設計にしないことを求める。CAPTCHAにも言及する 関連: デザインの感想 #17 【3.3.8】

• 新ガイドライン？：ログインフォームは、autocomplete属性を適切に設定することを求める。入力目的の特定にマージしてもいいかもしれない【3.3.8】

• 2.4.12: AAAなので特別に言及しない

• 3.2.6: 現状、問題は起きていなさそうなので言及しない

• 3.3.7: 現状、問題は起きていなさそうなので言及しない

---

要約

2.4.11 Focus Not Obscured (Minimum) (AA)

キーボードフォーカスを受け取ってる要素にほかの要素が覆いかぶさることのないようにしようね。スクロールについてくるヘッダー・フッターがあったらscroll paddingも併せて設定しようね。Cookieの同意ダイアログはモーダルダイアログとして実装しようね。

2.4.12 Focus Not Obscured (Enhanced) (AAA)

2.4.11の基準の厳しい版だよ。2.4.11 は覆われてる部分が少しあってもOKだけど、AAAを満たすには少しも覆われてはいけないよ。

2.4.13 Focus Appearance (AAA)

フォーカスインジケーターは大きさとコントラストを確保してハッキリ見えるようにしようね。具体体にはボーダーの場合太さ2px、コントラストは3:1が必要だよ。ブラウザにお任せしてれば特に考えなくてもいいよ。

2.5.7 Dragging Movements (AA)

ドラッグ操作の機能は、同じ機能をクリック、ダブルクリック、長押し、ジェスチャーだけで実現できる必要があるよ。ジェスチャーは、フリック操作はOKだけどそれ以上に複雑なジェスチャはNGだよ。

2.5.8 Target Size (Minimum) (AA)

クリックやタップされる要素は縦横それぞれ最低24pxのサイズが必要だよ。 もし要素自体に24pxのサイズがなくても、隣接するボタンやリンクとのクリアランスが十分にあればいいよ。

3.2.6 Consistent Help (A)

問合せやチャットサポート、FAQへのリンクは、ページによらず同じ場所に書かれている必要があるよ。

3.3.7 Redundant Entry (A)

ユーザーが入力した内容と同じ内容の入力を再度求める場合、ユーザーの負荷軽減のために自動入力や選択肢としての提示をする必要があるよ。たとえば配送先住所を選択式にしたり、検索結果の入力フィールドにあらかじめ検索語句を入れておくとかだよ。

3.3.8 Accessible Authentication (Minimum) (AA)

認証プロセス（ログイン）において、計算問題とかパズルを解いたりするステップを必須にしてはいけないよ。パスワード認証でも、パスワードマネージャーの動作やコピペを妨げるような実装はしてはいけないよ。物体認識みたいなやつはOKだよ。生体認証がおすすめだよ。

3.3.9 Accessible Authentication (Enhanced) (AAA)

3.3.8の発展版だよ。3.3.8にくわえて、物体認識でもNGだよ。