ウェブ制作会社のディレクターさんを対象にした、アクセシビリティ勉強会です。(全10回コースの第2回目)

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

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

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

4. アクセシビリティ検証ツールいろいろ
WAVE, NoCoffee Vision Simulator, Colour Contrast Analyser,
aXe, Chrome 開発者ツール
スクリーンリーダーを体験しよう!
NVDA (for Windows), VoiceOver (for iOS)
今日のメニュー

5. アクセシビリティ検証ツール
いろいろ

6. みなさん、何かお使いのものはありますか？

7. WAVE
• WebAIM (Web Accessibility in Mind) が開発/公開。
• ウェブ版、Chrome 拡張機能、Firefox 拡張機能、が用意されている。
• http://wave.webaim.org/
• https://chrome.google.com/webstore/detail/wave-evaluation-tool/
jbbplnpkjmmeebjpijfedlgcdilocofh?hl=ja
• https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
• 検証結果の表示がわかりやすい。検証対象ウェブページの表示はそのまま
に、検証結果 (エラーやアラート) を重ねて表示してくれる。

9. Demonstration!

10. NoCoffee Vision Simulator
• Aaron Leventhal 氏 (Access Garage) が開発、Chrome 拡張機能とし
て公開されている。
• https://chrome.google.com/webstore/detail/nocoffee/
jjeeggmbnhckmgdhmgdckeigabjfbddl
• ロービジョン (弱視) の「見えにくさ」を様々なパラメーターによってシ
ミュレーション。「見えにくさ」の多様性を、疑似体感できる。

12. Demonstration!

13. Colour Contrast Analyser
• The Paciello Group が開発/公開。
• Windows 版、Mac 版、が用意されている。
• https://www.paciellogroup.com/resources/contrastanalyser/
• 文字色と背景色のコントラスト比 (WCAG 2.0 達成基準 1.4.3 および
1.4.6 で目標値が定義されている) が保たれているかを検証できる。

15. Demonstration!

16. aXe (The Accessibility Engine)
• Deque Systems, Inc が開発/公開。
• オープンソースのアクセシビリ検証ライブラリ。Selenium などで利用可能。
• 応用例として、Chrome 拡張機能、Firefox 拡張機能、が用意されている。
ブラウザの開発者ツールの一機能として使用できる。
• https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd
• https://addons.mozilla.org/en-us/firefox/addon/axe-devtools/

18. Demonstration!

19. Chrome 開発者ツール
• 動的なインタラクションに対して、WAI-ARIA の属性値が適切にソースコード
上に出力されているかを確認できる。
• aria-selected
• aria-hidden
• aria-expanded
• …など

20. Demonstration!

21. ぜひ、いろいろ試してみてください。

22. スクリーンリーダーを
体験しよう!

23. スクリーンリーダーとは？
• コンピューターのスクリーンに表示された情報を、音声読み上げの形で出力
してくれるソフトウェア。
• 視覚障害者にとっての情報保障を担保することができる。

24. スクリーンリーダーでのウェブ利用
• 上から順に、読む。
• 見出し (<h1>, <h2>, <h3>, …) を拾い読みする。
• クリック可能な箇所 (ナビゲーション、リンク、ボタン) を拾い読みする。
• ランドマーク (WAI-ARIA Landmark Roles) 間を移動する。
• テーブルのセルを (上下左右にフォーカスを動かしながら) 読む。
• フォームに (音声フィードバックを得ながら) 情報を入力する。
• 動的なインタラクションの挙動 (フィードバック) を音声で得る。
• …などなど。

25. 今日は、手軽に使えるスクリーンリーダー
NVDA と VoiceOver をご紹介します！

26. NVDA (for Windows)
• Non Visual Desktop Access (NVDA)。オーストラリアの非営
利法人 NV Access が開発/公開している無料 (オープンソース
GPLv2) の Windows 用スクリーンリーダー。
• 日本語版は https://www.nvda.jp/ からダウンロードできる。

27. NVDA の主なキーコマンド
• [Ctrl] : 読み上げを停止する。
• 上下矢印キー : 現在位置の行/次の行を読み上げる。
• [Tab] (または [Shift] + [Tab]): 前後のオブジェクト類 (リンクや各フォーム要
素) にフォーカスを当てる。([Enter] キーで実行する。)
• [H] (または [Shift] + [H]) : 前後の見出し要素にジャンプする。
• [D] (または [Shift] + [D]) : 前後のランドマークにジャンプする。
• [T] (または [Shift] + [T]) : 前後のテーブルにジャンプする。
• [Ctrl] + [Alt] + 矢印キー (上下左右) : テーブル内で、読み上げるセルを移動す
る。
その他、詳しくは https://www.nvda.jp/nvda2017.2jp/ja/keyCommands.html を参照のこと。

28. Demonstration!

29. VoiceOver (for iOS)
• Apple iOS (iPhone や iPad) に標準装備されているスクリーン
リーダー。
• Mac にも同様に、標準装備されています。
• iOS の「設定」で、一般 ＞ アクセシビリティ ＞ VoiceOver で
起動。
• その前に、一般 ＞ アクセシビリティ ＞ ショートカット で、ホームボタンのトリプ
ルタップで VoiceOver をオン/オフできるようにしておくのがおすすめです。

30. VoiceOver の主なジェスチャ
• タップ : オブジェクトを選択する。
• ダブルタップ : 選択したオブジェクトを実行する。([Enter] キーに相当)
• 3本指でスワイプ : 画面をスクロールする。
• 2本指でタップ : 読み上げを停止する。
• 2本指で上方向にフリック : ページ全体を読み上げる。
• 2本指で下方向にフリック : 現在位置から読み上げる。
• 左右にフリック : 見出し、段落、リンク、箇条書き、といった情報の「まとまり」単位で、
読み上げ対象箇所を前後に移動する。
• 2本指でひねる (つまみを回すように) : 「ローター」機能を呼び出す。「見出し」「リン
ク」「ランドマーク」などが選べる。
• 上下にフリック : 選択された「ローター」機能をコントロールする。たとえば、見出しの
拾い読み、リンクの拾い読み、ランドマーク間の移動ができる。

31. 各自、実際に VoiceOver でウェブサイトを
使ってみましょう。

32. どんな気づきがありましたか？

33. 次回予告

34. • WCAG 2.0 の概略
• 基本構成 : 「原則」「ガイドライン」「達成基準」
• WCAG 本体と関連文書 (解説書、達成方法集)
• WCAG 2.0 (Level A) を読む
(達成基準、解説書、達成方法集)
• 1.1.1 非テキストコンテンツ
• ケーススタディ、お悩み相談

35. To be continued…