Did an “Image Map Missing Alternative Text” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this warning, how it impacts your website’s accessibility, and how to fix it.
About the Image Button Missing Alternative Text Error
What is an image map?
An image map is an image that is divided into different clickable regions using <area> element hotspots that allow user interaction. Typically, the different regions act as links to other web pages. These may be other web pages on your website or pages on a different site.
You can find an example of a clickable image map on W3 Schools. The map on that page uses the following HTML code, which includes a standard image and also an HTML <map> tag which contains <area> tags that are related to sections of the image with coordinates:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>As shown in this example, an image map does not have to be a “map” at all, it can be any photograph or graphic with clickable areas. Besides maps, image maps are frequently used for representations of org charts and street views or real estate virtual tours.
What is alternative text?
Alternative text is a short phrase that is included in HTML image tags and is used to describe the image being displayed on the web page.
Image alternative text, colloquially referred to as “alt text,” is visible to sighted users only if the image fails to load. Otherwise, it can be used to relay the contents of an image to a blind or visually impaired individual using a screen reader or to a search engine that is trying to understand the contents of a web page for search engine optimization purposes.
Read how to add alt text and how to write high-quality alt text for additional information on alternative text on standard images.
How is alternative text for image maps different from alt text for images?
For simple images, alternative text is used almost exclusively to describe the content of that image to screen reader users. It may also be displayed if images don’t load or someone has an image blocker installed. Alt text can be easily added to standard images within the WordPress editor (or a page builder if you’re using one).
For image maps, there are some differences in how alternative text functions. On image maps, you need to have alt text on the image itself, as well as each of the <area> elements. The alt text on the image should describe the context of the image and the alt text on each of the <area> elements should convey the link destination or the action that the link performs.
In most cases, image maps are not created within the standard WordPress editor and will be added to your website either via a third-party plugin or code snippet. Depending upon how the image map was added to your website, it may be more challenging for you to edit the alternative text for the image map than it would be for a standard image.
What does the Image Map Missing Alternative Text error mean?
The Image Map Missing Alternative Text error means that one of the <area> elements within your image map do not have alternative text.
How does Accessibility Checker test for image maps that are missing alternative text?
While auditing your page or post content, Accessibility Checker will look for the presence of <map> tags to see if any image maps are present. If an image map is present, Accessibility Checker will find all <area> tags contained in the <map> tag and check to see if they have alternative text. If the alt attribute is not present or if it is empty, an Image Map Missing Alternative Text error will be flagged.
If the <area> tags all have alt attributes but the main image used for the map does not, this will not flag an error for Image Map Missing Alternative Text. Instead, this will flag a missing or empty alternative text error for the image.
Impact on Accessibility
Why is alternative text for image maps important?
Alternative text, when correctly added to an image map, conveys meaning about what the overall image is about, as well as the functionality of the links of each different section, to people who cannot see it. In order to convey meaning and improve the user experience on the site, alternative text should be an accurate description of the image.
Alternative text for <area> elements in an image map tell someone what action that link will perform. For people who use screen readers, this alternative text is essential. If the alternative text is missing from these elements, their screen reader will most likely read the image file name or the URL of the link, or possibly only say “link” or “clickable graphic.”
If a user has no context for where a linked area on the image map will go or what it will do if clicked or selected, they are unlikely to follow the link. This could reduce the conversions on your website. More importantly, it will likely stop your users from being able to fully engage with your organization or find the information they need on your website.
Relevant WCAG 2.1 Success Criteria
1.1.1 Non-Text Content – Level A
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with a few exceptions.
2.4.4 Link Purpose (In Context) – Level A
The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
2.4.9 Link Purpose (Link Only) – Level AAA
A mechanism is available to allow the purpose of each link to be identified from link text alone, except where the purpose of the link would be ambiguous to users in general.
How to Fix an Image Map Missing Alternative Text Error
What do do (in short)
To fix this error, you will need to add missing alt text to any area tags that do not have alt text. The alt text needs to describe the function of the link contained in the area.
How to find image maps missing alt text on your WordPress post or page
First, install the free Accessibility Checker WordPress plugin.
For any pages or posts that have an Image Map Missing Alternative Text error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Image Map Missing Alternative Text error to see a list of code that caused the warning to be flagged.
In the screenshot above, there are two examples of area tags that do not have appropriate alternative text.
<!-- Example with empty alt text -->
<area shape="rect" coords="34,44,270,350" alt="" href="computer.htm">
<!-- Example with missing alt text -->
<area shape="circle" coords="337,300,44" href="coffee.htm">If this were your website, you would need to find the code where the areas are being added to the post or page and add in descriptive alt text. You may need to flip to the HTML text editor view rather than the visual editor to add the alt text.
Here is an example of the corrected code:
<!-- Corrected code -->
<area shape="rect" coords="34,44,270,350" alt="learn about my computer" href="computer.htm">
<area shape="circle" coords="337,300,44" alt="see what's in my coffee cup" href="coffee.htm">You want to make sure that the alternative text describes the link’s purpose and is meaningful out of context for screen reader users who may not hear every link with all of the surrounding content. Visit our Low-Quality Alternative Text tooltip page for tips on writing meaningful alt text.
What if your website has image maps you cannot find or fix?
Depending upon how image maps are being added to your WordPress website, it is possible that you may encounter missing alt text on image maps that you cannot find or correct.
In that case, you may need to choose a different plugin to create your image maps or will need to contact the provider of the code you have used for assistance. If you encounter accessibility errors that are caused by a third-party plugin or web widget you cannot control, please reference “What to do if a Plugin You’re Using has Accessibility Errors” for ideas on how to proceed.
