Question

如您所知，Twitter引导程序工具提示无法访问（例如，它们未被屏幕阅读器读取）。要做到这一点，应该做以下事情：

调用tooltip()函数后，生成的文本元素（包含工具提示文本的元素）应该会添加一个新属性：aria-hidden="true"。
原始元素（已调用一个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>

Answer 1

从Bootstrap文档中main example的外观来看，当它们用于本机可聚焦元素时，它们是键盘可访问的（即仅向键盘用户显示），并且它们使用文本内容作为按钮。

因此，如果需要工具提示文本来理解按钮（例如您的示例），那么默认的Bootstrap示例也不会太糟糕。

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

要做一个显示字体图标的按钮，您需要内容和图标，因此有两个元素：

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

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

我还建议实际使用按钮或链接，而不是span或div，因为你不需要使用javascript来模拟onclick等。在这种情况下，你还有一个内联元素（span）包裹在无效HTML的块元素（div）周围。

如果您使用上述技术，屏幕阅读器的用户仍会听到该项目的内容，我认为还没有其他文字可以读出来吗？

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

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

1 个答案: