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

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

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

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

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.3 入力支援
利用者の間違いを防ぎ、修正を支援すること。
おさらい

8. 達成基準 3.3.3
エラー修正の提案
入力エラーが自動的に検出され、修正方法を提案できる場合、その提案が利用
者に提示される。ただし、セキュリティ又はコンテンツの目的を損なう場合は
除く。(レベル AA)
達成基準 3.3.3 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-suggestions.html

9. [用語 ] 達成基準 3.3.3 エラー修正の提案
入力エラー
ユーザーが入力した情報で、システムが受け付けられないもの。

10. [まとめ] 達成基準 3.3.3 エラー修正の提案
●ユーザーが情報を入力し、その入力をシステムが受け付けられない場合、修正方法をユー
ザーに提案しましょう。
✓達成基準 3.3.1 「エラーの特定」(レベル A) では、エラー箇所 (どこに不備があるの
か？) とエラー内容 (どんな不備があるのか？) をアクセシブルな形でユーザーに伝え
ることが求められていますが、この達成基準 3.3.3 では、さらに一歩進んで、「どう
修正すればよいか？」をユーザーに提案することが求められています。
• 入力フォーマットの例示
• 入力値の範囲や制約の説明
• 修正候補の提示 (オートサジェスト)
• …など

11. 達成基準 3.3.4
エラー回避 (法的、金融、データ)
利用者にとって法律行為もしくは金融取引が生じる、利用者が制御可能なデータストレージ
システム上のデータを変更もしくは削除する、又は利用者が試験の解答を送信するウェブペー
ジでは、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル AA)
1. 取消: 送信を取り消すことができる。
2. チェック: 利用者が入力したデータの入力エラーがチェックされ、利用者には修正する
機会が提供される。
3. 確認: 送信を完了する前に、利用者が情報の見直し、確認及び修正をするメカニズムが
利用できる。
達成基準 3.3.4 を理解する | WCAG 2.0解説書
https://waic.jp/docs/UNDERSTANDING-WCAG20/minimize-error-reversible.html

12. [用語] 達成基準 3.3.4 エラー回避 (法的、金融、データ)
入力エラー
ユーザーが入力した情報で、システムが受け付けられないもの。

13. [まとめ] 達成基準 3.3.4 エラー回避 (法的、金融、データ)
●法律行為 (契約の締結) や金融取引 (決済)、重要なデータのユーザーによる編集など、
重大な結果につながる可能性のある情報のやりとりにおいては、以下のいずれかを担
保しましょう。
✓送信の取り消し、または修正。
✓入力時の、エラーチェックと修正。
✓送信前の、入力情報の確認と修正。

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.1 とは？
• WCAG 2.1 新達成基準を読む
• 1.3.4 Orientation (AA) [モバイル]
• 1.3.5 Identify Input Purpose (AA) [認知/学習]
• UI ケーススタディ
次回から、WCAG 2.1 で新た
に追加された達成基準
(レベル A、AA) を学びます。

23. To be continued…