Атрибут hreflang тега <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" alt="Сонце"
          href="https://en.wikipedia.org/wiki/Sun" hreflang="en">
</map>

HTML

<p class="head">Карта-картинка: дві зони з hreflang</p>
<img class="map" usemap="#lang-map" width="320" height="80"
     alt="Ліва половина веде на українську версію, права — на англійську"
     src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='320'%20height='80'%3E%3Crect%20width='160'%20height='80'%20fill='%232f6fd0'/%3E%3Crect%20x='160'%20width='160'%20height='80'%20fill='%2372b043'/%3E%3C/svg%3E">
<map name="lang-map">
    <area shape="rect" coords="0,0,160,80" href="#uk" hreflang="uk" alt="українська версія">
    <area shape="rect" coords="160,0,320,80" href="#en" hreflang="en-GB" alt="англійська версія">
</map>
<p class="note">Зони працюють, а от показати вміст &lt;area hreflang&gt; неможливо навіть стилями:
    сама зона нічого не малює.</p>

<p class="head">На посиланнях атрибут видно — але тільки через CSS</p>
<ul class="reveal">
    <li><a href="#uk" hreflang="uk">Українська версія</a></li>
    <li><a href="#en" hreflang="en-GB">British English version</a></li>
    <li><a href="#x">Посилання без hreflang</a></li>
</ul>

<p class="head">Те саме як SVG: ділянки-посилання, що масштабуються</p>
<svg class="svgmap" viewBox="0 0 320 80" width="320" height="80" role="group"
     aria-label="Дві ділянки-посилання">
    <a href="#uk"><rect width="160" height="80" fill="#2f6fd0"></rect></a>
    <a href="#en"><rect x="160" width="160" height="80" fill="#72b043"></rect></a>
</svg>

CSS

p {
    margin: 14px 0 6px;
    max-width: 560px;
}

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

.map,
.svgmap {
    display: block;
    outline: 2px dashed #b9c6d8;
    outline-offset: 2px;
}

.svgmap {
    width: 100%;
    max-width: 320px;
    height: auto;
}

.note {
    color: #5a6472;
    font-size: .9em;
}

.reveal {
    max-width: 560px;
    padding-left: 20px;
    line-height: 2;
}

.reveal a[hreflang]::after {
    color: #1b4f9c;
    font-family: ui-monospace, monospace;
    font-size: .85em;
    content: " [hreflang=" attr(hreflang) "]";
}

.reveal a:not([hreflang])::after {
    color: #c0392b;
    font-family: ui-monospace, monospace;
    font-size: .85em;
    content: " [hreflang немає]";
}