CSUN ウェビナー「Unpacking Commonly Misunderstood WCAG 2.1 Success Criteria」
毎年3月に米国で開催されている、世界最大級のアクセシビリティのカンファレンス「CSUN Assistive Technology Conference」ですが、今年は新型コロナウイルス感染症 (COVID-19) の拡がりの影響で、いくつかのセッションがウェビナー方式になりました。
このうち、アクセシビリティのコンサルティング企業 LevelAccess によるセッション「Unpacking Commonly Misunderstood WCAG 2.1 Success Criteria (誤解されがちな WCAG 2.1 達成基準を紐解く)」に参加したので、以下、概要のメモを共有します。
セッションの動画、スライド、トランスクリプト (書き起こし) は参加者のみの限定公開なのでここでは共有できませんが、オンデマンドでセッションを見ることができるので、ご興味ある方は申し込んでみるとよいと思います。達成基準 1.4.11 Non Text Contrast (非テキストのコントラスト)
- UI 部品やその状態を識別するのに、一定以上のコントラストが必要。ただあくまでも、UI 部品 (またはその状態) と、その隣接する部分とのコントラスト比のみが本達成基準の要件である。
- UI 部品を囲むボーダーが薄くても、(適切なコントラストを持ったテキストの存在などによって) 識別が可能であれば、本達成基準には抵触しない。
- UI 部品を囲むボーダーが一部しかない (たとえば一辺しかない) 場合でも、それによって十分識別ができるのであれば、本達成基準には抵触しない。
- ホバーおよびフォーカス状態を示す配色 (隣接するエリアとのコントラスト) も、本達成基準の要件に含まれる。ただし、ホバー (フォーカス) 時の色と非ホバー (フォーカス) 時の色を比較したコントラスト比は、本達成基準の要件に含まれない (†)。
達成基準 2.5.1 Pointer Gestures (ポインタのジェスチャ)
- マルチポイントのジェスチャには、ピンチアウト (ズーム) などが該当する。
- 軌跡ベースのジェスチャには、スワイプなどが該当する。
- これらのジェスチャに対して、シングルポインタによる代替操作手段が求められる。たとえばスライダーの切り替えを、ボタンのタップでも可能にするなど。
- 一本指によるタップ、ダブルタップ、長押し、はシングルポインタとして扱われる (マルチポイントのジェスチャではない)。
- ドラッグ＆ドロップは、本達成基準の対象には含まれない (軌跡ベースのジェスチャではない)。特定の軌跡が求められるわけではなく、あくまでも起点と終点があるだけなので (†)。
達成基準 2.5.2 Pointer Pointer Cancellation (ポインタのキャンセル)
- 予期せぬ動作を防止するため、あくまでもアップイベントによって動作が実行されることが原則である。
- 「中止又は元に戻すことができる (Abort or Undo)」の規定が誤って理解されるケースがある (実行結果を事後にアンドゥできる仕組みがあればよい、という誤解)。しかしこの規定のキーフレーズは、あくまでも「機能の完了にはアップイベントを使用し ... (Completion of the function is on the up-event, and ...)」である。
達成基準 1.3.5 Identify Input Purpose (入力目的の特定)
- この達成基準の目的は、フォームの入力フィールドの意味 (何の情報を入力するか) の識別を支援技術を通じて可能にすることで、ユーザーが認知しやすいシンボルなどを併用して、入力フィールドの意味をよりわかりやすく伝達できるようにすることである。
- 現時点でできる具体的な方策は、HTML の autocomplete 属性を使うことである。
- autocompete の属性値は、WCAG の「7. Input Purposes for User Interface Components (日本語訳)」で定義されている。
- autocomplete 属性名に対応させる形で、フォームのラベルに視覚的なアイコンも併せて表示する、という具合にして、ユーザーの認知をサポートすることができる。
達成基準 1.4.10 Reflow (リフロー)
- 達成基準の文面がわかりにくいが、要は、ロービジョンのユーザーが拡大表示しても、横スクロールが出ないようにすること。
- まずは 1,280 CSS ピクセル幅でコンテンツを表示し、そこから400％に拡大するとよい。
- ロービジョン向けの達成基準なので、この状態で併せて、達成基準 1.4.4. Resize Text (テキストのサイズ変更)、達成基準 1.4.12 Text Spacing (テキストの間隔) についてもテストするのがおすすめ。
- レスポンシブデザインによって、ブラウザ表示幅に応じて機能の提示方法が変わる箇所もあるので、こうした変更箇所も忘れずに検証する。(たとえば、ヘッダーやフッターが PC では展開表示されているがスマートフォンでは折りたたまれている、PC ではタブが横並びになっているところがスマートフォンでは縦積みのアコーディオンになっている、など。)