狠狠撸

ウェブディレクターのための?
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/
? 検証結果の表示がわかりやすい。検証対象ウェブページの表示はそのまま
に、検証結果 (エラーやアラート) を重ねて表示してくれる。

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

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

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

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/

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

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

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

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

スクリーンリーダーでのウェブ利用
? 上から順に、読む。
? 見出し (<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 を参照のこと。

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 非テキストコンテンツ
? ケーススタディ、お悩み相談

狠狠撸

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

Recommended

More Related Content

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

More from Kazuhiko Tsuchiya (13)

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