Guías Prácticas de Código Accesible

Imágenes Accesibles

¿Por qué son importantes las imágenes?

Las imágenes son un elemento dentro de los sitios web que puede mejorar la accesibilidad, así como disminuirla, y esto se debe a que las imágenes y los gráficos hacen que el contenido sea más agradable y fácil de entender para muchas personas, y en particular para aquellos con discapacidades cognitivas y de aprendizaje, pero estas a su vez deben contar con un texto alternativo o una descripción que permitan que estas también puedan ser accedidas por personas con discapacidad visual.

Dentro de una página web es común ver tres tipos de imágenes, imágenes informativas, imágenes complejas e imágenes decorativas; a continuación se mostrara la forma correcta de utilizar estas imágenes.

Imágenes Informativas

Son imágenes como logos, botones o fotos que tienen una descripción corta.

Fragmento de Código:

<img src="sealColombia.png" alt="Escudo nacional de Colombia ">

Fragmento de Código:

<p>
    <a href="…">
        Disponible en
        <img src="doc.png" alt="Documento Word" > (137KB)
    </a> o en
    <a href="…">
        <img src="pdf.png" alt="PDF"> (137KB)
    </a>
    formato.
</p>

Imágenes Complejas

Estas imágenes deben tener una descripción mayor además del alt.

Ejemplo:

La Universidad Feevale es una universidad privada ubicada en la ciudad de Novo Hamburgo del estado Rio Grande del Sur en Brasil, esta Universidad fue la anfitriona del congreso CAVA 2015 y en la actualidad mantiene buenas relaciones con la Universidad Nacional de Colombia.

Fragmento de Código:

<img src="feevale.png"
     alt="Logo de la Universidad Feevale"
     aria-describedby="description">
[…]
<p id="description">
 La Universidad Feevale es una universidad privada ubicada en la ciudad de Novo Hamburgo del estado Rio Grande del Sur en Brasil, esta Universidad fue la anfitriona del congreso CAVA 2015 y en la actualidad mantiene buenas relaciones con la Universidad Nacional de Colombia.
</p>

Imágenes Decorativas

Estas imágenes se solo para mejorar la apariencia visual de las páginas web, por lo general van implícitas dentro de los css sin embargo también se usan en el código de la página directamente, estas imágenes por lo general cuenta con un texto alternativo vacío alt="".

Code snippet:

<a href="https://www.google.com.co/search?q=anillo&rlz=1C1NHXL_esCO694CO694&oq=anillo&aqs=chrome..69i57j0l5.1443j0j7&sourceid=chrome&ie=UTF-8">
    <img src="ring.jpg" alt="">
    <strong> Anillo</strong>
</a>