WEB ACCESSIBILITY · HOVER / FOCUS

CSS Hover / Focus Content Lab

HoverやFocusで現れる内容を、Esc・ポインター・Tabで確認する。

01

LIVE INTERACTION TEST

追加コンテンツを、自分で操作する

WCAG 1.4.130 / 3 TESTED

対象から内容へ移動すると、途中で消えてしまいます。

BEFORE
● ● ●content.local / glossaryINTERACTION PREVIEW
NORTH/FORM

Hover・Tab・Escで、表示と消え方を確かめてください。

READY

対象へHoverするか、「対象へフォーカス」を押してください。

02

THREE CONDITIONS

HoverやFocusで現れる内容を、3つの条件で確認する

01

Dismissible

ポインターやFocusを動かさずに消せる

追加内容が元の情報を隠す場合は、Escなどで閉じられるようにします。入力エラーの表示、または他の内容を隠さない場合は例外です。

02

Hoverable

追加内容の上へポインターを移動できる

大きなポインターや拡大表示でも、内容を隠さず読めるようにします。

03

Persistent

読み終える前に勝手に消さない

対象から離れる、Escで閉じる、情報が無効になるまで表示を保ちます。

03

CSS + SMALL JS

HoverとFocusを、同じ領域で扱う

.popup-pair[data-open="true"] .popup {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.popup::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 18px;
}

JavaScriptでHover・Focus・Escの状態を管理し、CSSの透明なブリッジで対象と追加内容の隙間をつなぎます。コピーボタンから、Esc後の再表示防止まで含む実装例を取得できます。

04

WHAT IS INCLUDED?

対象と例外を分ける

COVERED作者が作る追加コンテンツ

カスタムツールチップ、サブメニュー、Hover Cardなどが対象です。

EXCEPTIONブラウザが表示を制御するもの

HTMLのtitle属性による標準ツールチップなど、作者が表示を変更していないものは例外です。

Hoverだけでなく、Focusでも確認する。

ポインターで表示できる内容は、キーボードFocusでも利用できるようにします。表示できることだけでなく、内容へ移動できるか、Escで閉じられるか、読み終えるまで残るかを一つずつ確認します。

W3C: Understanding SC 1.4.13 ↗