4. Interactive WAI-ARIA (Basic)

Activity 6: Accessible Tooltips

Accessible Tooltips

Based on the Tooltip details on the previous page, apply what you have learned to the associated book files to make the tooltips there accessible.

Files for this activity include:

Use the surroundings of the highlighted code on the previous page as a guide to find where the fixes should be applied. Repair the accessibility of the tooltips by applying the highlighted code to the /assets/ik_tooltip.js file.

Note: While we suggest using the highlighted code we’ve provided, you are free to come up with your own solutions provided they produce the expected results listed in the marking rubric below.

Test your updated tooltips with ChromeVox to ensure each element described in the marking rubric below is functioning as suggested.

Requirements

When you have applied your changes and tested to be sure your tooltips function as described, submit the URL to your tooltip.html file on your GitHub Pages site, to the file on the web server you are using to host your copy of the book files, or to a Githack URL.

Grading Rubric

Criteria Points
Tooltips Open:
Tooltips open when their owning element receives keyboard focus or mouseover.
3.0 pts
Tooltips Read:
Tooltips read aloud when their owning element receives keyboard focus or mouseover.
3.0 pts
Tooltips Hides:
Tooltips hide when focus is removed or on mouseout.
2.0 pts
Tooltips Escape:
Tooltips hide when the Esc key is pressed.
2.0 pts
Total Points: 10.0

License

Icon for the Creative Commons Attribution-ShareAlike 4.0 International License

Web Accessibility for Developers by Ryerson University, The Chang School is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book