アクセシビリティ対応のツールチップ設計ガイド：WCAG 1.4.13に基づく実践的アプローチ
はじめに：ツールチップのアクセシビリティが重要な理由
ツールチップは、ユーザーインターフェースにおいて補足情報を提供する手段として広く利用されています。しかし、適切に設計されていないツールチップは、視覚障害者やキーボード操作を主とするユーザーにとって大きな障壁となり得ます。特に、公共機関のウェブ担当者、ウェブ制作会社、教育機関のIT担当者、そして法務・コンプライアンス部門の方々にとって、アクセシビリティに配慮したツールチップの設計は不可欠です。
この記事では、WCAG 2.1および2.2の達成基準1.4.13「ホバーまたはフォーカスで表示されるコンテンツ」に基づき、アクセシビリティ対応のツールチップ設計のベストプラクティスを詳しく解説します。
WCAG 1.4.13の概要とツールチップへの適用
達成基準1.4.13の要点
WCAG 2.1および2.2の達成基準1.4.13では、ホバーやフォーカスによって表示される追加コンテンツ（ツールチップやサブメニューなど）に対して、以下の3つの要件を満たすことを求めています。
- 解除可能性（Dismissible）：ユーザーが追加コンテンツを意図的に閉じることができる。
- ホバー可能性（Hoverable）：マウスカーソルを追加コンテンツ上に移動しても、コンテンツが消えない。
- 持続性（Persistent）：ユーザーがコンテンツを閉じるまで、またはホバーやフォーカスが解除されるまで、コンテンツが表示され続ける。
これらの要件は、特に視覚障害者やキーボード操作を主とするユーザーにとって、情報へのアクセス性を確保するために重要です。
アクセシビリティ対応ツールチップの設計原則
1. キーボード操作への対応
ツールチップは、マウス操作だけでなく、キーボード操作でもアクセス可能である必要があります。具体的には、以下の点に留意してください。
- フォーカス時の表示：キーボードで要素にフォーカスが当たった際にも、ツールチップが表示されるようにする。
- Escapeキーでの非表示：ユーザーがEscapeキーを押すことで、ツールチップを閉じることができるようにする。
2. スクリーンリーダーへの対応
スクリーンリーダーを使用するユーザーにとって、ツールチップの内容が適切に読み上げられることが重要です。以下のARIA属性を活用しましょう。
- aria-describedby：ツールチップの内容を、関連する要素に説明として関連付ける。
- role=“tooltip”：ツールチップ要素に適切なロールを指定することで、スクリーンリーダーがその役割を認識できるようにする。
3. 視覚的なデザインとタイミングの配慮
視覚的なデザインや表示タイミングも、アクセシビリティに影響を与えます。
- 表示タイミング：ツールチップが表示されるまでの遅延時間を適切に設定し、ユーザーが意図しない表示を防ぐ。
- 非表示タイミング：ユーザーがツールチップを読み終える前に自動的に消えないようにする。
- 視認性：背景色と文字色のコントラスト比を十分に確保し、視認性を高める。
実装例：アクセシビリティ対応ツールチップのコードサンプル
以下に、アクセシビリティに配慮したツールチップの実装例を示します。
HTML
<button id="tooltip-target" aria-describedby="tooltip">情報</button>
<div id="tooltip" role="tooltip" style="visibility: hidden;">追加情報がここに表示されます。</div>
CSS
#tooltip {
position: absolute;
background-color: #333;
color: #fff;
padding: 8px;
border-radius: 4px;
max-width: 200px;
font-size: 14px;
z-index: 1000;
}
JavaScript
const target = document.getElementById("tooltip-target");
const tooltip = document.getElementById("tooltip");
function showTooltip() {
tooltip.style.visibility = "visible";
}
function hideTooltip() {
tooltip.style.visibility = "hidden";
}
target.addEventListener("focus", showTooltip);
target.addEventListener("blur", hideTooltip);
target.addEventListener("mouseover", showTooltip);
target.addEventListener("mouseout", hideTooltip);
window.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
hideTooltip();
}
});
この実装では、キーボード操作やマウス操作に対応し、Escapeキーでツールチップを閉じることができます。また、ARIA属性を適切に設定することで、スクリーンリーダーへの対応も考慮しています。
よくある課題とその解決策
課題1：title属性の使用
HTMLのtitle属性を使用したツールチップは、表示タイミングの制御やスタイリングが難しく、アクセシビリティの観点から推奨されません。代わりに、カスタムツールチップを実装し、ARIA属性を適切に設定することが望ましいです。
課題2：インタラクティブなコンテンツの含有
ツールチップ内にリンクやボタンなどのインタラクティブな要素を含めることは避けるべきです。必要な場合は、モーダルダイアログなど、より適切なUIコンポーネントを使用しましょう。
課題3：自動的な非表示
ユーザーがツールチップの内容を読み終える前に自動的に非表示になると、情報へのアクセスが妨げられます。ユーザーが明示的にツールチップを閉じるまで表示を維持するように設計しましょう。
まとめ：アクセシビリティ対応ツールチップの実装ポイント
アクセシビリティに配慮したツールチップを実装する際の主なポイントは以下の通りです。
- キーボード操作への対応：フォーカス時の表示、Escapeキーでの非表示。
- スクリーンリーダーへの対応：適切なARIA属性の設定。
- 視覚的なデザイン：十分なコントラスト比、適切な表示・非表示タイミング。
- 非インタラクティブなコンテンツ：ツールチップ内にはインタラクティブな要素を含めない。
これらのポイントを踏まえ、ユーザー全体にとって使いやすいウェブコンテンツの提供を目指しましょう。