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

Question

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

1. 在调用tooltip()函数时,生成的文本元素(包含工具提示文本的元素)应该添加一个新属性:aria-hidden="true".
2. 原来的元素(一个tooltip()被称为上)应该得到添加到它的属性:aria-describedby="#<tooltip-id>",其中提示-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文档中的主要示例的外观来看,当它们用于本机可聚焦元素时,它们是键盘可访问的(即仅向键盘用户显示),并且它们使用文本内容作为按钮.

因此,如果需要工具提示文本来理解按钮(如您的示例),那么默认的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)包裹着一个块元素(div)也是无效的HTML.

如果你使用上面的技术,屏幕阅读器的用户会听到项目的内容,我不认为还有其他文字要读出来吗？

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