Does each <area> have the correct alt text?

Goal

Ensure that we are providing text alternatives for people who can’t see the icon or image in the <area> element of a image map.

Why this matters

• Assistive technology provides the alternative text to people using screen readers or Braille displays. If you don’t provide alternative text, it reads the file name.
• Browsers provide the alt text to all users if the image doesn’t load. Alt text ensures that a broken or missing image file doesn’t break the usability of the page.

How to implement

• See MDN’s article <map> for implementing an image map.

How to test

Manual testing

1. Right-click and inspect the element in the browser’s developer tools. Ensure that each <map> <area> has an alt attribute and that it’s set to a value.
2. Assuming it does have a value, ensure that the title matches your Writer’s expectations.

Automated testing

• HTML validators might identify <area> elements without valid alt attributes.
• Note that you still have to do manual testing to ensure it’s the correct wording in the alt attribute! Automated testing won’t warn you that you labeled a hockey stick with the alt text “cheese”.