如何使 Twitter Bootstrap 工具提示易于访问？

如您所知，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>

从外观上看主要例子 http://getbootstrap.com/javascript/#tooltips-examples在 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。

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

如果您无法在源中添加隐藏文本，您可以循环遍历工具提示元素来动态添加它。