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>

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

我的问题是，有没有办法将所有三个功能元素结合起来：能否在悬停，触摸和键盘导航时显示工具提示？

提前感谢您的帮助！

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。例如，使用Javascript显示和隐藏额外的文本，方法是将aria-live属性设置为polite（这使得屏幕阅读器读出显示的帮助文本）动态设置元素的内容，或者只是隐藏和显示额外的文本（当问号发生咔嗒声时，它应位于其中带有问号标记的行下方。

如果您决定采用我在上一段中提出的（推荐的）可点击方式，请查看Making clickables accessible。

Answer 2

非常感谢Parham Doustdar，我现在看起来有一些功能可以跨设备和屏幕阅读器完全正常运行。我将以下内容包括在内，以防其他人使用。

“悬停”功能现已删除，用户现在必须单击/触摸/选项卡到工具提示图标以显示/隐藏工具提示文本。

CSS：

.ttipcontainer
{
position: relative;
}

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

.tooltip:focus
{
  border: 1px dotted #000000;
}

.ttiptext
{
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: -999; 
width: 250px;
background-color: #b4e0e0;
font-size: 1em;
}

HTML：

<span class="ttipcontainer">
    <span  class="tooltip" title="tool tip" role="button" tabindex="0" onclick="show('tttext1')">
    (?)
    </span>
    <span class="ttiptext" id="tttext1" style="display:none" aria-live="polite">
    This is the tooltip text
    </span>
</span>

JavaScript（来自：http://www.codeproject.com/Articles/15237/Hide-and-Show-Any-Element）：

  function show(ele) {
         var srcElement = document.getElementById(ele);
         if(srcElement != null) {
       if(srcElement.style.display == "block") {
              srcElement.style.display= 'none';
        }
            else {
                   srcElement.style.display='block';
            }
            return false;
       }
  }

Answer 3

如果您想要键盘导航，则需要以下支持tabindex属性的元素之一：A，AREA，BUTTON，INPUT，OBJECT，SELECT和TEXTAREA。

这个按钮将是你最好的选择。

CSS工具提示，兼具键盘导航功能和触摸屏功能

3 个答案: