フォーカス又はホバー時のコンテンツをホバー可能、非表示可能及び表示が継続されるようにする

適用 (対象)

この達成方法は、ポインタホバーでの追加コンテンツの表示をサポートするすべての技術に適用できる。

これは、達成基準 1.4.13: ホバー又はフォーカスで表示されるコンテンツ (十分な達成方法) に関する達成方法である。

解説

利用者がトリガーにポインタを移動する、又はキーボードフォーカスを移動するときに表示される追加コンテンツ (例えばポップアップ) は、利用者がコンテンツを読んで操作する時間を確保するために、表示されたままにしておかなければならず、かつ、利用者が追加コンテンツにポインタを移動させることができなければならない。

画面を拡大するロービジョンの利用者は、一度に画面のごく一部 (ビューポート) しか見られないことがよくある。これは、追加コンテンツが現在のビューポートに完全に表示されず、利用者がその追加コンテンツの上にマウスを移動させないと読むことができない可能性があることを意味する。したがって、ウェブコンテンツ制作者は、ポインタがトリガーから離れて (ほとんど隣接した) 追加コンテンツに移動したときに、追加コンテンツが表示されたままになるようにすべきである。追加コンテンツはまた、フォーカスを移動することなく非表示にできるようにすべきである。その結果、利用者が追加コンテンツに覆われたコンテンツを読むことができる。

事例

<p>This is the <a class="a-and-tooltip" id="parent" href="index.html">trigger
<span id="popup" role="tooltip">And this additional text 
gives additional context on the trigger term</span></a>.
Text and popup are <strong>in one link (a)</strong> element.</p>

[role="tooltip"] {
    display: none;
    padding: 0.5em;
    background:white;
    color: black;
    border:solid black 2px;
    width:10em;
}

.a-and-tooltip {
  position: relative;
}

[role="tooltip"] {
    position: absolute;
    left:0;
    top:1em;
}

// trigger and popup inside the same link

var parent = document.getElementById('parent');

parent.onmouseover = function() {
    document.getElementById('popup').style.display = 'block';
}

parent.onmouseout = function() {
    document.getElementById('popup').style.display = 'none';
}

parent.onfocus = function() {
    document.getElementById('popup').style.display = 'block';
}

parent.onblur = function() {
    document.getElementById('popup').style.display = 'none';
}

// hide when ESC is pressed

document.addEventListener('keydown', (e) => {
  if ((e.keyCode || e.which) === 27)
       document.getElementById('popup').style.display = 'none';
});