適用 (対象)
この達成方法は、ポインタホバーでの追加コンテンツの表示をサポートするすべての技術に適用できる。
これは、達成基準 1.4.13: ホバー又はフォーカスで表示されるコンテンツ (十分な達成方法) に関する達成方法である。
解説
利用者がトリガーにポインタを移動する、又はキーボードフォーカスを移動するときに表示される追加コンテンツ (例えばポップアップ) は、利用者がコンテンツを読んで操作する時間を確保するために、表示されたままにしておかなければならず、かつ、利用者が追加コンテンツにポインタを移動させることができなければならない。
画面を拡大するロービジョンの利用者は、一度に画面のごく一部 (ビューポート) しか見られないことがよくある。これは、追加コンテンツが現在のビューポートに完全に表示されず、利用者がその追加コンテンツの上にマウスを移動させないと読むことができない可能性があることを意味する。したがって、ウェブコンテンツ制作者は、ポインタがトリガーから離れて (ほとんど隣接した) 追加コンテンツに移動したときに、追加コンテンツが表示されたままになるようにすべきである。追加コンテンツはまた、フォーカスを移動することなく非表示にできるようにすべきである。その結果、利用者が追加コンテンツに覆われたコンテンツを読むことができる。
事例
例 1: リンクのコンテンツプレビュー
リンクにホバー又はフォーカスするとき、リンクのコンテンツプレビューがそのリンクのすぐ上又は下に表示される。利用者は、追加コンテンツ (ポップアップ) の上にポインタを移動して、追加コンテンツを完全に読むことができる。Esc キーを押すと、追加コンテンツが非表示になる (閉じる)。
例 1 の HTML
<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>
例 1 の CSS
[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;
}
例 1 の JavaScript
// 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';
});