• Success Criterion 1.1.1
  • Conformance level A

Clickable Image Map Regions With No Individual Names

1.1.1 — Non-text Content

Scenario

Setting

A social media platform's settings menu

What’s wrong

The settings hub is one old graphic used as an image map. The Privacy region (<area>) has no alt at all, and the Notifications region has alt="link", which says nothing about where it goes. Each clickable region is a link, so each needs its own text alternative naming its destination (1.1.1).

Watch on YouTube (captions available)

Example 

<img src="settings-hub.png" usemap="#settingsmap" alt="Settings categories">
<map name="settingsmap">
  <area shape="rect" coords="0,0,50,50" href="/privacy">
  <area shape="rect" coords="50,0,100,50" href="/notifications" alt="link">
</map>
<!-- a single settings-hub graphic left over from the 2019 redesign, never rebuilt as real buttons -->

Why it matters

A screen reader user moving through this settings hub may hear an unnamed link (or a file or URL fragment) for Privacy and just "link" for Notifications, so they cannot tell privacy settings from notification settings without guessing.

How to test

Find every <img usemap> and its <map>. Check each <area> that has an href: it must have an alt that names its own destination (for example "Privacy settings"), not a missing alt, an empty alt, or a placeholder like "link" or "click here". In the DevTools accessibility tree each area should appear as a link with a specific name. Also check the <img> itself has an alt describing the whole graphic. Then tab through with a screen reader and confirm each region is announced differently.

How to fix

Give every <area> its own alt that names its destination (H24). A missing alt fails 1.1.1 (F65), and a placeholder like "link" is not a real text alternative (F30). Keep a short alt on the <img> describing the graphic as a whole. Better still, when the hub is next redesigned, replace the image map with real links or buttons.

<img src="settings-hub.png" usemap="#settingsmap" alt="Settings categories">
<map name="settingsmap">
  <area shape="rect" coords="0,0,50,50" href="/privacy" alt="Privacy settings">
  <area shape="rect" coords="50,0,100,50" href="/notifications" alt="Notification settings">
</map>

Outcome

A screen reader user hears something like "Privacy settings, link" and "Notification settings, link", picks the right one, and opens the right menu on the first try.

Who is affected

Screen reader users, and people using voice control or braille, who need each clickable region of the settings graphic to have its own name.

Learn more

Related scenarios