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

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

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

3. • ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう! • WCAG 2.0 の概略 • WCAG 2.0 (Level A) を読もう！前回までのあらすじここまで、「原則1 知覚可能」「原則2 操作可能」に関する達成基準を読んできました。

4. 今日のメニュー • WCAG 2.0 (Level A) を読もう！ • 3.1.1 ページの言語 • 3.2.1 フォーカス時 • 3.2.2 入力時 • ケーススタディ、お悩み相談「原則3 理解可能」に入ります。スクリーンリーダー向けにページの言語設定をすること、フォーカスや入力に伴って利用者の予期せぬ形で状況を変化させないこと、を学びます。

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

6. WCAG 2.0 の基本構成おさらい原則 (4) ガイドライン (12) 達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。 1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)

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

8. ガイドライン 3.1 読みやすさテキストのコンテンツを読みやすく理解可能にすること。「テキストが読みやすく理解可能であること」と言うと、専門用語や略語の扱いを含む平易な言語表現のことを思い浮かべるかと思いますが、そういった達成基準はレベル AAA となっています。

9. 達成基準 3.1.1   ページの言語それぞれのウェブページのデフォルトの自然言語がどの言語であるか、プログラムによる解釈が可能である。(レベル A) 達成基準 3.1.1 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/meaning-doc-lang-id.html

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

11. [まとめ] 達成基準 3.1.1 ページの言語ウェブページの <html> 要素には lang 属性を記述して、そのページが何語で書かれているかを明示的にしましょう。 ✓ 日本語のページであれば <html lang=“ja”>、英語ページであれば <html lang=“en”> といった具合。 ✓ 複数の言語の音声合成エンジン (speech synthesizer) がインストールされているスクリーンリーダーであれば、lang 属性値に応じて、「その言葉のネイティブスピーカーっぽい」発音になる。 • PDF 文書を用いた情報発信においても、その文書のデフォルト言語を設定しましょう (Acrobat Pro で設定可)。

12. iOS 設定 > 一般 > アクセシビリティ > VoiceOver > スピーチ > 新しい言語を追加... 多言語に対応した、スクリーンリーダーの音声合成エンジン (例 : iOS VoiceOver)

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

14. 達成基準 3.2.1   フォーカス時いずれのコンポーネントも、フォーカスを受け取ったときにコンテキストの変化を引き起こさない。 (レベル A) 達成基準 3.2.1 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-receive-focus.html　

15. [用語] 達成基準 3.2.1 フォーカス時コンテキストの変化ウェブページのコンテンツにおける大きな変化で、利用者が気づかないと、ウェブページ全体を一度に見ることのできない利用者を混乱させる恐れのあるもの。

16. [まとめ] 達成基準 3.2.1 フォーカス時視覚障害 (ロービジョンを含む)、認知/学習の障害、運動障害を持つ利用者への配慮として、UI コンポーネントにフォーカスが当たっただけで、コンテンツを変化させるような実装は避けましょう。

17. 達成基準 3.2.2   入力時ユーザインタフェースコンポーネントの設定を変更することが、コンテキストの変化を自動的に引き起こさない。ただし、利用者が使用する前にその挙動を知らせてある場合を除く。 (レベル A) 達成基準 3.2.2 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/consistent-behavior-unpredictable-change.html　

18. [用語 ] 達成基準 3.2.2 入力時コンテキストの変化ウェブページのコンテンツにおける大きな変化で、利用者が気づかないと、ウェブページ全体を一度に見ることのできない利用者を混乱させる恐れのあるもの。

19. [まとめ] 達成基準 3.2.2 入力時フォームの入力要素 (<input> や <select> など) に情報を入れただけで、または値を変更しただけで、コンテンツを変化させるような実装は避けましょう。 ✓ 入力に伴うコンテンツの変化は、ユーザーの明確な意思表示 (サブミットボタンを押す、 [Enter] キーを押す、など) によって発生するようにしましょう。入力と同時にコンテンツを変化させる場合は、事前に利用者がその旨を理解できるようにしておきましょう。

20. ECサイトでよく見られる「ファセットナビゲーション」はこの達成基準 3.2.2 に照らして、どうか？

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

22. Anyone?

23. 次回予告

24. • WCAG 2.0 (Level A) を読もう！ • 3.3.1 エラーの特定 • 3.3.2 ラベル又は説明 • 4.1.1 構文分析 • 4.1.2 名前 (name)、役割 (role) 及び値 (value) • まとめ

25. To be continued… 次はいよいよ最終回！

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

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

Recommended

More Related Content

What's hot

What's hot(9)

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

Similar to ウェブディレクターのための Web A11Y 勉強会 #09(20)

More from Kazuhiko Tsuchiya

More from Kazuhiko Tsuchiya(9)

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