ウェブディレクターのためのWeb A11Y 勉強会

#03 (2017-08-08)

自己紹介

@caztcha

ウェブユーザビリティ / アクセシビリティ / 情報アーキテクチャ (IA) HCD-Net 認定 人間中心設計専門家

ウェブアクセシビリティ基盤委員会 (WAIC) 翻訳WG https://website-usability.info

前回までのあらすじ#01 • ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう

#02 • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう!

今日のメニュー• WCAG 2.0 の概略

• 基本構成 : 「原則」「ガイドライン」「達成基準」 • WCAG 本体と関連文書 (解説書、達成方法集)

• WCAG 2.0 (Level A) を読もう！

• 1.1.1 非テキストコンテンツ

• ケーススタディ、お悩み相談

画像などに対する情報保障について学びます。

WCAG 2.0 の概略

Web Accessibility WCAG Theme Song by David MacDonaldhttps://youtu.be/-IWBT4Tk3t0

WCAG 2.0 とは？•W3C勧告: Web Content Accessibility Guidelines •実質的なワールドスタンダード

• ISO/IEC 40500 ≡ WCAG 2.0 = JIS X8341-3:2016 • グローバルにビジネス展開する企業にとってはシングルスタンダードで済む • 諸外国の法的義務要件の基準

✓米国、オーストラリア、ニュージーランド、カナダ/オンタリオ州、韓国…

•ヒューリスティクス ＆ デザインパターン

WCAG 2.0 の基本構成•4つの「原則」

•各原則の下に計12の「ガイドライン」

•各ガイドラインの下に計61の「達成基準」 ✓各達成基準には (必要性や実現可能性を考慮して) 3段階のレベル設定

1. 知覚可能 (Perceivable) • 情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示

可能でなければならない。

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

3. 理解可能 (Understandable) • 情報及びユーザインタフェースの操作は理解可能でなければならない。

4. 堅牢 (Robust) • コンテンツは、支援技術を含む様々なユーザエージェントが確実に解釈できるように十分に

堅牢でなければならない。

WCAG 2.0 の「原則」

WCAG 2.0 の「ガイドライン」1. 知覚可能

• 1.1 テキストによる代替 • 1.2 時間依存メディア • 1.3 適応可能 • 1.4 判別可能

2. 操作可能 • 2.1 キーボード操作可能 • 2.2 十分な時間 • 2.3 発作の防止 • 2.4 ナビゲーション可能

3. 理解可能

• 3.1 読みやすさ • 3.2 予測可能 • 3.3 入力支援

4. 堅牢

• 4.1 互換性

WCAG 2.0 の「達成基準」(ほんの一例)3. 理解可能

• 3.1 読みやすさ

• 3.1.1 ページの言語 [レベル A] • 3.1.2 一部分の言語 [レベル AA] • 3.1.3 一般的ではない用語 [レベル AAA] • 3.1.4 略語 [レベル AAA] • 3.1.5 読解レベル [レベル AAA] • 3.1.6 発音 [レベル AAA]

WCAG 2.0 と関連文書

WCAG 2.0 原則

ガイドライン 達成基準

WCAG 2.0 解説書

Understanding WCAG 2.0

WCAG 2.0 達成方法集

Techniques for WCAG 2.0

ヒューリスティクス デザインパターン

抽象的な記述。読解が難しい。

具体的な解説具現化のためのテクニック

•WCAG 2.0 • 原文 (英語) https://www.w3.org/TR/WCAG20/　 • 日本語訳 http://waic.jp/docs/WCAG20/Overview.html

•Understanding WCAG 2.0 / WCAG 2.0 解説書 • 原文 (英語) https://www.w3.org/TR/UNDERSTANDING-WCAG20/ 　 • 日本語訳 http://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.html

• Techniques for WCAG 2.0 / WCAG 2.0 達成方法集 • 原文 (英語) https://www.w3.org/TR/WCAG-TECHS/ 　 • 日本語訳 http://waic.jp/docs/WCAG-TECHS/Overview.html

WCAG 2.0 と関連文書

WCAG 2.0 (Level A) を読もう！ (達成基準、解説書、達成方法集)

原則 1. 知覚可能 (Perceivable)

情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。

ガイドライン 1.1 テキストによる代替

すべての非テキストコンテンツには、拡大印刷、点字、音声、シンボル、平易な言葉などの利用者が必要とする形式に変換できるように、テキストによる代替を提供すること。

達成基準 1.1.1 非テキストコンテンツ利用者に提示されるすべての非テキストコンテンツには、同等の目的を果たすテキストによる代替が提供されている。ただし、次の場合は除く: (レベル A)

• コントロール、入力: 非テキストコンテンツが、コントロール又は利用者の入力を受け付けるものであるとき、その目的を説明する名前 (name) を提供している。 (コントロール及び利用者の入力を受け入れるコンテンツに関するその他の要件は、ガイドライン 4.1を参照。)

• 時間依存メディア: 非テキストコンテンツが、時間に依存したメディアであるとき、テキストによる代替は、少なくとも、その非テキストコンテンツを識別できる説明を提供している。 (メディアに関するその他の要件は、ガイドライン 1.2を参照。)

• テスト: 非テキストコンテンツが、テキストで提示されると無効になるテスト又は演習のとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

• 感覚的: 非テキストコンテンツが、特定の感覚的体験を創り出すことを主に意図しているとき、テキストによる代替は、少なくともその非テキストコンテンツを識別できる説明を提供している。

• CAPTCHA: 非テキストコンテンツが、コンピュータではなく人間がコンテンツにアクセスしていることを確認する目的で用いられているとき、テキストによる代替は、その非テキストコンテンツの目的を特定し、説明している。なおかつ、他の感覚による知覚に対応して出力する CAPTCHA の代替形式を提供することで、様々な障害に対応している。

• 装飾、整形、非表示: 非テキストコンテンツが、純粋な装飾である、見た目の整形のためだけに用いられている、又は利用者に提供されるものではないとき、支援技術が無視できるように実装されている。

[用語] 達成基準1.1.1 非テキストコンテンツ

テキスト マシンリーダブルな (プログラムによる解釈が可能な) 文字列によるコンテンツ。

非テキストコンテンツ 「テキスト」ではない表現によるコンテンツ。画像、動画、音声など。

時間依存メディア 時間軸で変化するコンテンツ。動画や音声など。

感覚的な体験 動画や音楽や写真などを介して得られる、情動的な感動を伴う体験。

装飾 見栄えのためだけのもので、それ単体では情報や機能を提供しないもの。

[解説] 達成基準1.1.1 非テキストコンテンツ

達成基準 1.1.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/text-equiv-all.html

[まとめ] 達成基準1.1.1 非テキストコンテンツ

�画像 (写真、絵、図表、アイコン、など) には、利用者が自由に他のモダリティ (聴覚情報、触覚情報、など) に変換できるように、代替テキストを付けましょう。

�オーディオ (音声) コンテンツやビデオ (動画) コンテンツには、少なくとも、「～のオーディオ」「～のビデオ」があるということを案内するテキストを付けましょう。 ✓(音声、動画の中身に関する情報保障は、別途、ガイドライン 1.2 を参照。)

�代替テキストを付けると不都合な場合 (CAPTCHA、クイズ、試験問題、など) は、少なくともそこに何があるかを案内するテキストを付けましょう。そのうえで CAPTCHA については、視覚以外のモダリティを用いて認証をパスできるようにしましょう。 ✓(…と言いつつ、そもそも CAPTCHA って本当に必要なのだろうか？)

�画像などが純粋な装飾である (実質的な内容を伴わない) 場合、スクリーンリーダーが無視できるようにしましょう。

ケーススタディ、お悩み相談

Anyone?

次回予告

• WCAG 2.0 (Level A) を読む

• 1.2.1 音声のみ及び映像のみ (収録済み) • 1.2.2 キャプション (収録済み) • 1.2.3 音声解説又はメディアに対する代替コンテンツ (収録済み)

• ケーススタディ、お悩み相談

音声/動画に対する情報保障について学びます。

To be continued…