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 回答