9

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>
Parham Doustdar
  • 2,019
  • 3
  • 22
  • 41
  • 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 Oct 10 '13 at 09:21
  • what version of bootstrap? 2.x or 3.x? – davidkonrad Oct 10 '13 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 Oct 11 '13 at 07:21
  • The tooltip text container should absolutely not have `aria-hidden="true"`. It would hide it from a screen reader – Hrvoje Golcic Feb 13 '20 at 09:09

1 Answers1

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

Community
  • 1
  • 1
AlastairC
  • 3,277
  • 21
  • 15
  • Well, our buttons/links have their rel set to `"tooltip"`, so I can't really go through the whole application and write the code for each one separately. I prefer to write it somewhere that will run for all apps. Also, they don't have any text, just glyphicons. Since glyphicons are in `` tags, what I have currently done is to set the `aria-hidden` attribute of the inner `` to `true`. However, as I said, I don't want to have to do this for every single tooltip -- since there are a lot of them. – Parham Doustdar Oct 15 '13 at 14:06
  • Are the contents of the buttons/links glyphicons, or the content of the tooltips? Can you add an example of the HTML rendered source for a button/link please? I think you might have bigger/other issues than the tooltips. – AlastairC Oct 17 '13 at 21:59
  • And as an answer to your question, the contents of the buttons are glyphicons. – Parham Doustdar Oct 19 '13 at 10:26
  • Ah, I think the issue is lack of content rather than the accessibility of the tooltips, so I've suggested a different technique. – AlastairC Oct 19 '13 at 12:59