javascript - How can I make Twitter Bootstrap tooltips accessible? - Stack Overflow

admin管理员组

文章数量:1352184

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. 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.

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>

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. 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.

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>

• javascript
• twitter-bootstrap
• accessibility

Share Improve this question Follow edited Oct 19, 2013 at 10:23 Parham Doustdar asked Oct 10, 2013 at 8:11 Parham DoustdarParham Doustdar 2,03933 gold badges2424 silver badges4242 bronze badges 4

• So is this question really: "How do I over ride a function in Twitter Bootstrap?" (without modifying the source code). I would suggest a title change, the motivation is accessibility (great) but the technique is more JavaScript oriented. – AlastairC Commented Oct 10, 2013 at 9:21
• what version of bootstrap? 2.x or 3.x? – davidkonrad Commented Oct 10, 2013 at 11:01
• @AlastairC: The thing is, I'm not sure whether the best way is to override the function; that's one of the things I'm trying to find out: should I override the function, or will adding, say, an event callback solve the problem? – Parham Doustdar Commented Oct 11, 2013 at 7:21
• The tooltip text container should absolutely not have aria-hidden="true". It would hide it from a screen reader – Hrvoje Golcic Commented Feb 13, 2020 at 9:09

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

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>

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

I would also remend 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.

本文标签： javascriptHow can I make Twitter Bootstrap tooltips accessibleStack Overflow