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

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

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

3. 今日のメニュー
• WCAG 2.0 (Level AA) を読もう
• 3.1.2 一部分の言語
• 3.2.3 一貫したナビゲーション
• 3.2.4 一貫した識別性
• 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. 原則 3. 理解可能 (Understandable)
情報及びユーザインタフェースの操作は理解可能でなければならない。
おさらい

7. ガイドライン 3.1 読みやすさ
テキストのコンテンツを読みやすく理解可能にすること。
おさらい

8. 達成基準 3.1.2
一部分の言語
コンテンツの一節、又は語句それぞれの自然言語がどの言語であるか、プ
ログラムによる解釈が可能である。ただし、固有名詞、技術用語、言語が
不明な語句、及びすぐ前後にあるテキストの言語の一部になっている単語
又は語句は除く。(レベル AA)
達成基準 3.1.2 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/meaning-other-lang-id.html

9. [用語] 達成基準 3.1.2 一部分の言語
自然言語
人間がコミュニケーション (読む、書く、話す、聞く) に使う言語のこと。日本語とか英語
とか。
プログラムによる解釈が可能
ウェブコンテンツが、様々なユーザーエージェント (ブラウザやスクリーンリーダー) によっ
て処理/解釈されて、多様なモダリティ (視覚情報、聴覚情報、触覚情報、など) で情報が
提示できること。

10. [まとめ] 達成基準 3.1.2 一部分の言語
●ウェブページの中で、一部、自然言語の種類が変わる場合 (たとえば、日本語ページの
中で、一部、英語が使われている場合など) は、言語が変わっている箇所の要素に lang
属性を記述して、その部分が何語で書かれているかを明示的にしましょう。
✓複数の言語の音声合成エンジン (speech synthesizer) がインストールされている
スクリーンリーダーであれば、lang 属性値に応じて、「その言葉のネイティブスピー
カーっぽい」発音になります。

11. ガイドライン 3.2 予測可能
ウェブページの表示や挙動を予測可能にすること。
おさらい

12. 達成基準 3.2.3
一貫したナビゲーション
ウェブページ一式の中にある複数のウェブページ上で繰り返されているナビ
ゲーションのメカニズムは、繰り返されるたびに相対的に同じ順序で出現
する。ただし、利用者が変更した場合は除く。(レベル AA)
達成基準 3.2.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-consistent-locations.html

13. [用語] 達成基準 3.2.3 一貫したナビゲーション
ウェブページ一式
共通の目的を共有し、同じコンテンツ制作者、グループ、または組織により制作された
ウェブページの集合。ウェブサイトなど。
相対的に同じ順序
他の項目との相対位置が同じであること。(当初の順序に対して、別の項目が挿入または
削除されていたとしても、項目は「相対的に同じ順序」になっていると考えられる。)

14. [まとめ] 達成基準 3.2.3 一貫したナビゲーション
●ウェブサイト内の各ページで共通して繰り返されるナビゲーション項目は、基本的に
同じ順序を保つようにしましょう。
✓認知/学習障害を持つユーザーはもちろんのこと、瞬時に全体を見渡すことが苦手
な視覚障害者 (ロービジョンおよび全盲) にとっても、認知/学習負荷が軽減される
ので大きな助けになります。

15. 達成基準 3.2.4
一貫した識別性
ウェブページ一式の中で同じ機能を有するコンポーネントは、一貫して識別
できる。(レベル AA)
達成基準 3.2.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-consistent-functionality.html

16. [用語 ] 達成基準 3.2.4 一貫した識別性
ウェブページ一式
共通の目的を共有し、同じコンテンツ制作者、グループ、または組織により制作された
ウェブページの集合。ウェブサイトなど。

17. [まとめ] 達成基準 3.2.4 一貫した識別性
●ウェブサイト内の各ページで共通して用いられる同一機能は、一貫性を保った形の UI
コンポーネントとして提供するようにしましょう。たとえば :
✓一貫した UI 形状 / 配色 / タイポグラフィ
✓一貫したラベル
✓一貫したアイコン
✓一貫した代替テキスト (alt 属性、aria-label 属性)
✓一貫した role 属性値
✓一貫したステータス表現
●UI コンポーネント間で一貫性を保つことが難しい場合は、適宜ラベルを用いて補足説明
を提供しましょう。

18. UI ケーススタディ

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

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

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

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

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

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

25. 次回予告

26. • WCAG 2.0 (Level AA) を読もう
• 3.3.3 エラー修正の提案
• 3.3.4 エラー回避 (法的、金融、データ)
• UI ケーススタディ
これで、レベル AA
の達成基準はすべて
読み終わります！

27. To be continued…