Tooltips

Javascript widgets often pose additional difficulties for people who rely on assistive technology. It is important to make sure that:

widgets can be accessed and controlled using a keyboard, and
users are properly notified of any content changes on a page.

Bad Example

In the following example each text field displays a Javascript tooltip when you move a mouse cursor over it. These tooltips are inaccessible to people who use a keyboard to navigate websites. In addition, the tooltips (although they appear next to the corresponding text fields) are not properly associated with the fields and thus will be ignored by screen readers.

Good Example

In the following example tooltips can be easily accessed with a keyboard. They are also properly associated with the corresponding text fields, providing additional information to screen reader users.