WCAG 2.2 ガイドライン「2.2.2 一時停止、停止、非表示」Level A について
はじめに
WCAG 2.2の「2.2.2 一時停止、停止、非表示」では、動く、点滅する、スクロールする、または自動的に更新される情報がユーザーの体験を妨げないようにするための基準を定めています。この基準は、動的なコンテンツが閲覧や理解を妨げないようにすることを目的としています。
1. 適用範囲
この基準は、以下の種類のコンテンツに適用されます：
- 動く（Moving）: スクロールするテキストやアニメーション。
- 点滅する（Blinking）: 点滅するテキストや画像。
- スクロールする（Scrolling）: 自動的にスクロールする情報。
- 自動更新（Auto-updating）: リアルタイムで更新されるデータ。
2. 要件
以下のすべての条件を満たす必要があります：
- ユーザーがコンテンツを**一時停止（Pause）または停止（Stop）**できる仕組みを提供する。
- ユーザーがコンテンツを**非表示（Hide）**にできる仕組みを提供する。
- 点滅やアニメーションが5秒以内で終了する場合は、この基準を満たすと見なされます。
3. 実装方法
a. 動的コンテンツの一時停止と再開
スクロールするテキストの制御
HTML
<div id="scrollingText">
自動スクロールするテキストがここに表示されます。
</div>
<button id="pauseButton">一時停止</button>
<button id="resumeButton">再開</button>
JavaScript
const scrollingText = document.getElementById('scrollingText');
let scrollInterval;
function startScrolling() {
scrollInterval = setInterval(() => {
scrollingText.scrollLeft += 1; // 横方向にスクロール
}, 50);
}
function pauseScrolling() {
clearInterval(scrollInterval);
}
document.getElementById('pauseButton').addEventListener('click', pauseScrolling);
document.getElementById('resumeButton').addEventListener('click', startScrolling);
startScrolling(); // 初期状態でスクロール開始
b. 点滅するコンテンツの制御
5秒以内に点滅を終了するアニメーション
HTML
<div id="blinkingText">点滅するテキスト</div>
CSS
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
#blinkingText {
animation: blink 1s infinite;
}
JavaScript
setTimeout(() => {
document.getElementById('blinkingText').style.animation = 'none';
}, 5000); // 5秒後に点滅を停止
c. 自動更新コンテンツの制御
更新の一時停止
HTML
<div id="autoUpdateContent">リアルタイム更新コンテンツ</div>
<button id="stopUpdate">更新を停止</button>
<button id="startUpdate">更新を再開</button>
JavaScript
const autoUpdateContent = document.getElementById('autoUpdateContent');
let updateInterval;
function startUpdating() {
updateInterval = setInterval(() => {
autoUpdateContent.textContent = `更新時間: ${new Date().toLocaleTimeString()}`;
}, 1000);
}
function stopUpdating() {
clearInterval(updateInterval);
}
document.getElementById('stopUpdate').addEventListener('click', stopUpdating);
document.getElementById('startUpdate').addEventListener('click', startUpdating);
startUpdating(); // 初期状態で更新開始
4. よくある失敗例とその改善策
a. 点滅するコンテンツに停止機能がない
失敗例
<div style="text-decoration: blink;">点滅するテキスト</div>
改善策
- CSSまたはJavaScriptで停止機能を追加し、点滅を5秒以内に制御します。
b. 自動スクロールが停止できない
失敗例
<marquee>このテキストは停止できません。</marquee>
改善策
- JavaScriptでスクロールの一時停止と再開を制御します。
5. アクセシビリティのメリット
a. 視覚的な快適性の向上
- 点滅や動きが強調されすぎると、ユーザーに不快感を与えたり、てんかん発作を引き起こす可能性があります。これを防ぐことで安全性が向上します。
b. 読みやすさの向上
- 一時停止や停止機能を提供することで、ユーザーがコンテンツを落ち着いて読めるようになります。
6. テスト方法
a. 手動テスト
- スクロール、点滅、自動更新のコンテンツを確認。
- 一時停止、停止、再開機能が正しく動作するか確認。
- 点滅が5秒以内に終了するか確認。
b. 自動テストツール
- WAVEやAxeなどのツールを使用して動的コンテンツのアクセシビリティをチェック。
まとめ
WCAG 2.2の「2.2.2 一時停止、停止、非表示」は、動的なコンテンツがユーザーの操作や理解を妨げないように設計することを求めています。
実装ポイント
- 一時停止や停止機能を提供する。
- 点滅するコンテンツは5秒以内に終了させる。
- ユーザーが非表示にできる機能を提供する。
これらを実践することで、すべてのユーザーにとって安全で快適なウェブ体験を提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。