W3docs
es
Iniciar sesión

Atributo alt de HTML

El atributo alt especifica un texto alternativo que se muestra si el elemento no puede visualizarse. Consulta ejemplos en distintos elementos.

El atributo HTML alt proporciona un texto alternativo para una imagen (o un elemento similar a una imagen). Los lectores de pantalla lo leen en voz alta y se muestra en lugar de la imagen cuando esta no puede cargarse. Esta página explica cómo debe ser un buen texto alternativo, cómo se comporta alt en cada elemento que lo admite y los errores más comunes que hay que evitar.

Puedes usar el atributo alt en los siguientes elementos: <area>, <img> y <input type="image">.

Por qué importa el texto alternativo

El atributo alt cumple tres funciones a la vez:

  • Accesibilidad. Los usuarios de lectores de pantalla no pueden ver la imagen, por lo que el texto alt es la imagen para ellos. Describir el contenido les permite seguir la página. Un alt significativo es lo que hace que una imagen sea accesible en absoluto.
  • Respaldo para imágenes rotas. Si el archivo de imagen no existe, la ruta es incorrecta o la conexión es lenta, el navegador muestra el texto alt en lugar de la imagen en vez de un recuadro vacío. Esto mantiene la página usable.
  • SEO (un beneficio menor). Los motores de búsqueda pueden leer el texto alt para entender qué muestra una imagen, lo que ayuda en la búsqueda de imágenes. Trátalo como un beneficio secundario — escribe alt pensando primero en las personas, no para rellenar palabras clave.
Peligro

Para el elemento <img>, el atributo alt es obligatorio. Omitirlo completamente es una violación de accesibilidad: un lector de pantalla recurrirá a anunciar el nombre del archivo, lo cual rara vez es útil. Un alt="" vacío es una elección deliberada y válida para imágenes decorativas — no es lo mismo que omitir alt.

Cómo escribir un buen texto alternativo

Intenta describir la imagen de la misma forma en que la describirías a alguien que no puede verla, en el contexto del contenido que la rodea.

  • Sé descriptivo y específico, pero conciso — aproximadamente 125 caracteres o menos. Los lectores de pantalla pueden no pausar bien ante textos alternativos muy largos.
  • No empieces con "imagen de" o "foto de". Los lectores de pantalla ya anuncian que es una imagen, por lo que el prefijo es redundante.
  • Transmite la función o el contenido que importa en contexto, no cada detalle visual.
  • Omite el texto alternativo en imágenes puramente decorativas usando alt="" (ver más abajo).

Texto alternativo bueno vs. malo

Para la misma foto de un golden retriever atrapando un frisbee en un parque:

<!-- Bad: vague, redundant prefix, or just the file name -->
<img src="dog.jpg" alt="image" />
<img src="dog.jpg" alt="dog.jpg" />
<img src="dog.jpg" alt="picture of a dog" />

<!-- Good: describes what the image shows, in context -->
<img src="dog.jpg" alt="A golden retriever leaping to catch a frisbee in a park" />

Imágenes decorativas: usa un alt vacío

Si una imagen no aporta información — un separador, un adorno de fondo, un icono junto a un texto que ya dice lo mismo — asígnale un alt="" vacío. Esto indica a los lectores de pantalla que omitan la imagen por completo, en lugar de anunciar un nombre de archivo.

<!-- Decorative divider: nothing meaningful to announce -->
<img src="ornament.png" alt="" />

<!-- Icon next to text that already conveys the meaning -->
<button>
  <img src="trash.svg" alt="" /> Delete
</button>
Información

Recuerda la distinción: alt="" = "esta imagen es decorativa, omítela." Sin alt en absoluto = un error que deja a los usuarios de lectores de pantalla sin ninguna alternativa.

Sintaxis

<img src="photo.jpg" alt="alternative text">
<area alt="alternative text">
<input type="image" alt="button action">

El atributo alt en <area>

En un mapa de imagen, cada <area> en la que se puede hacer clic actúa como un enlace, por lo que su alt debe describir a dónde lleva esa área — igual que escribirías el texto de un enlace. Cada <area> necesita su propio alt diferenciado; reutilizar el mismo valor para destinos distintos impide a los usuarios distinguir las regiones.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>Click on the logo to open a topic:</p>
    <img src="/uploads/media/news_gallery/0001/01/thumb_316_news_gallery_list.jpeg" width="250" height="150" alt="W3docs topic logos" usemap="#blockmap" />
    <map name="blockmap">
      <area shape="circle" coords="50,32,25" alt="HTML logo" href="/uploads/media/book_gallery/0001/01/d450f0358f947dffb3af91195c3002600d74101b.png" />
      <area shape="circle" coords="218,115,25" alt="CSS logo" href="/uploads/media/book_gallery/0001/01/25521e981b34da57c8f51baddc5b76351b855818.png" />
      <area shape="circle" coords="195,32,28" alt="PHP logo" href="/uploads/media/book_gallery/0001/01/4bbee6698c4884f25c46010d61b658dd62d2c04f.png" />
      <area class="homepage" shape="rect" coords="90,90,35,55" alt="W3docs home page" href="https://www.w3docs.com/" />
    </map>
  </body>
</html>
Pruébalo tú mismo »

El atributo alt en <img>

Este es el uso más habitual. Describe lo que muestra la imagen en el contexto de la página. Si la imagen también tiene un pie de foto visible, considera envolverla en <figure> con un <figcaption>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="A young woman smiling at the camera outdoors" width="200" height="185"/>
  </body>
</html>
Pruébalo tú mismo »

El atributo alt en <input type="image">

Un <input type="image"> es un botón de envío gráfico. Aquí el alt debe describir la acción del botón, no la imagen — por ejemplo alt="Submit" o alt="Search" — porque eso es lo que un usuario necesita saber cuando la imagen no se carga. El atributo alt solo es válido en <input> cuando type="image".

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input {
        vertical-align: middle;
      }
    </style>
  </head>
  <body>
    <form action="/form/submit">
      Email:
      <input type="email" name="Email" />
      <input type="image" src="https://i7.pngguru.com/preview/278/823/594/computer-icons-button-clip-art-green-submit-button-png.jpg" alt="Submit" width="60" height="60" />
    </form>
  </body>
</html>
Pruébalo tú mismo »

Práctica

Práctica
¿Cuál es el propósito del atributo 'alt' en HTML?
¿Cuál es el propósito del atributo 'alt' en HTML?

Temas relacionados

Was this page helpful?