• 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

Image maps: <area> missing alt, or alt duplicated/meaningless per region.

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 user navigating this old settings-hub graphic by screen reader can't tell privacy settings from notification settings when both regions announce "link" or nothing at all.

How to test

Check every area inside an img usemap: each needs its own specific alt describing its individual destination, not a generic or shared description.

How to fix

Give every area its own specific destination alt. A shared or missing alt makes every region sound identical.

<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 user tabs to "privacy settings" specifically on the settings-hub graphic and opens the right menu on the first try.

Who is affected

Screen reader users navigating this graphic-based settings hub need each clickable region individually named, since the underlying buttons were never rebuilt as real HTML controls.

Learn more

Related scenarios