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

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

#06 (2017-11-14)

自己紹介

@caztcha

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

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

前回までのあらすじ• ウェブアクセシビリティとは？ • ウェブアクセシビリティはなぜ必要なの？ • 支援技術を知ろう • アクセシビリティ検証ツールいろいろ • スクリーンリーダーを体験しよう! • WCAG 2.0 の概略 • WCAG 2.0 (Level A) を読もう！

• 様々なコンテンツ (画像、音声、動画…) に対する情報保障

• 多様な UA への適応

• WCAG 2.0 (Level A) を読もう！ • 1.4.1 色の使用

• 1.4.2 音声の制御

• 2.1.1 キーボード

• 2.1.2 キーボードトラップなし

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

今日のメニュー

(知覚) • 色を使うことの注意点 • 音声再生のコントロール (操作) • マウスが使えない人のキーボード操作 … について学びます。

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

WCAG 2.0 の基本構成

おさらい

原則 (4)

ガイドライン (12)

達成基準 (61) このうちレベル「A」のみが本勉強会の対象です。

1. 知覚可能 (Perceivable) 2. 操作可能 (Operable) 3. 理解可能 (Understandable) 4. 堅牢 (Robust)

原則 1. 知覚可能 (Perceivable)

情報及びユーザインタフェース コンポーネントは、利用者が知覚できる方法で利用者に提示可能でなければならない。

おさらい

ガイドライン 1.4 判別可能

コンテンツを、利用者にとって見やすく、聞きやすいものにすること。これには、前景と背景を区別することも含む。

達成基準 1.4.1 色の使用色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。 (レベル A)

達成基準 1.4.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-without-color.html

[用語] 達成基準 1.4.1 色の使用

(特にありません)

[まとめ] 達成基準 1.4.1 色の使用

�色はデザイン上とても重要です。(感覚的な訴求力に優れ、ユーザビリティを高めることができ、また認知/学習などの障害を持つユーザーにとっても情報識別や理解の助けになる。) ただし、利用者の色覚特性や多様なウェブ閲覧環境に配慮し、色「だけ」で情報を伝えないようにしましょう。 ✓テキスト (ラベル) を添える。(フォームの入力必須項目のラベルなど)

✓色以外の視覚的表現も併用する。(リンクの表現、図の「塗り」、など)

お名前 [必須]

電話番号

メールアドレス [必須]

��

送信

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。

またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

ポラーノの広場（宮沢賢治）

達成基準 1.4.2 音声の制御ウェブページ上にある音声が自動的に再生され、3秒より長く続く場合、その音声を一時停止又は停止するメカニズム、もしくはシステム全体の音量レベルに影響を与えずに音量レベルを調整できるメカニズムが利用できる。 (レベル A)

達成基準 1.4.2 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/visual-audio-contrast-dis-audio.html

[用語] 達成基準 1.4.2 音声の制御

メカニズム ウェブコンテンツの UI (ユーザーインターフェース) に用意された、利用者が制御できる仕組み。

[まとめ] 達成基準 1.4.2 音声の制御

�ウェブコンテンツの利用時に、音声が流れていてそれを停めることができないと、視覚障害者 (スクリーンリーダーを併用してコンテンツを音声読み上げさせている利用者) にとって、また一部の認知/学習の障害を持つ利用者にとって、情報取得の妨げになります。 ✓音声が3秒以内に消えるコンテンツ/インタラクションにしましょう。 ✓ユーザーの任意で、コンテンツ上の音声停止 (または音量調整) をコントロールできるよう

な UI を設置しましょう。

ご参考：「原則 1. 知覚可能」のガイドライン「1.4 判別可能」には、これ以外にも、達成基準レベル AA ではありますが、基本的なアクセシビリティ改善につながる (設計の上流段階できちんと検討しておきたい) 事項があります。

配色/コントラスト (達成基準 1.4.3) 文字色と背景色の間では、4.5:1 以上のコントラスト比を確保しましょう。ロービジョンの利用者への配慮、屋外でのウェブ利用といった状況での可読性向上につながります。

テキストのサイズ変更 (達成基準 1.4.4) ユーザーの任意でコンテンツをズームできるようにしましょう。最近よく見る例として、モバイル向けのコンテンツで、user-scalable=“no” を設定したりしていませんか？

文字画像 (1.4.5) 文字情報はなるべく、画像による文字ではなくテキストを採用しましょう。ユーザーによる拡大表示や配色変更への対応のほか、機械翻訳ができるという利点もあります。

原則 2. 操作可能 (Operable)

ユーザインタフェース コンポーネント及びナビゲーションは操作可能でなければならない。

ガイドライン 2.1 キーボード操作可能

すべての機能をキーボードから利用できるようにすること。

達成基準 2.1.1 キーボード

コンテンツのすべての機能は、個々のキーストロークに特定のタイミングを要することなく、キーボードインタフェースを通じて操作可能である。ただし、その根本的な機能が利用者の動作による始点から終点まで続く一連の軌跡に依存して実現されている場合は除く。 (レベル A)

達成基準 2.1.1 を理解する | WCAG 2.0解説書 http://waic.jp/docs/UNDERSTANDING-WCAG20/keyboard-operation-keyboard-operable.html

[用語] 達成基準 2.1.1 キーボード

個々のキーストロークに特定のタイミングを要する キーボードのキーを押す操作について、ある決まったタイミングでの押下が条件となっていたり、ある限られた時間内に所定の回数キーを押す必要があったりすること。

始点から終点まで続く一連の軌跡 ドラッグ操作など。

[まとめ] 達成基準 2.1.1 キーボード

�画面を見ることができない全盲の人、マウスポインターを見つけるのが難しいロービジョンの人、手指の障害や怪我などでマウスを使えない人、など、ウェブ利用を (マウスの代わりに ) キーボード操作に依存する人たちがいます。あらゆるウェブコンテンツ/インタラクションは、ユーザーの任意のペースで、キーボード操作できるようにしましょう。 ✓ハンバーガーメニュー、アコーディオン、タブ、モーダルダイアログ、といったインタラクティ

ブな UI は特に、キーボード操作への配慮がおろそかになりやすいので、注意が必要です。

✓最近は、「スクロールハイジャック」でDOMツリーを小出し更新するページをよく見かけますが (例)、これもキーボード操作に依存した利用者を排除してしまうので避けるべきです。

�フォーカスの順序を不自然にしないこと (達成基準 2.4.3) やフォーカスの視覚的に明示すること (達成基準 2.4.7) も、併せて配慮しましょう。

達成基準 2.1.2 キーボードトラップなし

キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。さらに、修飾キーを伴わない矢印キー、 Tab キー、又はフォーカスを外すその他の標準的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通知される。 (レベル A)

達成基準 2.1.2 を理解する | WCAG 2.0解説書

http://waic.jp/docs/UNDERSTANDING-WCAG20/keyboard-operation-trapping.html

[用語] 達成基準 2.1.2 キーボードトラップなし

キーボードインターフェース つまりキーボードのこと。

キーボードフォーカス キーボード操作によるフォーカスのこと。

[まとめ] 達成基準 2.1.2 キーボードトラップなし

�キーボード操作 ([Tab] キーによるフォーカス移動) においては、ユーザーの予想 (期待) に反してフォーカスが「罠にはまって脱出できない」ことのないようにしましょう。 ✓サードパーティ製 UI の埋め込み (マップ、SNSタイムライン、など)

✓無限スクロール

✓スクロールハイジャックによる DOM ツリーの小出し更新

�オーバーレイするコンテンツ (モーダルダイアログなど) が開いているときに、キーボードフォーカスが (視覚的に隠れている) 背景側コンテンツに移ってしまうケースも、よく見られるので注意しましょう。

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

Anyone?

次回予告

• WCAG 2.0 (Level A) を読もう！ • 2.2.1 タイミング調整可能

• 2.2.2 一時停止、停止、非表示 • 2.3.1 3回の閃光、又は閾値以下

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

ユーザーに十分な時間を提供することや、(光過敏性) 発作の防止について学びます。

To be continued…