14

I have an input form that contains help tooltips for many of the field labels (usually more meaningful than the example).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

What's the appropriate/standard way to make these tooltips screenreader accessible?

Is it enough to simply embed the tooltip in the (?) element? Should the help text be copied to an alt attribute or something?

Improve this question
10
  • 3
    This seems like an implementation question rather than a User Experience question. Implementation questions like this would be more appropriate on Stack Overflow.
    – elemjay19
    Jan 14, 2015 at 17:56
  • 2
    There appears to be two elements to this question. One belongs on SO (as you point out @norabora), but I think there is an element of "how do I make a tooltip accessible?" that falls into the UX court.
    – Nicholas Pappas
    Jan 14, 2015 at 18:08
  • 1
    @norabora Which part is the implementation question? I put some rough html to better describe the situation but I'm not trying to get help with it. I just find that when screen readers are the UX topic, you can't help but talk about the markup. How would you suggest I improve the question?
    – DanielST
    Jan 14, 2015 at 18:17
  • 1
    @norabora that is a valid point. I think my experience has been more along the lines "very few people" push for this. Sometimes that very few are on the dev side, sometime on the UX side. I'd agree that both more UX folks as well as more Dev folks need to be more aware of accessibility in general.
    – DA01
    Jan 14, 2015 at 18:20
  • 2
    @slicedtoad, I've removed the implementation portion of your question so that the full question won't be closed as off-topic. If you think that portion might be a reasonable answer, feel free to re-post it as an answer to the question.
    – Graham Herrli
    Jan 14, 2015 at 18:26

4 Answers 4

Reset to default
8

Keep in mind that accessibility is more than just accommodating screen readers.

Tooltips can be troublesome in a lot of situations:

  • screen readers (as mentioned)
  • non-mouse access (keyboard, touch devices, etc.)
  • dexterity challenges (the (?) icons are often very small)

In general, you will want to:

  • make the target as large as possible
  • make the tooltip text part of the label for the field or use aria attributes to make the proper logical connections
  • ensure that they can be triggered via onfocus and touch events.

Personally, I always argue against tooltips for use in general forms. If the tooltip information is useful, put it directly on the screen. That's the most accessible way to handle it. If the information isn't useful enough to display directly on screen, then it's probably not useful information to begin with so you can just do away with it.

Improve this answer
4
  • The users are going to be mostly small school librarians who are not known for their computer literacy. If they don't understand something when they first see it, they won't use the software. The idea is to eliminate field ambiguity while keeping everything clean.
    – DanielST
    Jan 14, 2015 at 18:26
  • 2
    @slicedtoad that, to me, says "Do not use tooltips!". If they are not computer literate, then you're going to likely find that they struggle with tooltips as well. In any user test I've seen where tooltips are part of the testing process, they usually fail on some level--typically as being 'invisible' to the user. Eliminate field ambiguity in the label whenever you can.
    – DA01
    Jan 14, 2015 at 18:28
  • 1
    @DA01 okay, maybe I'll ask another question about how to best reduce field ambiguity.
    – DanielST
    Jan 14, 2015 at 18:45
  • @slicedtoad that'd be a good question!
    – DA01
    Jan 14, 2015 at 18:51
2

Including an alt attribute is the first step for supporting accessibility on the web.

WebAIM (Web Accessibility in Mind) has an article with several tips, Designing for Screen Reader Compatibility. Among the many tips is:

Screen readers will read the alternative text of images, if alt text is present. JAWS precedes the alternative text with the word "graphic." If the image is a link, JAWS precedes the alternative text with "graphic link."

W3C has defined a standard called WAI-ARIA, which further enhances accessibility on the web:

WAI-ARIA, the Accessible Rich Internet Applications Suite, defines a way to make Web content and Web applications more accessible to people with disabilities.

You can find the 1.0 spec here: http://www.w3.org/TR/wai-aria/

It goes into further detail on how to improve your markup to define roles for various regions within your site. From the spec's Abstract:

Accessibility of web content requires semantic information about widgets, structures, and behaviors, in order to allow assistive technologies to convey appropriate information to persons with disabilities. This specification provides an ontology of roles, states, and properties that define accessible user interface elements and can be used to improve the accessibility and interoperability of web content and applications. These semantics are designed to allow an author to properly convey user interface behaviors and structural information to assistive technologies in document-level markup.

For example - you can associate a label with a textbox, and place both of those inside a form region. This provides accessibility software with a much better idea of your site's structure, and can communicate that to the user better.

Improve this answer
1
  • 3
    and alt attribute is for images--not form elements.
    – DA01
    Jan 14, 2015 at 18:00
2

The tooltip example given by W3C in this page goes:

<div class="text">
    <label id="tp1-label" for="first">First Name:</label> 
    <input type="text" id="first" name="first" size="20" aria-labelledby="tp1-label" aria-describedby="tp1" aria-required="false" />
    <div id="tp1" class="tooltip" role="tooltip" aria-hidden="true">Your first name is a optional</div>
</div>

This Bootstrap Accessibility plugin page further elaborates:

  1. Add role of Tooltip to tooltip div.
  2. Generate a random id, assign it to the tooltip div, and reference it from the Tooltip element with the ARIA attribute "aria-describedby".
  3. Remove aria-describedby when the tooltip is hidden.
Improve this answer
1

Tooltips may be visible when styles are disabled, so the first thing you want to do disable CSS in your browser and see if the tooltips are visible. One way to do this is with the Web Developer browser extension. Here is it for Chrome and Firefox. You can tab to them and see if they appear. If they are not visible when styles are disabled, make sure that your tooltip can be accessed using the keyboard only. So tab over to it with your keyboard. Does it activate? In addition to this, add a WAVE toolbar to your browser and run WAVE on your page. This will show you accessibility errors you may have missed. Here are links for Wave for Firefox and Wave for Chrome.

Improve this answer
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.