O'Reilly logo

Web Development Recipes, 2nd Edition by Chris Johnson, Mike Weber, Chris Warren, Brian P. Hogan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Recipe 5Creating and Styling Accessible Tooltips

Problem

We have a page with lots of jargon, and we’ve been asked to build in functionality that lets visitors hover over terms to see their definitions. However, we have to ensure that the functionality can be used with assistive devices such as screen readers, since the page we’re building will be accessed by people with disabilities.

Ingredient

  • jQuery

Solution

With a small amount of CSS, some jQuery, the HTML5 ARIA specification,[12] and only a tiny amount of effort, we can create tooltips that work for everyone. When we’re done we’ll have something that looks like this:

images/accessible_tooltips/definition.png

We’ll construct a library ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required