ウェブディレクターのための web a11y 勉強会 #02
Post on 23-Jan-2018
523 Views
Preview:
TRANSCRIPT
自己紹介
@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/
• 検証結果の表示がわかりやすい。検証対象ウェブページの表示はそのままに、検証結果 (エラーやアラート) を重ねて表示してくれる。
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 (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本指でひねる (つまみを回すように) : 「ローター」機能を呼び出す。「見出し」「リン
ク」「ランドマーク」などが選べる。 • 上下にフリック : 選択された「ローター」機能をコントロールする。たとえば、見出しの
拾い読み、リンクの拾い読み、ランドマーク間の移動ができる。
• WCAG 2.0 の概略 • 基本構成 : 「原則」「ガイドライン」「達成基準」 • WCAG 本体と関連文書 (解説書、達成方法集)
• WCAG 2.0 (Level A) を読む (達成基準、解説書、達成方法集)
• 1.1.1 非テキストコンテンツ
• ケーススタディ、お悩み相談
top related