8

您可能知道,Twitter 引导工具提示无法访问(即屏幕阅读器不会读取它们)。要做到这一点,应该做以下事情:

  1. 调用该tooltip()函数后,生成的文本元素(包含工具提示文本的元素)应该添加一个新属性:aria-hidden="true".
  2. 原始元素(tooltip()已被调用的元素)应该添加一个属性:aria-describedby="#<tooltip-id>",其中 tooltip-id 指的是刚刚在上面创建的新元素的 id。

由于Javascript当前的工作方式是选择.tooltip类的所有元素并将tooltip()函数应用于它,我想知道如何在不修改tooltip()函数源代码的情况下做到这一点。

下面是一个按钮的代码示例:

<span role="button" rel="tooltip" title="Add Youtube Video" class="fancyPostButton span1" tabindex="0" style="-webkit-user-select: none;padding-top: 10px">
    <div id="fancyPostVideoPicker" class="fancyPostAttachment videoAttachment glyphicons film centerMe">
        <i></i>
    </div>
</span>
4

1 回答 1

7

从 Bootstrap 文档中的主要示例的外观来看,当在本机可聚焦元素上使用时,它们可以通过键盘访问(即显示给仅使用键盘的用户),并且它们使用文本内容作为按钮。

因此,如果需要工具提示文本来理解按钮(如您的示例),那么默认的 Bootstrap 示例并不算太糟糕,这就是它们创建可访问性问题的时候。

所以主要的是按钮没有内容,所以屏幕阅读器不会知道它是从什么开始的。(注意:如果标题是本机链接或按钮,某些屏幕阅读器可能会退回到标题,但您不应该依赖它。)

要制作一个显示字体图标的按钮,您需要内容和图标,因此需要两个元素:

 <a href="target.html">    
    <span class="icon-home" aria-hidden="true"></span>
    <span class="alt">Add YouTube Video</span>  
 </a>

然后使用 CSS 将文本隐藏在屏幕外。ARIA-hidden 意味着字体字符不会被读出。

我还建议实际使用按钮或链接,而不是 span 或 div,因为这样您就不需要使用 javascript 来模拟 onclick 等。在这种情况下,您还有一个内联元素 (span) 包裹在一个块元素 (div) 也不是有效的 HTML。

如果您使用屏幕阅读器上面的技术,用户无论如何都会听到项目的内容,我认为没有其他文本可以读出?

如果您无法在源代码中添加隐藏文本,则可以循环通过工具提示元素动态添加它。

于 2013-10-15T13:31:42.890 回答