html - 键盘可导航和触摸屏功能的 CSS 工具提示

Question

这是我第一次在这里发帖，但多年来我发现这个网站是一个非常宝贵的资料库。

我最近一直在向网站表单添加工具提示。最初，我关心的是当鼠标用户将鼠标悬停在工具提示图标上时(在我的例子中只是“(？)”)让这些工作。我正在使用以下 CSS:

.tooltip
{
border-bottom: 1px dotted #000000;
color: #000000; 
outline: none;
cursor: help; 
text-decoration: none;
position: relative;
}

.tooltip span
{
margin-left: -999em;
position: absolute;
}

.tooltip:hover span, .tooltip:focus span
{
border-radius: 5px 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px;
border: 1px solid #000000; 
font-family: Arial, Helvetica, sans-serif !important;
position: absolute; 
left: 1em; 
top: 2em; 
z-index: 99;
margin-left: 0; 
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}

.ttipcontent
{ 
padding: 0.8em 1em;
}

使用以下 HTML:

<a class="tooltip" href="#">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></a>

这对于预期用途来说效果很好，可以创建用于鼠标/指针设备的悬停工具提示。然而，在触摸屏设备上使用它是一场噩梦。每次单击 (?) 图标时，您当然会被带到页面顶部。

所以我用以下内容替换了 HTML(保持相同的 CSS):

<span class="tooltip">(?)<span class="ttipcontent">This is the tooltip content which will be displayed</span></span>

这现在适用于鼠标/指针设备和触摸屏设备。但是，我无意中删除了用户通过“tab 键”链接来使用键盘导航到工具提示的功能。这带来了可访问性问题。

我的问题是，是否有一种方法可以结合所有三个功能元素:悬停、触摸和键盘导航时显示工具提示的能力？

在此先感谢您的帮助!

Answer 1

您需要意识到，在填写表格时，制表符最适合使用。当我填写表格时，我不希望点击带有问号的按钮。

此元素(不一定)需要可聚焦。但是，您确实需要通知用户它存在。例如:

<label for="mytextbox">First name <span class="tooltip">(?)<span class="ttipcontent">Fill in your real first name</span></span></label>
<input id="mytextbox" />

这样，当用户经过文本字段时，他的屏幕阅读器会读出“名字 (?)”，提醒他查看问号，然后按回车键(屏幕阅读器会读出一个元素是“可点击”，如果它有一个 onclick 事件)。

我会建议您停止仅使用 CSS 来呈现此元素，并加入一些 Javascript。例如，通过将 aria-live 属性设置为 polite(使屏幕阅读器读出显示的帮助文本)动态设置元素的内容，或仅隐藏和显示额外文本，使用 Javascript 显示和隐藏额外文本(它应该就在问号线的下方)当点击问号时。

请看Making clickables accessible如果您决定采用我在上一段中介绍的(推荐的)可点击方法。