WCAG 2.2「1.4.13 ホバーまたはフォーカス時のコンテンツ」Level AAの要件と実装ポイント

greeden

2年前

low angle photograph of black metal tower satellite during daytime

マウスポインターを重ねたり、キーボードでフォーカスを移したりしたときに、ツールチップやポップアップが表示されることがあります。WCAG 2.2の達成基準「1.4.13 ホバーまたはフォーカス時のコンテンツ」は、このような追加コンテンツを利用者が読み、必要に応じて閉じられる状態にするための基準です。

確認の軸は、追加コンテンツが消去可能、ホバー可能、持続可能であることです。表示するだけでなく、マウスとキーボードのどちらでも内容を失わずに扱えるかを確かめます。

達成基準1.4.13が対象にする表示

ホバーとは、マウスポインターを要素の上に置く操作です。フォーカスとは、Tabキーなどでリンクやボタンが操作対象になっている状態を指します。

これらの操作をきっかけに現れる説明、ツールチップ、ポップアップなどが追加コンテンツです。利用者が内容を読もうとしている途中で表示が消えたり、表示がほかの情報を覆ったまま閉じられなかったりすると、情報の確認や操作が難しくなります。

消去可能、ホバー可能、持続可能の違い

達成基準1.4.13の三つの要件
要件	意味	確認例
消去可能	追加コンテンツを利用者の操作で閉じられること。	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 ウェブアクセシビリティを提供しています。アクセシビリティ向上を検討している方は、サービスの詳細をご覧ください。