ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全12回コースの第4回) 前半で WCAG 2.0 達成基準 (レベルAA) を学び、後半で「インクルーシブなペルソナ拡張」シートを用いた UI 評価ワークショップを行なっています。 インクルーシブなペルソナ拡張 : https://github.com/caztcha/Inclusive-Persona-Extension

1. ウェブディレクターのための
Web A11Y 勉強会
Season 2
#04 (2018-07-19)

2. 自己紹介
@caztcha
ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA)
HCD-Net 認定 人間中心設計専門家
ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳ワーキンググループ
https://website-usability.info

3. 今日のメニュー
• WCAG 2.0 (Level AA) を読もう
• 2.4.6 見出し及びラベル
• 2.4.7 フォーカスの可視化
• UI ケーススタディ

4. WCAG 2.0 (Level AA) を読もう

5. WCAG (Web Content Accessibility
Guidelines) の基本構成
原則 (4)
ガイドライン (12)
達成基準 (61)
1. 知覚可能 (Perceivable)
2. 操作可能 (Operable)
3. 理解可能 (Understandable)
4. 堅牢 (Robust)
3つのレベルに分かれている
• A (シングルエー)
• AA (ダブルエー)
• AAA (トリプルエー)
おさらい

6. 原則 2. 操作可能 (Operable)
ユーザインタフェース コンポーネント及びナビゲーションは操作
可能でなければならない。
おさらい

7. ガイドライン 2.4 ナビゲーション可能
利用者がナビゲートしたり、コンテンツを探し出したり、現在位
置を確認したりすることを手助けする手段を提供すること。
おさらい

8. 達成基準 2.4.6
見出し及びラベル
見出し及びラベルは、主題又は目的を説明している。(レベル AA)
達成基準 2.4.6 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html

9. [用語] 達成基準 2.4.6 見出し及びラベル
ラベル
ウェブコンテンツ内の UI コンポーネントを識別するためにユーザーに提示されている、
自然言語による情報。

10. [まとめ] 達成基準 2.4.6 見出し及びラベル
コンテンツ本文において、内容がわかる見出しを付けましょう。
UI コンポーネントにおいて、内容や目的がわかるラベルを付けましょう。
ユーザーの認知負荷、記憶負荷を下げることが期待できます。
特に、認知/学習障害を持つユーザー、視野の制約で一度に取得できる情報量が限られるロー
ビジョンのユーザー、操作ミスを起こすと「行ったり来たり」の操作が面倒な運動障害を
持つユーザー、にとって大きなメリットがあります。

11. 達成基準 2.4.7
フォーカスの可視化
キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスイ
ンジケータが見える操作モードがある。(レベル AA)
達成基準 2.4.7 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

12. [用語 ] 達成基準 2.4.7 フォーカスの可視化
(特にありません )

13. [まとめ] 達成基準 2.4.7 フォーカスの可視化
UI コンポーネントがキーボード操作によるフォーカスを受けとったときは、CSS によ
って表示を視覚的に変更させましょう。
デザイン上の制約から上記が難しい場合は、少なくとも、ユーザーエージェント (ブラ
ウザなど) が標準で提供する視覚的な効果 (フォーカスリング) を無効にしないように
しましょう。
キーボード操作に依存するユーザーは、画面上を直接ポインティングできないので、
フォーカス位置が視覚的にわからないと、どこが操作対象なのか見失ってしまいます。

14. UI ケーススタディ

15. お配りした「ペルソナ拡張シート」を使って、みんなでウェブページの UI を評価してみましょう。

16. 1. 各自、それぞれ1枚、お好きな「ペルソナシート」を選びます。
2. 選んだシートの観点に立って、対象ページを使ってみましょう。
3. ひとことずつ、「気づき」を発表してください。
• 批判 (●●ができていないからアクセシビリティ的に不備) ではなく。
• こうすれば、こういう利用状況を持つユーザーの体験が向上するのでは？と
いう姿勢で。
• 具体的な改善方法がわからなくても「なんとなくここが気になる」でも OK
です。

17. ツール紹介：WAVE
アクセシビリティ検証ツールです。見出しレベルや画像の代替テキストなど、目に見えない
要素 (視覚障害者にとって大切な要素) も確認できます。https://wave.webaim.org/

18. ツール紹介：NoCoffee Vision Simulator
ロービジョン (弱視) や色覚特性に伴う「見えにくさ」を様々なパラメーターでシミュレー
ションできる Chrome 拡張機能です。 https://chrome.google.com/webstore/detail/nocoffee/jjeeggmbnhckmgdhmgdckeigabjfbddl

19. 文字色と背景色のコントラスト比を検証できます。https://www.paciellogroup.com/resources/contrastanalyser/
ツール紹介：Colour Contrast Analyser

20. 敢えてマウスを使わず、キーボードだけで操作してみると、視覚障害や運動障害を持った
ユーザーのウェブ利用時の障壁を感じることができます。
ツール紹介：お使いの PC のキーボード

21. 次回予告

22. • WCAG 2.0 (Level AA) を読もう
• 3.1.2 一部分の言語
• 3.2.3 一貫したナビゲーション
• 3.2.4 一貫した識別性
• UI ケーススタディ

23. To be continued…