您可能知道,Twitter引导工具提示无法访问(I.E.它们不被屏幕阅读器读取).要做到这一点,应该做以下事情：
>在调用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>
解决方法
从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)包裹着一个块元素(div)也是无效的HTML.
