2

Pois bem, na minha perspectiva o atributo alt não faz o seu trabalho ao ser atribuido na tag area já fiz os meus teste e ele não faz o seu objetivo, que é colocar um texto alternativo quando à imagem não puder ser exibida, por exemplo, no código abaixo existe várias áreas mapeadas na imagem, código de minha autoria.

<!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://pt.wikipedia.org/wiki/Monitor_de_computador" 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://pt.wikipedia.org/wiki/Agenda" 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://pt.wikipedia.org/wiki/Caneta" target="_blank" alt="Caneta">
      <area shape="circle" coords="210, 319, 17" href="https://pt.wikipedia.org/wiki/Rel%C3%B3gio" target="_blank" alt="Relógio">
      <area shape="circle" coords="541, 135, 22" href="https://pt.wikipedia.org/wiki/Laranja" target="_blank" alt="Laranja">
    </map>

</body>
</html>

Caso a imagem acima não puder ser exibida ela vai amostrar o conteúdo do alt que é 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://pt.wikipedia.org/wiki/Monitor_de_computador" 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://pt.wikipedia.org/wiki/Agenda" 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://pt.wikipedia.org/wiki/Caneta" target="_blank" alt="Caneta">
      <area shape="circle" coords="210, 319, 17" href="https://pt.wikipedia.org/wiki/Rel%C3%B3gio" target="_blank" alt="Relógio">
      <area shape="circle" coords="541, 135, 22" href="https://pt.wikipedia.org/wiki/Laranja" target="_blank" alt="Laranja">
    </map>

</body>
</html>

Só que o conteúdo do alt das tags area não são mostradas porque? na minha visão eu vejo o alt dentro das tags area como um nome para cada área dentro de um mapa de imagem que serve apenas como um nome para indentificar aquela área no meio de várias áreas.

1 Resposta 1

2

Talvez não faça sentido pra vc pq vc enxerga com os olhos, mas para quem enxerga com um leitor de tela (screen reader), ou para um crowler de busca, como o Bot do Google, faz sentido sim essa tag, mas só se o seu <area> tiver o atributo href definido.

Veja que o atributo alt é sim um atributo global da tag <area>. No HTML4 ele era obrigatório, mesmo que vazio, já no HTML5 ele só é obrigatório se na <area> vc tiver definido um link com o href

Veja o que diz a documentação:

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.

"No HTML4, esse atributo é obrigatório, mas pode ser a sequência vazia (""). No HTML5, esse atributo é necessário apenas se o atributo href for usado."

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

Resumindo o alt nesse caso é por uma questão semântica e de acessibilidade e não para vc ver com os olhos, o nome das áreas caso a imagem não carregue. É para ajudar os leitores de telas e bots a identificar do que se trata o link definido no href da <area>


Acesso com TAB

Repare essa simulação que eu fiz com a sua própria imagem. Repare que é possível "navegar" pelas <area> utilizando a tecla tab, tanto que quando a área é marcada ela fica com um outline azul. Talvez agora fique mais claro pq o alt é importante do ponto de vista da acessibilidade

inserir a descrição da imagem aqui

2
  • 1
    @leandrodonascimento vc reparou que a tag area não tem uma tag de fechamento tipo </area> isso quer dizer que ela é um elemento vazio, ou void element, então não tem como ter um texto dentro. Além do disso, quando a imagem não carrega o seu mapa fica sem coordenada, pois perde a referencia X/Y já que a imagem não renderizou na tela.
    – hugocsl
    18/09/2019 às 23:05
  • @leandrodonascimento fico feliz em ter ajudado, sucesso ai 💪
    – hugocsl
    19/09/2019 às 9:18

Você deve fazer log-in para responder a esta pergunta.