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

#02 (2017-07-11)

自己紹介

@caztcha

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

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

• ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう

前回のあらすじ

アクセシビリティ検証ツールいろいろ WAVE, NoCoffee Vision Simulator, Colour Contrast Analyser, aXe, Chrome 開発者ツール

スクリーンリーダーを体験しよう! NVDA (for Windows), VoiceOver (for iOS)

今日のメニュー

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

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

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/

• 検証結果の表示がわかりやすい。検証対象ウェブページの表示はそのままに、検証結果 (エラーやアラート) を重ねて表示してくれる。

Demonstration!

NoCoffee Vision Simulator

• Aaron Leventhal 氏 (Access Garage) が開発、Chrome 拡張機能として公開されている。 • https://chrome.google.com/webstore/detail/nocoffee/

jjeeggmbnhckmgdhmgdckeigabjfbddl • ロービジョン (弱視) の「見えにくさ」を様々なパラメーターによってシ

ミュレーション。「見えにくさ」の多様性を、疑似体感できる。

Demonstration!

Colour Contrast Analyser

• The Paciello Group が開発/公開。 • Windows 版、Mac 版、が用意されている。

• https://www.paciellogroup.com/resources/contrastanalyser/

• 文字色と背景色のコントラスト比 (WCAG 2.0 達成基準 1.4.3 および 1.4.6 で目標値が定義されている) が保たれているかを検証できる。

Demonstration!

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/

Demonstration!

Chrome 開発者ツール

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

Demonstration!

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

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

スクリーンリーダーとは？• コンピューターのスクリーンに表示された情報を、音声読み上げの形で出力

してくれるソフトウェア。 • 視覚障害者にとっての情報保障を担保することができる。

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

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

NVDA (for Windows)

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

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 を参照のこと。

Demonstration!

VoiceOver (for iOS)

• Apple iOS (iPhone や iPad) に標準装備されているスクリーンリーダー。 • Mac にも同様に、標準装備されています。

• iOS の「設定」で、一般 ＞ アクセシビリティ ＞ VoiceOver で起動。 • その前に、一般 ＞ アクセシビリティ ＞ ショートカット で、ホームボタンのトリプ

ルタップで VoiceOver をオン/オフできるようにしておくのがおすすめです。

VoiceOver の主なジェスチャ• タップ : オブジェクトを選択する。 • ダブルタップ : 選択したオブジェクトを実行する。([Enter] キーに相当) • 3本指でスワイプ : 画面をスクロールする。 • 2本指でタップ : 読み上げを停止する。 • 2本指で上方向にフリック : ページ全体を読み上げる。 • 2本指で下方向にフリック : 現在位置から読み上げる。 • 左右にフリック : 見出し、段落、リンク、箇条書き、といった情報の「まとまり」単位で、

読み上げ対象箇所を前後に移動する。 • 2本指でひねる (つまみを回すように) : 「ローター」機能を呼び出す。「見出し」「リン

ク」「ランドマーク」などが選べる。 • 上下にフリック : 選択された「ローター」機能をコントロールする。たとえば、見出しの

拾い読み、リンクの拾い読み、ランドマーク間の移動ができる。

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

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

次回予告

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

• WCAG 2.0 (Level A) を読む (達成基準、解説書、達成方法集)

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

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

To be continued…