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

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

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

3. 今日のメニュー
• WCAG 2.0 (Level AA) を読もう
• 1.4.5 文字画像
• 2.4.5 複数の手段
• 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.5
文字画像
使用している技術で意図した視覚的提示が可能である場合、文字画像ではなくテキ
ストが情報伝達に用いられている。ただし、次に挙げる場合を除く: (レベル AA)
• カスタマイズ可能 : 文字画像は、利用者の要求に応じた視覚的なカスタマイズが
できる。
• 必要不可欠 : テキストの特定の表現が、伝えようとする情報にとって必要不可欠
である。
達成基準 1.4.5 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-text-presentation.html

9. [用語] 達成基準 1.4.5 文字画像
テキスト
プログラムによる解釈が可能な文字の並びで、自然言語で何かを表現しているもの。
文字画像
非テキスト形式 (画像) で提示された文字情報。
必要不可欠
もし取り除いてしまうと、コンテンツの情報や機能を根本的に変えてしまい、かつ、他の方
法では情報および機能を実現できないこと。
視覚的なカスタマイズ
フォント、サイズ、色、および背景を設定できること。

10. [まとめ] 達成基準 1.4.5 文字画像
文字情報は、基本的に、テキストで表現しましょう。以下のメリットがあるからです。
✓ユーザーが任意で、文字サイズやフォント、色、行間などを変えることができる。(ロービ
ジョンやディスレクシアなどのユーザーにとって助かる。)
✓画面拡大しても文字がぼやけたりジャギーにならない。
✓スクリーンリーダーで音声読み上げができる。(文字画像だと代替テキストを入れなければ
ならないが、テキストではその必要がない。)
✓機械翻訳に対応しやすい。
テキストの視覚表現のコントロールは CSS で。タイポグラフィにこだわりがあるコンテンツ
ではウェブフォントの使用も可能です。
ロゴタイプなど「必要不可欠」である場合は例外です。

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

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

13. 達成基準 2.4.5
複数の手段
ウェブページ一式の中で、あるウェブページを見つける複数の手段が利用で
きる。ただし、ウェブページが一連のプロセスの中の1ステップ又は結果で
ある場合は除く。(レベル AA)
達成基準 2.4.5 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-mult-loc.html

14. [用語 ] 達成基準 2.4.5 複数の手段
ウェブページ一式
共通の目的を共有し、同じコンテンツ制作者、グループ、または組織により制作されたウェ
ブページの集合。ウェブサイトなど。
プロセス
ある活動を完了させるために必要なユーザーの一連の動作。

15. [まとめ] 達成基準 2.4.5 複数の手段
サイト内をナビゲートする手段を、複数用意し、様々なユーザーのニーズに対応できる
ようにしましょう。
✓メニュー (グローバルメニュー、ローカルメニュー)
✓サイトマップ (昨今ではビッグフッターもあり)
✓サイト内検索
✓前後ページへの移動 (ページネーション)
✓パンくずリスト
✓文脈的なリンク (関連情報へのリンクや Call To Action など)
✓etc …

16. UI ケーススタディ

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

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

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

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

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

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

23. 次回予告

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

25. To be continued…