area-alt

<object> elements must have alternate text.

Who might be affected
SR
VC

Description

The <area> element defines a hot-spot region on an image, and it is usually associated with a link. That means that the <area> tag is serving two purposes that require an accessible name: the first one is to define a part of an image and the other is to be used as a link. Both images and links require accessible names for screen readers to parse and read them correctly. So it is only reasonable that the <area> tag that serves these two purposes will require an accessible name as well. The objectives of the accessible name in the context of the <area> are to describe the image for screen readers and to give them an idea of where the link will take them.

Quick Fixes

Provide "object" elements with accessible names
1<map name="map">
2 <!-- Use the "alt" attribute -->
3 <area shape="rect" coords="50,100,150,200"
4 href="https://path/to/another/website"
5 alt="the link name" />
6
7 <!-- Use the "aria-label" attribute -->
8 <area shape="rect" coords="200,100,300,200"
9 href="./path/to/another/page"
10 aria-label="another link name" />
11
12 <!-- Use the "aria-labelledby" attribute -->
13 <area shape="rect" coords="200,100,300,200"
14 href="./path/to/another/page2"
15 aria-labelledby="area-3" />
16</map>
17
18<span id="area-3">I am a label too!</span>
19<img usemap="#map" src="./map.png" alt="a description of the map" />

How Users Are Affected

Users that are dependent on screen readers, or other assistive technology that uses text parsing to convey the content to the user, will not be able to perceive the content.

WCAG Success criteria

This issue might cause elements to fail one or more of the following Success criteria:
1.1.1 Non-text Content (A) | 2.4.4 Link Purpose (In Context) (A) | 4.1.2 Name, Role, Value (A)

Recommended Reading