Webアクセシビリティとは、障害の有無や利用環境にかかわらず、Web上の情報や機能を利用できるようにする考え方です。
音声が突然流れる、キーボード操作が部品の中から抜け出せない、動く表示を止められないといった状態は、利用者が必要な情報へ進む操作を妨げます。
非干渉は、ページ内の一部の技術やコンテンツが、残りの情報や機能まで利用できなくする事態を防ぐための考え方です。
Webサイトに一切の変化を起こさないという意味ではありません。
変化を利用者が予測でき、必要に応じて止められ、元の操作へ戻れるように設計することが実務の出発点です。
WCAG 2.2における非干渉
WCAG 2.2の適合要件5「非干渉」では、アクセシビリティを支援しない方法や適合しない方法で技術を使っていても、その技術がページの残りの部分へのアクセスを妨げないことを求めています。
さらに、適合のために依存していない技術を有効にした場合、無効にした場合、利用環境が対応していない場合にも、ページ全体が適合要件を満たし続ける必要があります。
この位置づけを理解すると、「ポップアップを減らせば非干渉になる」といった単純な話ではないことがわかります。
ページの一部に問題があっても残りを使えるか、利用者が操作を止めたり抜けたりできるかを、ページ全体で確かめる必要があります。
全コンテンツに適用される4つの達成基準
WCAG 2.2では、満たさないコンテンツがページ全体の利用を妨げる可能性があるため、次の4項目を、適合のために依存していないコンテンツにも適用します。
| 達成基準 | 防ぎたい妨害 | 確認の要点 |
|---|---|---|
| 1.4.2 音声の制御 | 自動再生の音声が読み上げや集中を妨げる | 3秒を超えて自動再生される音声には、一時停止か停止、またはシステム音量とは独立した音量調整を用意する |
| 2.1.2 キーボードトラップなし | キーボードのフォーカスが部品から抜けられない | キーボードで入った部品から、キーボードだけで出られることを確かめる |
| 2.2.2 一時停止、停止、非表示 | 動きや自動更新が読み取りと操作を妨げる | 条件に該当する動き、点滅、スクロール、自動更新を止めるか隠せるようにする |
| 2.3.1 3回の閃光、または閾値以下 | 閃光が安全な利用を妨げる | 定められた閃光の基準を超えないことを確認する |
利用を妨げる場面と直し方
音声や動画が自動で始まる
スクリーンリーダーは、画面上の文字や操作部品を音声などで伝える支援技術です。
ページを開いた直後に別の音声が流れると、読み上げと重なり、停止ボタンを探す操作まで難しくなることがあります。
基本は、利用者が再生ボタンを押してから音声や動画を始める設計です。
自動再生が必要な場合は、再生箇所の近くに、キーボードでも操作できる一時停止または停止の手段を用意します。
ポップアップが操作を奪う
ポップアップそのものを一律に禁止する必要はありません。
問題になるのは、利用者の意図と関係なく開く、閉じ方がわからない、キーボードで閉じられない、閉じた後に操作位置を見失うといった状態です。
キーボードフォーカスとは、現在どのリンク、ボタン、入力欄を操作しているかを示す位置です。
利用者が開いたダイアログでは、操作対象がわかるようにフォーカスを管理し、閉じた後は元の操作箇所へ戻れるようにします。
入力後にフォーカスが予期せず移動する
フォームへの入力やボタンの操作後に、フォーカスがページの先頭や無関係な場所へ移ると、キーボード利用者は続きの位置を探し直すことになります。
画面の更新が必要な場合でも、移動先を予測できるようにし、次に行う操作がわかる状態を保ちます。
動きや更新を止められない
自動で切り替わる表示、流れ続ける文字、更新され続ける情報は、本文の読み取りや操作部品の発見を妨げることがあります。
動きや更新がほかの内容と並行して続く場合は、該当する条件を確認し、一時停止、停止、非表示、更新頻度の調整といった操作手段を検討します。
設計時に決めておくこと
公開前の修正だけで非干渉を確保しようとすると、動作ごとに判断がばらつきます。
自動再生、ダイアログ、画面更新を設計する段階で、次の点を決めておくと確認しやすくなります。
- 開始のきっかけ：利用者の操作で始めるのか、ページ側で自動的に始めるのか
- 止める手段：一時停止、停止、非表示のうち、どの操作を用意するのか
- フォーカスの移動：動作の前後で、キーボードフォーカスをどこへ移し、どこへ戻すのか
- 非対応時の状態：一部の技術が無効または非対応でも、残りの情報や機能を利用できるか
公開前に行う確認手順
ウェブアクセシビリティ試験では、自動チェックだけでなく、実際の操作による確認を組み合わせます。
非干渉に関係する動作は、次の順序で確認できます。
- ページを読み込む：操作していない音声、動画、ポップアップ、動く表示が始まらないかを確認する
- キーボードだけで移動する：
TabとShift + Tabで順に移動し、どの部品からも抜けられるかを確認する - ダイアログとフォームを操作する：開閉や入力の前後で、フォーカスを見失わないかを確認する
- 読み上げ環境で確認する：自動再生の音声と読み上げが重ならないか、状態の変化後も操作を続けられるかを確認する
- 動きと更新を確認する：対象となる表示を一時停止、停止、非表示にできるかを確認する
- 修正後に再試験する：一つの問題を直したことで、別の操作を妨げていないかを確認する
短時間で見直すためのチェックリスト
- 利用者の操作前に、不要な音声や動画が始まらない
- キーボードで入った部品から、キーボードだけで出られる
- ポップアップを閉じる方法がわかり、閉じた後も操作を続けられる
- 動く表示や自動更新を、必要に応じて止められる
- フォーカスの位置が見え、ページの流れに沿って移動する
- 一部の技術が使えない環境でも、残りの情報や機能へ進める
操作を妨げないページへ
非干渉は、見た目を静かにするための方針ではありません。
利用者が情報を読み、操作を始め、途中で止め、必要な場所へ戻れる状態を保つための要件です。
自動再生、キーボードトラップ、動く表示、フォーカス移動をページ全体で確認し、機能を追加または変更した後にも再試験します。
この確認を繰り返すことで、特定の操作方法に依存せず、必要な情報や機能へ進みやすいWebサイトを保てます。
当社では、ウェブアクセシビリティ対応を支援するUUU ウェブアクセシビリティウィジェットツールを提供しています。
アクセシビリティ向上に取り組む際は、サービスの詳細をご確認ください。