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

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

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

3. 今日のメニュー
• WCAG 2.0 (Level AA) を読もう
• 1.4.3 コントラスト (最低限)
• 1.4.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. 原則 1. 知覚可能 (Perceivable)
情報及びユーザインタフェース コンポーネントは、利用者が知覚
できる方法で利用者に提示可能でなければならない。
おさらい

7. ガイドライン 1.4 判別可能
コンテンツを、利用者にとって見やすく、聞きやすいものにする
こと。これには、前景と背景を区別することも含む。
おさらい

8. 達成基準 1.4.3
コントラスト (最低限)
テキスト及び文字画像の視覚的提示に、少なくとも 4.5:1 のコントラスト比がある。ただし、次
の場合は除く: (レベル AA)
• 大きな文字: サイズの大きなテキスト及びサイズの大きな文字画像に、少なくとも 3:1 のコント
ラスト比がある。
• 付随的: テキスト又は文字画像において、次の場合はコントラストの要件はない。アクティブで
はないユーザインタフェース コンポーネントの一部である、純粋な装飾である、誰も視覚的に
確認できない、又は重要な他の視覚的なコンテンツを含む写真の一部分である。
• ロゴタイプ: ロゴ又はブランド名の一部である文字には、最低限のコントラストの要件はない。
達成基準 1.4.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

9. [用語] 達成基準 1.4.3 コントラスト (最低限)
テキスト
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
文字画像
非テキスト形式 (画像) で提示された文字情報。
サイズの大きな (文字)
少なくとも 18 ポイント、又は 14 ポイントの太字。
中国語、日本語、および韓国語 (CJK) のフォントは、それと同等の文字サイズ。
純粋な装飾
見栄えのためだけのもので、情報は提供せず、機能性も備えていないもの。

10. [まとめ] 達成基準 1.4.3 コントラスト (最低限)
文字情報 (テキスト、文字画像、を問わず) の色は、背景色との間で 4.5:1 以上のコントラスト
比を保つようにしましょう。
✓チェックツールで簡単に計測できます。
Colour Contrast Analyser (https://developer.paciellogroup.com/resources/contrastanalyser/ )
Contrast Ratio (http://contrast-ratio.com/ )
… etc.
アクティブではない UI コンポーネントや、純粋な装飾、ロゴマークなどは例外です。

11. 達成基準 1.4.4
テキストのサイズ変更
キャプション及び文字画像を除き、テキストは、コンテンツ又は機能を損
なうことなく、支援技術なしで 200％ までサイズ変更できる。(レベル AA)
達成基準 1.4.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html

12. [用語] 達成基準 1.4.4 テキストのサイズ変更
キャプション
動画の音声トラックに対応した字幕のこと。
文字画像
非テキスト形式 (画像) で提示された文字情報。
テキスト
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
支援技術
一般的なユーザエージェント (ブラウザなど ) で提供されている機能以上の機能を、障害のある
ユーザーのために提供する、ソフトウェアやハードウェア。(例 : スクリーンリーダー)

13. [まとめ] 達成基準 1.4.4 テキストのサイズ変更
ウェブコンテンツの拡大 (ズーム) を妨げないようにしましょう。
✓ブラウザの標準的なズーム機能で200%以上の拡大ができれば OK です。
✓タッチインターフェース向けのウェブサイトやアプリケーションで、ピンチ＆ズーム
を不可能にする実装が時々見られますが (<meta name=“viewport”> で user-
scalable=no にする)、やめましょう。

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) を読もう
• 1.4.5 文字画像
• 2.4.5 複数の手段
• UI ケーススタディ

23. To be continued…