Атрибут alt тега <area> — опис ділянки карти зображень

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='120'%3E%3Crect width='300' height='120' fill='%23001b33'/%3E%3Ccircle cx='40' cy='60' r='55' fill='gold'/%3E%3Ccircle cx='180' cy='60' r='14' fill='%23b3b3b3'/%3E%3Ccircle cx='255' cy='60' r='22' fill='%23e0a96d'/%3E%3C/svg%3E"
     width="300" height="120" alt="Сонячна система" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,100,120" href="#sun" alt="Сонце" title="Сонце">
    <area shape="circle" coords="180,60,16" href="#mercury" alt="Меркурій" title="Меркурій">
    <area shape="circle" coords="255,60,24" href="#venus" alt="Венера" title="Венера">
</map>

HTML

<p class="head">1. Карта працює — але тексту зон не видно ніде</p>
<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='160'%3E%3Crect%20width='400'%20height='160'%20fill='%23eef3fb'/%3E%3Crect%20x='0'%20y='0'%20width='140'%20height='160'%20fill='%232f6fd0'%20opacity='.35'/%3E%3Ccircle%20cx='230'%20cy='80'%20r='55'%20fill='%2372b043'%20opacity='.5'/%3E%3Cpolygon%20points='310,150%20390,150%20390,20'%20fill='%23f2b134'%20opacity='.7'/%3E%3C/svg%3E" width="400" height="160" usemap="#m1" alt="Схема з трьома ділянками">
<map name="m1">
  <area shape="rect" coords="0,0,140,160" href="#r" alt="Синя ділянка">
  <area shape="circle" coords="230,80,55" href="#c" alt="Зелене коло">
  <area shape="poly" coords="310,150,390,150,390,20" href="#p" alt="Жовтий трикутник">
</map>

<p class="head">2. Зображення не завантажилось: видно alt картинки, alt зон — ні</p>
<img src="zlamana-adresa.png" width="400" height="160" usemap="#m2"
     alt="Схема областей: синя, зелена і жовта ділянки">
<map name="m2">
  <area shape="rect" coords="0,0,140,160" href="#r" alt="Синя ділянка">
  <area shape="circle" coords="230,80,55" href="#c" alt="Зелене коло">
</map>

<p class="head">3. Те саме зображення з порожнім alt — не лишається нічого</p>
<img src="zlamana-adresa.png" width="400" height="160" usemap="#m3" alt="">
<map name="m3">
  <area shape="rect" coords="0,0,140,160" href="#r" alt="Синя ділянка">
</map>

<p class="head">4. Запасний план: ті самі посилання ще й текстом</p>
<ul class="spysok">
  <li><a href="#r">Синя ділянка</a></li>
  <li><a href="#c">Зелене коло</a></li>
  <li><a href="#p">Жовтий трикутник</a></li>
</ul>

CSS

.head {
    margin: 20px 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

img {
    outline: 2px dashed #b9c6d8;
    outline-offset: 3px;
}

/* Обидва правила нижче не спрацюють: area невидима назавжди. */
area {
    display: inline-block !important;
    padding: 4px 8px;
    background: #ffe9e9;
    border: 2px solid #d64545;
}

area::after {
    content: attr(alt);
    color: #c0392b;
}

.spysok {
    max-width: 400px;
    padding: 10px 10px 10px 28px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
    line-height: 1.9;
}