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

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

#07 (2017-12-12)

自己紹介

@caztcha

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

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

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

今日のメニュー• WCAG 2.0 (Level A) を読もう！ • 2.2.1 タイミング調整可能

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

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

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

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

WCAG 2.0 の基本構成

おさらい

原則 (4)

ガイドライン (12)

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

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

原則 2. 操作可能 (Operable)

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

おさらい

ガイドライン 2.2 十分な時間

利用者がコンテンツを読み、使用するために十分な時間を提供すること。

達成基準 2.2.1 タイミング調整可能コンテンツに制限時間を設定する場合は、次に挙げる事項のうち、少なくとも一つを満たしている: (レベル A) • 解除: 制限時間があるコンテンツを利用する前に、利用者がその制限時間を解除することができる。又は、 • 調整: 制限時間があるコンテンツを利用する前に、利用者が少なくともデフォルト設定の10倍を超える、大幅な制限時間

の調整をすることができる。又は、 • 延長: 時間切れになる前に利用者に警告し、かつ少なくとも20秒間の猶予をもって、例えば「スペースキーを押す」など

の簡単な操作により、利用者が制限時間を少なくとも10倍以上延長することができる。又は、 • リアルタイムの例外: リアルタイムのイベント (例えば、オークション) において制限時間が必須の要素で、その制限時間

に代わる手段が存在しない。又は、 • 必要不可欠な例外: 制限時間が必要不可欠なもので、制限時間を延長することがコンテンツの動作を無効にすることにな

る。又は、 • 20時間の例外: 制限時間が20時間よりも長い。

達成基準 2.2.1 を理解する | WCAG 2.0解説書 https://waic.jp/docs/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html　

[用語] 達成基準 2.2.1 タイミング調整可能

必要不可欠 もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

[まとめ] 達成基準 2.2.1 タイミング調整可能

�全盲、ロービジョン、巧緻性障害、および認知や学習に障害のあるユーザーは、コンテンツを読んだり、理解したり、フォームに入力したり、といった行為に時間がかかる場合があります。

�障害者でなくても、赤ちゃんを抱えたままウェブを利用していたり、電車の中でウェブ利用中に知人に出くわしたり、など、ちょくちょく中断を余儀なくされる場合があります。

�残念なタイムアウトを防ぐために、時間制限のあるコンテンツでは以下を盛り込みましょう。 ✓事前に/容易に時間制限を解除 (無効化) できるユーザーインターフェース

✓事前に/容易に時間制限を10倍以上延ばすことができるユーザーインターフェース

達成基準 2.2.2 一時停止、停止、非表示動きのある、点滅している、スクロールする、又は自動更新する情報は、次のすべての事項を満たしている: (レベル A) • 動き、点滅、スクロール: 動きのある、点滅している、又はスクロールしている情報が、(1) 自動的に

開始し、(2) 5秒よりも長く継続し、かつ、(3) その他のコンテンツと並行して提示される場合、利用者がそれらを一時停止、停止、又は非表示にすることのできるメカニズムがある。ただし、その動き、点滅、又はスクロールが必要不可欠な動作の一部である場合は除く。

• 自動更新: 自動更新する情報が、(1) 自動的に開始し、 (2) その他のコンテンツと並行して提示される場合、利用者がそれを一時停止、停止、もしくは非表示にする、又はその更新頻度を調整することのできるメカニズムがある。ただし、その自動更新が必要不可欠な動作の一部である場合は除く。

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

https://waic.jp/docs/NOTE-UNDERSTANDING-WCAG20-20160317/time-limits-pause.html

[用語] 達成基準 2.2.2 一時停止、停止、非表示

点滅 注意を引く意図で、二つの視覚的な状態を交互に切り替えること。

✓ある程度の面積をもち、ある程度の明るさ、特定の頻度で点滅するものは、閃光に分類されることもありうる。

必要不可欠 もし取り除いてしまうと、コンテンツの情報あるいは機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。

[まとめ] 達成基準 2.2.2 一時停止、停止、非表示

�画面の一部に動き続ける要素があると、認知や学習に障害のある (注意力の欠如を抱える) ユーザーなどは、動く要素に気を取られて他の部分を読むことができなくなります。こうした動き (点滅、スクロール、自動更新を含む) は、ユーザーが任意で一時停止、停止、または非表示できるようにしましょう。

�または、動きによる演出は5秒以内にとどめましょう。

ガイドライン 2.3 発作の防止

発作を引き起こすようなコンテンツを設計しないこと。

達成基準 2.3.1 3回の閃光、又は閾値以下ウェブページには、どの 1 秒間においても3回を超える閃光を放つものがない、又は閃光が一般閃光閾値及び赤色閃光閾値を下回っている。(レベル A)

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

https://waic.jp/docs/UNDERSTANDING-WCAG20/seizure-does-not-violate.html

[用語] 達成基準 2.3.1 3回の閃光、又は閾値以下

「一般閃光閾値」「赤色閃光閾値」 次のいずれかに該当していれば、連続した閃光、又は急速に変化する画像の連続は、閾値を下回っている (すなわち、コンテンツは基準を満たしている) ことになる: 1. あらゆる1秒間において、 一般閃光及び/又は赤色閃光は3回以下である。もしくは、 2. 一般的な閲覧距離で、同時に生じている閃光が占める領域の合計が、画面上のどの視野10度においても、合計0.006

ステラジアン (画面上の視野10度の25％) よりも多くを占めていない。 ここで: • 一般閃光とは、暗いほうの相対輝度が0.80未満であるときの、最大相対輝度の10%以上の相対輝度の交互の変化のこ

とである。ここでいう「交互の変化」とは、増加した後に減少する、又は減少した後に増加するものを指す。そして、 • 赤色閃光とは、彩度の高い赤色を含んだ交互の遷移のことである。

例外: ホワイトノイズ又は1辺が (典型的な閲覧距離における視野の) 0.1 度未満の市松模様のように、細かくて整っている模様の閃光は、閾値を超えることにはならない。

[まとめ] 達成基準 2.3.1 3回の閃光、又は閾値以下

�閃光によって、ユーザーが光過敏性発作を引き起こす恐れがあります。細かな閾値はありますが、基本的には、1秒間に3回を超える閃光を伴ったユーザーインターフェースやコンテンツ表現は避けましょう。 ✓ウェブコンテンツは、ユーザーが自由にズームできたりするので、制作時の想定で閾値以下のつ

もりでも、実際の利用シーンでは閾値を超えてしまうこともあります。

�動画の埋め込みなどで、閃光による演出が不可避な場合は、「一般閃光閾値」「赤色閃光閾値」を超えないように十分チェックしましょう。

おまけ

非干渉 (non-interference)ここまで見てきた WCAG 2.0 達成基準のうち、以下の4つは「非干渉」に該当する、重要な達成基準です (ご参考 : WCAG2.0 適合要件 ‒ 5.非干渉)。これらの達成基準を満たしていない場合、他の達成基準との間で「干渉」を引き起こしてしまい、利用者がそのウェブページ全体を使用できなくなる恐れがあるため、特に注意が必要です。

1.4.2 音声の制御 ✓ 音声が自動再生されて停止できないと、スクリーンリーダーの音声をかき消してしまい、視覚障害者は何もできなくなります。

2.1.2 キーボードトラップなし ✓ キーボードフォーカスが「脱出不可能」に陥ると、キーボード操作に依存したユーザーは、他の部分にアクセスできなくなります。

2.2.2 一時停止、停止、非表示 ✓ 画面の一部に動き続ける要素があると、認知や学習に障害のある (注意力の欠如を抱える) ユーザーなどは、動く要素に気を取られて他の部分を読むことができなくなります。

2.3.1 3回の閃光、又は閾値以下 ✓ 画面の一部が閃光を放つと、光過敏性発作を起こしたユーザーは他の箇所にアクセスできなくなります。

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

Anyone?

次回予告

• WCAG 2.0 (Level A) を読もう！ • 2.4.1 ブロックスキップ

• 2.4.2 ページタイトル

• 2.4.3 フォーカス順序

• 2.4.4 リンクの目的 (コンテキスト内)

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

利用者がナビゲートしたり、コンテンツを探し出したりするための支援について学びます。

To be continued…