Web Development Recipes, 2nd Edition

Recipe 5

Creating 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:

We’ll construct a library ...