Pregúntame por ¿Cómo insertar Imágenes de forma Accesible en la Web?

Cómo insertar imágenes de forma accesible en un sitio web según los requerimientos WCAG 2.0*Por Senadis

Los sitios de Internet requieren ser diseñados y estructurados para asegurar que todos los usuarios puedan entender y usar un sitio Web. Muchas de las características de accesibilidad pueden ser implementadas de una forma sencilla si éstas son planificadas desde el inicio. Solucionar problemas de accesibilidad en un sitio ya construido puede requerir un esfuerzo significativo, especialmente aquellos que no son codificados de una forma apropiada bajo el estándar XHTML y aquellos que cuentan con demasiados contenidos multimedia.

Este documento tiene por objeto entregar información de cómo se deben trabajar las imágenes al momento de crear un sitio web para que sea accesible, y cumpla con los requerimientos de accesibilidad WCAG 2.0 en sus puntos 1.1.1.

En un principio, al observar imágenes en una página Web puede parecer que esta no presenta ningún problema de accesibilidad. El siguiente ejemplo, muestra una página que en principio parece ser accesible, sin embargo, no lo es.

Ejemplo: Web con imágenes sin texto alternativo

Indicaciones sobre cómo insertar imágenes de forma accesible en la web según requerimientos WCAG 2.0

 

 

 

 

 

 

 

 

El código de la página que se ve reflejada en la imagen anterior, tiene la siguiente forma:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”es”>
<head>
</head>
<body>
<body style=”background:#000000″>
<h1>
<span style=”color: #ffffff;”>Alternativas Equivalentes para contenido Visual y Auditivo.</span><br/><br/></h1>
<h3
<span style=”color: #ffffff;”>Ejemplo primera Imagen</span><br/><br/></h3>
<img src=”Manos.png” /><br/><br/>
<h3>
<span style=”color: #ffffff;”>Ejemplo segunda imagen</span><br/><br/></h3>
<img src=”Compus.png” /><br/><br/>
</body>
</html>

Y así lo interpretaría un sistema para personas con discapacidad visual:

Indicaciones sobre como insertar una imagen de forma accesible según requerimientos WCAG 2.0

Para que esta misma página sea accesible, sólo se debe agregar un texto alternativo para cada imagen dentro del código, de esta forma cuando un lector de pantalla pase sobre la imagen, éste podrá leer la explicación alternativa de dicha imagen (marcada con atributo “alt”), también es recomendable utilizar el atributo “title” para explicar el contenido de las imágenes.

La explicación alternativa de las imágenes se debe insertar de la siguiente forma en el código:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml&#8221; xml:lang=”es”>
<head>
</head>
<body>
<body style=”background:#000000″>
<h1>
<span style=”color: #ffffff;”>Alternativas Equivalentes para contenido Visual y Auditivo.</span><br/><br/></h1>
<h3
<span style=”color: #ffffff;”>Ejemplo primera Imagen</span><br/><br/></h3>
<img src=”Manos.png” alt=”Foto de manos entrelazadas con un fondo de un cielo azul” title=”Foto de manos tomadas con fondo de cielo azul” /><br/><br/>
<h3>
<span style=”color: #ffffff;”>Ejemplo segunda imagen</span><br/><br/></h3>
<img src=”Compus.png” alt=”Imagen de computadores en red conectados al mundo en el centro” title=”Foto de computadores en red rodeando la tierra” /><br/><br/>
</body>
</html>

 

De esta forma, si una persona con discapacidad visual ingresa a este sitio con un lector de pantallas, éste lo interpretará de la siguiente forma:

Indicaciones sobre como insertar una imagen de forma accesible según requerimientos WCAG 2.0

 

 

 

 

 

 

 

 

¿Qué pasa si el sitio está administrado por un Content Management System (CMS)?

Cuando los sitios son administrados mediante una plataforma de contenidos y no directamente ingresando código, existen varias alternativas que permiten una forma accesible, eficiente y sencilla de subir imágenes. Una de estas plataformas que es muy utilizada es WordPress, este CMS ha lanzado un plugin para que sus administradores y editores puedan ingresar imágenes que sean accesibles. El plugin de WordPress “SEO Friendly Images” se puede descargar desde la URL: http://wordpress.org/extend/plugins/seo-image/.

Como queda reflejado en el ejemplo de este documento, permitir que las imágenes sean leídas por personas con discapacidad visual y por motores de búsqueda, no tiene una complicación mayor, sobre todo cuando se considera la accesibilidad desde la etapa de planificación de un sitio.

Un mundo más inclusivo hacia una sociedad de información y conocimiento, requiere de un trabajo de todos quienes formamos parte de la construcción de la gran red de redes.

*Fuente: Cristián Echeverría, Coordinador de Tecnologías de la Información del Departamento de Accesibilidad del Servicio Nacional de la Discapacidad, Senadis 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s