Does it make sense to use the alt attribute in the tag area?

Question

Does it make sense to use the alt attribute in the tag area?

Asked 5 years, 4 months ago

Viewed 45 times

2

Well, from my perspective the attribute alt does not do its job by being assigned to the tag area I have already done my tests and it does not do its goal, which is to put an alternative text when the image cannot be displayed, for example, in the code below there are several areas mapped in the image, code of my own making.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>&lt;area&gt;</title>
    <style>
      img {
        width: 680px;
        height: 420px;
      }
    </style>
</head>
<body>
  
    <img src="https://images.unsplash.com/photo-1516542076529-1ea3854896f2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ
" usemap="#mapping" alt="Imagem mapeada">
    <map name="mapping">
        <area shape="poly" coords="230, 44, 244, 140, 485, 139, 517, 44" href="https://en.wikipedia.org/wiki/Computer_monitor" target="_blank" alt="Tela do computador">
        <area shape="poly" coords="529, 244, 575, 214, 639, 302, 593, 333" href="https://pt.wikipedia.org/wiki/Smartphone" target="_blank" alt="Telefone inteligente">
      <area shape="poly" coords="23, 248, 65, 184, 62, 179, 61, 143, 64, 142, 65, 173, 70, 180, 173, 235, 169, 240, 166, 239, 124, 304" href="https://en.wikipedia.org/wiki/Diary_(stationery)" target="_blank" alt="Agenda">
      <area shape="poly" coords="138, 176, 147, 163, 216, 95, 222, 102, 199, 125, 197, 123, 152, 169, 141, 177" href="https://en.wikipedia.org/wiki/Pen" target="_blank" alt="Caneta">
      <area shape="circle" coords="210, 319, 17" href="https://en.wikipedia.org/wiki/Clock" target="_blank" alt="Relógio">
      <area shape="circle" coords="541, 135, 22" href="https://en.wikipedia.org/wiki/Orange_(fruit)" target="_blank" alt="Laranja">
    </map>

</body>
</html>

If the above image cannot be displayed it will sample the contents of alt that is Imagem mapeada.

<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>&lt;area&gt;</title>
    <style>
      img {
        width: 680px;
        height: 420px;
      }
    </style>
</head>
<body>
  
    <img src="https://imadges.unsplash.com/photo-1516542076529-1ea3854896f2?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ
" usemap="#mapping" alt="Imagem mapeada">
    <map name="mapping">
        <area shape="poly" coords="230, 44, 244, 140, 485, 139, 517, 44" href="https://en.wikipedia.org/wiki/Computer_monitor" target="_blank" alt="Tela do computador">
        <area shape="poly" coords="529, 244, 575, 214, 639, 302, 593, 333" href="https://pt.wikipedia.org/wiki/Smartphone" target="_blank" alt="Telefone inteligente">
      <area shape="poly" coords="23, 248, 65, 184, 62, 179, 61, 143, 64, 142, 65, 173, 70, 180, 173, 235, 169, 240, 166, 239, 124, 304" href="https://en.wikipedia.org/wiki/Diary_(stationery)" target="_blank" alt="Agenda">
      <area shape="poly" coords="138, 176, 147, 163, 216, 95, 222, 102, 199, 125, 197, 123, 152, 169, 141, 177" href="https://en.wikipedia.org/wiki/Pen" target="_blank" alt="Caneta">
      <area shape="circle" coords="210, 319, 17" href="https://en.wikipedia.org/wiki/Clock" target="_blank" alt="Relógio">
      <area shape="circle" coords="541, 135, 22" href="https://en.wikipedia.org/wiki/Orange_(fruit)" target="_blank" alt="Laranja">
    </map>

</body>
</html>

Only that the contents of alt of tags area are not shown why? in my vision I see the alt within the tags area as a name for each area within an image map that serves only as a name to identify that area in the middle of several areas.

1 answer

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-09-18T22:04:28+00:00

Maybe it doesn’t make sense for you because you see with your eyes, but for those who see with a screen reader (screen Reader), or for a search crowler, like the Google Bot, it does make sense this tag, but only if your <area> has the attribute href defined.

See that attribute alt is a global tag attribute <area>. In HTML4 it was mandatory, even if empty, already in HTML5 it is only required if in <area> you have defined a link with the href

See what the documentation says:

In HTML4, this attribute is required, but may be the Empty string (""). In HTML5, this attribute is required only if the href attribute is used.

"In HTML4, this attribute is required, but can be the empty string (""). In HTML5, this attribute is only required if the href attribute is used."

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/area

Summarizing the alt in this case it is for a semantic and accessibility issue and not for you to see with the eyes, the name of the areas if the image does not click. It is to help screen readers and bots identify what the link defined in href of <area>

Access with TAB

Notice this simulation I did with your own image. Note that it is possible to "navigate" through <area> using the key tab, so much so that when the area is marked she gets a outline blue. Maybe now it becomes clearer alt is important from the point of view of accessibility