WCAG 2.2 ガイドライン「1.4.13 ホバーまたはフォーカス時のコンテンツ」Level AA について
はじめに
WCAG 2.2の「1.4.13 ホバーまたはフォーカス時のコンテンツ」では、マウスホバーやキーボードフォーカスにより追加のコンテンツが表示される場合、そのコンテンツが操作可能で、適切に制御できることを求めています。
1. 要件の概要
追加のコンテンツ（例: ツールチップ、ポップアップ）は以下の条件を満たす必要があります：
a. ホバー可能（Hoverable）
- コンテンツが表示されている間、マウスカーソルを移動しても消えないこと。
b. 消去可能（Dismissible）
- ユーザーが簡単に追加のコンテンツを消去できること（Escキーやクリックで閉じるなど）。
c. 持続可能（Persistent）
- ユーザーが操作するまで、コンテンツが消えないこと。
2. 実装方法
a. ツールチップやポップアップの作成
HTMLとCSSの例
HTML
<div class="tooltip-container">
<button id="infoButton">詳細を見る</button>
<div class="tooltip" role="tooltip" aria-hidden="true" id="tooltipContent">
追加情報がここに表示されます。
</div>
</div>
CSS
.tooltip {
display: none;
position: absolute;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 10px;
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}
.tooltip-container:hover .tooltip,
.tooltip-container:focus-within .tooltip {
display: block;
}
b. コンテンツをキーボードで操作可能にする
JavaScriptでフォーカスと消去を実装
JavaScript
const infoButton = document.getElementById('infoButton');
const tooltipContent = document.getElementById('tooltipContent');
infoButton.addEventListener('focus', () => {
tooltipContent.style.display = 'block';
tooltipContent.setAttribute('aria-hidden', 'false');
});
infoButton.addEventListener('blur', () => {
tooltipContent.style.display = 'none';
tooltipContent.setAttribute('aria-hidden', 'true');
});
c. 消去可能にする方法
ツールチップやポップアップを閉じる機能を提供します。
Escキーで閉じる
JavaScript
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
tooltipContent.style.display = 'none';
tooltipContent.setAttribute('aria-hidden', 'true');
}
});
3. よくある失敗例とその対策
a. ホバーやフォーカスを外すとコンテンツが消える
失敗例
<div class="tooltip-container">
<button>詳細を見る</button>
<div class="tooltip">追加情報</div>
</div>
問題
- ユーザーがコンテンツを操作できず、フォーカスを外すと消えてしまう。
改善策
- ホバー可能で、ユーザーが消去するまで表示を持続させる。
b. 消去機能がない
失敗例
- Escキーやクリックで閉じる機能が実装されていない。
改善策
- Escキーや外部クリックで閉じる仕組みを追加する。
4. アクセシビリティのメリット
a. 視覚障害や運動障害への配慮
- キーボードだけで操作可能。
- マウス操作が難しいユーザーも利用しやすくなります。
b. 直感的な操作性の向上
- コンテンツが突然消えたりすることがないため、ユーザー体験が向上します。
5. テスト方法
a. 手動テスト
- マウスホバーでコンテンツが表示されるか確認。
- キーボード（TabキーやShift+Tab）でコンテンツを操作できるか確認。
- Escキーでコンテンツを消去できるか確認。
b. 自動テストツール
- AxeやWAVEを使用して、ツールチップやポップアップのアクセシビリティを確認。
まとめ
WCAG 2.2の「1.4.13 ホバーまたはフォーカス時のコンテンツ」は、追加コンテンツが視覚的にも操作的にもユーザーフレンドリーであることを求めています。
実装ポイント
- ホバー可能で持続可能な表示を提供する。
- 消去可能な機能を追加する。
- キーボード操作やARIA属性でアクセシビリティを強化する。
これらを実践することで、すべてのユーザーにとって利用しやすいウェブコンテンツを提供できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。