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

Question

正如你所知，Twitter bootstrap的工具提示并不可访问（即屏幕阅读器无法读取它们）。要实现这一点，需要执行以下操作：

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>

- Parham Doustdar

---

那么这个问题真的是：“如何在不修改源代码的情况下覆盖Twitter Bootstrap中的函数？”我建议更改标题，动机是可访问性（很好），但技术更加面向JavaScript。 - AlastairC

Bootstrap的版本是2.x还是3.x？ - davidkonrad

@AlastairC：问题是，我不确定最好的方法是覆盖函数；这是我正在尝试找出的事情之一：我应该覆盖函数，还是添加事件回调可以解决问题？ - Parham Doustdar

工具提示文本容器绝对不应该有 aria-hidden="true"。这会使屏幕阅读器无法读取它。 - Hrvoje Golcic

Answer 1

从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。

如果您使用上述技术，屏幕阅读器用户仍将听到该项的内容，我认为没有其他要读出的文本？

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

- AlastairC

---

好的，我们的按钮/链接的rel设置为“tooltip”，所以我不能真正地遍历整个应用程序并为每个单独的按钮编写代码。我更喜欢在某个地方编写它，以便于所有应用程序运行。此外，它们没有任何文本，只有glyphicons。由于glyphicons位于<span>标记中，因此我目前所做的是将内部<span>的aria-hidden属性设置为true。但是，正如我所说，我不想为每个单独的工具提示执行此操作--因为它们有很多。 - Parham Doustdar

按钮/链接的内容是字形图标还是工具提示的内容？您能添加一个按钮/链接的HTML渲染源代码示例吗？我认为您可能有比工具提示更大/其他的问题。 - AlastairC

作为对你问题的回答，按钮的内容是字形图标。 - Parham Doustdar

啊，我认为问题是缺乏内容而不是工具提示的可访问性，因此我建议采用不同的技术。 - AlastairC