Su imagen probablemente no sea decorativa

El atributo alt del elemento img se puede "anular", que es el acto de establecerlo en una cadena vacía en lugar de una descripción de texto. Anular una descripción alternativa significa que no hay información entre las comillas de apertura y cierre. Si hay un espacio vacío, no se considerará nulo:

  
<img alt="" src="/images/cat.jpg" />

  
<img alt=" " src="/images/dog.jpg" />

¿Qué significa "decorativo"?

Anular una imagen indica que solo tiene fines decorativos.

En este contexto, decorativa significa que la imagen no comunica visualmente información que es importante para comprender el propósito de la página o vista, y por qué la imagen se incluye como parte de eso.

Decorativo no significa que la imagen tenga contenido que se considere como decoración.

“

Por ejemplo, un sitio web que vende papel tapiz querrá tener descripciones alternativas para las muestras de papel tapiz:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Otro ejemplo podría ser el sitio web de un museo, donde la presentación de una pieza de su colección podría beneficiarse tanto de una descripción alternativa como de una leyenda:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

¡Asegúrate de que tu descripción alternativa también incluya puntuación!

¿Por qué querrías hacer una imagen decorativa?

La tecnología de asistencia omitirá las imágenes anuladas y no anunciará su presencia. Las razones para querer hacer esto son en su mayoría históricas.

Viejas técnicas de diseño

Las primeras técnicas de desarrollo web se basaban en imágenes para ayudarlas a garantizar un diseño uniforme en diferentes sistemas operativos, navegadores y versiones de navegadores. El ejemplo más común de esto fue un spacer.gif , un píxel transparente de 1×1 que se estiró a diferentes tamaños para colocar el contenido en su lugar.

Esta técnica normalmente usaría muchas imágenes de espaciado para crear un diseño visual. Sin una forma de silenciar su presencia, estas imágenes desordenarían lo que anuncia la tecnología de asistencia y harían que navegar y tomar medidas en el contenido web fuera confuso y lento.

Viejas técnicas de diseño

Antes de que existieran propiedades CSS como box-shadow , los desarrolladores tenían que usar técnicas que cortaban el estilo decorativo para que funcionara con contenido de altura o ancho indeterminados. Esta técnica se denominó escalado de 9 cortes, un término que se refiere a las 9 secciones de contenido que necesitarías crear.

Al igual que las imágenes espaciadoras, la escala de 9 cortes utilizó varias imágenes para crear el efecto visual deseado. Y, al igual que con las imágenes espaciadoras, la única forma de eliminar el desorden que creaban estas imágenes era marcarlas como decorativas.

Anuncios redundantes

Existe el raro escenario en el que una imagen se repite en una página o vista, y sus ubicaciones repetidas no proporcionan ningún contexto adicional. Debe tener cuidado al marcar una imagen como decorativa en esta situación, ya que la falta de un anuncio para una imagen visible puede resultar confuso para alguien con problemas de visión que utiliza un lector de pantalla.

Iconos suplementarios

Los enlaces y botones que usan íconos siempre deben tener un nombre accesible que comunique la funcionalidad. Si el diseño también incorpora un ícono, no es necesario comunicar el diseño del ícono.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Si el componente solo usa un ícono, la imagen en sí debe usarse para crear el nombre accesible:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Tenga en cuenta que una etiqueta de texto visible es la técnica preferida. Una etiqueta de texto visible se puede traducir y comunica el propósito de manera más directa.

Uso Contemporáneo

Las modernas técnicas de estilo y diseño de CSS significan que la ubicación de la imagen ahora es altamente intencional. Esto significa que si se usa una imagen, lo más probable es que necesite una descripción alternativa.

Las descripciones alternativas deben comunicar el propósito de la imagen . Eso incluye el contenido de la imagen, pero también puede incluir la razón por la que se incluye en el contexto de la página o la vista en la que se ha incluido. Esta es una de las razones por las que las descripciones de imágenes alternativas nunca podrán automatizarse por completo.

Otras formas de mostrar imágenes

Hay algunas otras formas de mostrar una imagen en una página o vista. Es importante asegurarse de que se proporcione una descripción alternativa si la imagen contiene contenido significativo , independientemente de la técnica utilizada.

El elemento de la picture

El elemento de la picture no tiene un papel implícito, lo que significa que su presencia no comunica ningún propósito a la tecnología de asistencia. Esto significa que no se puede usar para describir semánticamente la presencia de una "imagen".

El elemento de picture es un contenedor para elementos source e img . Utilice el atributo alt del elemento img para proporcionar una descripción alternativa para el elemento de picture principal.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Imágenes de fondo

Podemos usar CSS para declarar una imagen como fondo en un elemento HTML. Esto se usa con mayor frecuencia para agregar una sensación de textura a un diseño.

Sin embargo, otra técnica popular es usar una background-image para colocar una imagen de tal manera que el desarrollador no tenga control sobre el tamaño de la imagen que carga alguien. background-image , combinado con otras propiedades como background-size asegurará que el contenido de un tamaño desconocido se muestre sin romper el diseño.

En un escenario como este, nuestro viejo amigo spacer.gif podría volver a ser útil.

SVG en línea

SVG se puede mostrar mediante un enlace a él a través del atributo src en un elemento img , o colocando el código SVG en línea en la página o vista.

Si está utilizando SVG en línea, debe usar el elemento title (y potencialmente desc ) de SVG en lugar de un atributo alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Experiencia equivalente

En el diseño y desarrollo web moderno, mostrar una imagen es un acto altamente intencional. Las descripciones alternativas nos permiten explicar el contenido de la imagen y, al hacerlo, comunicar por qué vale la pena incluirla .

El hecho de que una imagen muestre algo fantástico no significa que no valga la pena describirlo. Anunciar su presencia garantiza que cualquier persona, independientemente de su capacidad o circunstancia, pueda comprender completamente su experiencia digital.

Lectura adicional en SmashingMag:

• Accesibilidad en Chrome DevTools
• Una guía completa de herramientas de accesibilidad
• Imágenes accesibles para cuando más importan
• SVG accesibles: patrones perfectos para usuarios de lectores de pantalla
• Diseño con movimiento reducido para sensibilidades de movimiento
• Lee más artículos sobre accesibilidad, usabilidad y UX.