マウスポインターを重ねたり、キーボードでフォーカスを移したりしたときに、ツールチップやポップアップが表示されることがあります。WCAG 2.2の達成基準「1.4.13 ホバーまたはフォーカス時のコンテンツ」は、このような追加コンテンツを利用者が読み、必要に応じて閉じられる状態にするための基準です。
確認の軸は、追加コンテンツが消去可能、ホバー可能、持続可能であることです。表示するだけでなく、マウスとキーボードのどちらでも内容を失わずに扱えるかを確かめます。
達成基準1.4.13が対象にする表示
ホバーとは、マウスポインターを要素の上に置く操作です。フォーカスとは、Tabキーなどでリンクやボタンが操作対象になっている状態を指します。
これらの操作をきっかけに現れる説明、ツールチップ、ポップアップなどが追加コンテンツです。利用者が内容を読もうとしている途中で表示が消えたり、表示がほかの情報を覆ったまま閉じられなかったりすると、情報の確認や操作が難しくなります。
消去可能、ホバー可能、持続可能の違い
| 要件 | 意味 | 確認例 |
|---|---|---|
| 消去可能 | 追加コンテンツを利用者の操作で閉じられること。 | Escapeキーなどで非表示にできるか。 |
| ホバー可能 | 表示された追加コンテンツへポインターを移しても、途中で消えないこと。 | トリガーからツールチップへポインターを移して内容を読めるか。 |
| 持続可能 | 利用者が内容を確認している間に、追加コンテンツが勝手に消えないこと。 | 表示のきっかけとなるホバーやフォーカスが続いている間、表示を保てるか。 |
「持続可能」は、追加コンテンツを画面に固定し続けるという意味ではありません。利用者が読む時間を奪わず、閉じる操作やホバー、フォーカスの変化に応じて一貫して表示を制御することが目的です。
ツールチップ実装の基本
マウスとキーボードで同じ内容を表示する
表示のきっかけとなる要素には、キーボードでフォーカスできるボタンを使います。追加情報にはツールチップの役割を設定し、初期状態を非表示にします。
<div class="tooltip-container">
<button
id="infoButton"
type="button"
aria-describedby="tooltipContent"
>
詳細を見る
</button>
<div
id="tooltipContent"
class="tooltip"
role="tooltip"
aria-hidden="true"
>
追加情報がここに表示されます。
</div>
</div>CSSでは、表示状態と見た目が食い違わないように、aria-hiddenの値に合わせて表示を切り替えます。
.tooltip[aria-hidden="true"] {
display: none;
}
.tooltip[aria-hidden="false"] {
display: block;
position: absolute;
padding: 10px;
border: 1px solid #ccc;
background-color: #f0f0f0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 10;
}表示状態とEscapeキーを一つの処理で管理する
ホバー、フォーカス、Escapeキーを別々の場当たり的な処理にすると、見た目と属性がずれやすくなります。次の例では、現在の操作状態から表示の要否を一つの関数で決めます。
const container = document.querySelector('.tooltip-container');
const tooltip = document.getElementById('tooltipContent');
let dismissed = false;
function updateTooltip() {
const pointerIsInside = container.matches(':hover');
const focusIsInside = container.contains(document.activeElement);
const shouldShow = !dismissed && (pointerIsInside || focusIsInside);
tooltip.setAttribute('aria-hidden', String(!shouldShow));
}
container.addEventListener('mouseenter', () => {
dismissed = false;
updateTooltip();
});
container.addEventListener('mouseleave', updateTooltip);
container.addEventListener('focusin', () => {
dismissed = false;
updateTooltip();
});
container.addEventListener('focusout', () => {
setTimeout(updateTooltip, 0);
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
dismissed = true;
updateTooltip();
}
});この例は、三つの要件を同じ表示状態で考えるための基本形です。実際の画面では、追加コンテンツの位置、内容、ほかの操作要素との関係に合わせて調整し、マウスとキーボードの両方で確認します。
よくある失敗と修正方針
ホバーだけで表示している
CSSの:hoverだけに依存すると、キーボードでボタンへ移動した利用者には追加情報が表示されません。フォーカスでも同じ情報を確認できるようにします。
フォーカスを外した瞬間に閉じている
blurイベントだけで即座に非表示へ戻すと、追加コンテンツ内に操作要素がある場合に、そこへフォーカスを移す前に閉じる可能性があります。トリガー単体ではなく、追加コンテンツを含む範囲にフォーカスが残っているかを確認して表示を決めます。
閉じる操作を用意していない
追加コンテンツがほかの情報を覆う場合、表示したままでは読み進めにくくなります。Escapeキーなど、ポインターやフォーカスを動かさずに閉じる方法を用意します。
見た目とARIA属性が一致していない
画面では非表示なのにaria-hidden="false"のままになっているなど、表示処理と属性更新が分かれていると状態がずれます。表示と属性を同じ処理で更新し、一つの状態を基準に管理します。
手動テストの手順
- ポインターをトリガーへ重ね、追加コンテンツが表示されることを確認します。
- ポインターを追加コンテンツへ移し、表示が途中で消えないことを確認します。
- Escapeキーを押し、ポインターを動かさなくても閉じられることを確認します。
- Tabキーでトリガーへフォーカスを移し、追加コンテンツが表示されることを確認します。
- Escapeキーで閉じた後、いったんフォーカスを外して戻し、再び表示できることを確認します。
AxeやWAVEなどの自動テストツールも併用し、マークアップや属性に関する指摘を確認します。ホバー中の移動やEscapeキーによる消去など、操作の流れは実際にマウスとキーボードを使って確かめます。
実装前後の確認ポイント
- 追加コンテンツの存在をマウス操作だけに依存させていないか。
- 表示された内容へポインターを移して読めるか。
- 利用者の操作前に内容が消えていないか。
- Escapeキーなどで閉じられるか。
- 表示状態と
aria-hiddenの値が一致しているか。
関連する実装を詳しく確認したい場合は、WCAG 1.4.13に基づくツールチップ設計と、キーボード操作とフォーカス表示の実務ポイントも参考になります。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。アクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。