4

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

我最近一直在向网站表单添加工具提示。最初，我关心的是当鼠标用户将鼠标悬停在工具提示图标上时（在我的例子中只是“（？）”）使这些工作。我正在使用以下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>

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

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

提前感谢您的帮助！

4

3 回答 3

2

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

这个元素不需要（不一定）是可聚焦的。但是，您确实需要通知用户它存在。例如：

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

这样，当用户通过文本字段时，他的屏幕阅读器会宣布“名字 (?)”，这会提醒他探索问号，然后按 Enter 键（屏幕阅读器会宣布一个项目是“可点击的”，如果它有一个 onclick 事件）。

我会建议你停止只使用 CSS 来展示这个项目，并加入一些 Javascript。例如，使用 Javascript 显示和隐藏额外的文本，方法是动态设置 aria-live 属性设置为礼貌的元素的内容（这使屏幕阅读器读出显示的帮助文本），或者只是隐藏和显示额外的文本（应该就在有问号的行下方）当点击问号时。

如果您决定采用我在上一段中介绍的（推荐的）可点击方法，请查看使可点击可访问。

于 2013-08-13T06:44:35.587 回答
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;
       }
  }
于 2013-08-13T16:18:04.273 回答
-1

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

按钮将是您最好的选择。

于 2013-08-12T23:18:58.313 回答