如何使Twitter Bootstrap工具提示可访问？ [英] How can I make Twitter Bootstrap tooltips accessible?

问题描述

您可能知道，Twitter引导工具提示不可访问（即，屏幕阅读器不会读取它们）。为了实现这一点，应该执行以下操作：

As you may know, the Twitter bootstrap tooltips are not accessible (I.E. they are not being read by screen readers). To make that happen, the following things should be done:

1. 调用 tooltip（）函数，则生成的文本元素（包含工具提示文本的元素）应添加一个新属性： aria-hidden = true 。


2. 原始元素（已调用一个 tooltip（））应该为其添加属性： aria- describeby =＃< tooltip-id> ，其中tooltip-id指的是上面刚刚创建的新元素的ID。

1. Upon calling the tooltip() function, the generated text element (the one that contains the text of the tooltip) should get a new attribute added to it: aria-hidden="true".
2. The original element (the one tooltip() has been called on) should get an attribute added to it: aria-describedby="#<tooltip-id>", where tooltip-id refers to the id of the new element that was just created above.

由于Javascript当前的工作方式是使用 .tooltip 类选择所有元素并应用 tooltip（）函数，我想知道如何在不修改 tooltip（）函数源代码的情况下做到这一点。

Since the way the Javascript currently works is selecting all the elements with the .tooltip class and applying the tooltip() function to it, I'm wondering how I can do this without modifying the source code of the tooltip() function.

以下是按钮代码的示例：

Here is an example of the code for a button:

<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文档中，当它们以本地为焦点时，它们可以通过键盘访问（即，仅向键盘用户显示）元素，并且按钮使用文本内容。

From the looks of the main example in the Bootstrap docs they are keyboard accessible (i.e. show to keyboard-only users) when used on natively-focusable elements, and they use text-content for the buttons.

因此，如果需要工具提示文本来理解按钮（例如您的示例），那么默认的Bootstrap示例也不错，因为它们是在创建可访问性问题时使用的。

So the default Bootstrap examples aren't too bad, if the tooltip text were needed to understand the button (like your example) that is when they create an accessibility issue.

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

So the main thing is that the button has no content, so a screen reader won't know what it is to start with. (NB: Some screen readers might fall back to the title if it were a native link or button, but you shouldn't rely on that.)

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

To do a button that shows a font-icon, you need content and the icon, so two elements:

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

然后使用CSS在屏幕外隐藏文本。隐藏的ARIA表示不会读出字体字符。

Then use CSS to hide the text offscreen. The ARIA-hidden means that the font character won't be read out.

我也建议您实际使用按钮或链接，而不是span或div，因为那样您就无需使用JavaScript来模拟onclick等。 ，您还可以将内联元素（span）包裹在也不是有效HTML的块元素（div）上。

I would also recommend actually using a button or link, rather than span or div, as then you don't need to use javascript to simulate onclick etc. In this case, you've also got an inline element (span) wrapped around a block element (div) which isn't valid HTML either.

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

If you use the technique above screen reader users will hear the content of the item anyway, I don't think there is any other text to read out?

如果您不能在其中添加隐藏的文本在源代码中，您可以遍历工具提示元素，动态添加它。

If you can't add the hidden text in the source, you could loop through the tooltip elements adding it dynamically.

这篇关于如何使Twitter Bootstrap工具提示可访问？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！