¿Cómo hacer mi sitio web accesible?

Estándares

Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.0 cubren un amplio rango de recomendaciones para crear contenido Web más accesible. Seguir estas pautas permite crear un contenido más accesible para un mayor número de personas con discapacidad, incluyendo ceguera y baja visión, sordera y deficiencias auditivas, deficiencias del aprendizaje, limitaciones cognitivas, limitaciones de la movilidad, deficiencias del habla, fotosensitividad y combinaciones de las anteriores. Seguir estas pautas puede a menudo ayudar a que el contenido Web sea más usable para cualquier tipo de usuario.

Los criterios de conformidad de las WCAG 2.0 están escritos como enunciados verificables no específicos de ninguna tecnología. En documentos separados se proporcionan niveles de orientación sobre cómo satisfacer los criterios de conformidad en tecnologías concretas, así como información general acerca de cómo interpretar los criterios de conformidad. Para acceder a una introducción y a enlaces a material técnico y educativo, diríjase a la Visión general de las Pautas de Accesibilidad para el Contenido Web (WCAG).

Las WCAG 2.0 suceden a las Pautas de Accesibilidad para el Contenido Web (WCAG) 1.0 [WCAG10], que fueron publicadas como Recomendación del W3C en mayo de 1999. Aunque es posible cumplir con las WCAG 1.0 o con las WCAG 2.0 (o con ambas), el W3C recomienda que los contenidos nuevos o actualizados sigan las WCAG 2.0. El W3C también recomienda que las políticas de accesibilidad web hagan referencia a las WCAG 2.0.

Buenas Prácticas para los gestores de contenido:

¿Cómo tomar consciencia de la Accesibilidad de mi sitio?

Subir contenido debe ser una actividad consciente y activa, no sólo un mero ejercicio de actualizar y rellenar contenido de la web.

Chile en 2007 asume el desafío de alcanzar el nivel AA de la W3C.

¿Pero que significa esto?

Las normas de accesibilidad buscan proveer el acceso universal al contenido sin discriminación, definiendo discapacidad sólo en el caso en que el entorno no permite a una persona con capacidades reducidas ejercer el normal uso de dicha información. Por ejemplo, alguien que se mueve en silla de ruedas y debe acceder a un edificio es discapacitada de acceder si el edificio no cuenta con una rampa o accesos preferentes para personas de capacidad motora reducida. Pero en el caso que el edificio si cuente con esa insfraestructura, la discapacidad desaparece y el individuo en cuestión deja de percibir el obstáculo.

Lo mismo sucede con la información contenida en los sitios web. Ella debe ser universal, es el sitio web el que impone o no la limitante.

Una visión real – Navegar con lector de pantalla

ESTE DEBE SER NUESTRO PRIMER EJERCICIO

Para tener una visión real de tu estado, lo primero que se debe hacer es instalar un lector de pantalla y navegar con él tu sitio web. Sólo así se podrá tener una visión clara de las facilidades o dificultades que tiene una persona con capacidad reducida al ingresar a tu web.

Buenas prácticas en la publicación del contenido:

Algunos tips muy útiles a la hora de gestionar la información

IMÁGENES: Las imágenes deben ser subidas agregando valores como el alt y la descripción. Son estos valores los que permiten que los usuarios que navegan utilizando navegadores de pantalla, puedan “leer” el contenido de la imagen. Estos valores deben ser acordes a la imagen: no sirve de nada que una imagen tenga un alt asignado que diga IMG_3456. Ese valor no significa nada para quien ve a través de un navegador de pantalla.

Descripciones precisas permitirán a personas en situación de discapacidad visual, conocer el contenido de la imagen.

Los mismo que sucede con imágenes de botones, banner, afiches, etc. Todos ellos deben tener valores correctamente asignados o poseer un texto alternativo (y claramente declarado como tal) que informe los mismo que la misma imagen.

Ejemplo:

Imagen con valores incorrectos

file_20140522151138Esta imagen de la Presidenta tiene el siguiente valor asignado: alt=”file_20140522151138″ width=”300″ height=”224″

El valor alt=”file_20140522151138″ no significa nada para quien utiliza el lector de pantalla.

La imagen debe ser publicada con valores que identifiquen su contenido para que sean accesibles y descriptivos para todos los visitantes.

Imagen con valores correctos:

Presidenta Bachelet. En el discurso del primero de mayo del 2015

Visualmente es la misma imagen, pero los valores asignados son muy distintos:

alt=”Presidenta Bachelet. En el discurso del 21 de mayo del 2015″

Estos valores son correctos a la hora de hacer nuestro contenido accesible a todos.

VIDEOS MULTIMEDIA: Los videos multimedia para que sean accesibles deben ser operables con la interfaz del teclado. Deben poseer subtítulos sincronizados. La utilización de un interprete de lenguaje de señas es un “extra” muy importante, aunque no es parte de los puntos evaluados del nivel AA W3C.

Además otro punto de la norma expone la necesidad de tener un texto alternativo al video (texto que hable de su contenido) y audio descripción sincronizado del video.

Ejemplo de video:

ENLACES: Los enlaces deben ser presentar valores acordes a su función. Por ejemplo un botón que es una imagen para descargar un documento o certificado, no puede tener un alt asignado el valor “Boton2”; este valor no permite comprender su función.

A su vez si nuestra página de tramites online tiene la url: http://www.suweb.cl/?page_id=198 esa url no da referencia al contenido y el lector de pantalla sólo leerá el valor sin dar mayores pistas del destino del enlace.

Imagen del programa de contraste y su funcionamientoCONTRASTE: El contraste mínimo esta normado también y se debe tener en cuenta al crear cualquier contenido para la web, sea este en imagen o texto. Se deben evitar tonos claros en textos sobre fondos claros, o texto oscuro sobre fondos oscuros. Además de textos blancos sobre fondos rojos, ellos arrojarán siempre error en este punto de la norma. (Los logos del gobierno de Chile poseen texto blanco sobre fondo rojo)

Descarga sofware medidor de contraste

DESTELLOS: Se debe evitar la subida de videos con destellos fuertes o imágenes que contengan cambios bruscos en los colores. Estos cambios pueden ocasionar ataques de epilepsia.

Ver software medidor de destellos

Buenas Prácticas para los programadores de sitios web

En el caso de utilizar gestores de contenido como wordpress, importa mucho la elección correcta de la template a utilizar. Algunas mas que otras pueden ser más accesibles, permitiendo el sitio sea Operable y Robusto en su contenido y su código.

OPERABLE: El contenido del sitio debe ser operable a través del teclado. Es común encontrar dificultades en los accesos a los submenús a través del teclado. Slider o carruseles de imágenes también sueles ser una trampa. Hay sitios que poseen secciones completas que no pueden ser leídas por el software o lector de pantalla.

TEXTO VALOR VARIABLE: El texto debe ser definido en la plantilla de estilo CSS como un valor variable (Ej: font-size=110% font-size=90em) y no como un valor fijo (Ej: font-size=14px font-size=12pt)

FOCO VISIBLE: El foco del teclado debe ser visible en todo el contenido donde se posa.

CAMPOS DE TEXTO: En los formularios, tan importantes en los sitios web debemos velar porque ellos tengan asociados valores acorde a cada uno de ellos y, está demás decirlo, que sea operable por teclado. No sirve de nada llegar a un campo de texto que esté en blanco y no tenga asociado, por ejemplo, el valor “Nombre”.

caja de twitter

SIN TRAMPAS: ¡Sí, trampas! En ciertos sitios podemos encontrar trampas al utilizar los lectores de pantalla. Por ejemplo una trampa muy común es la caja de twitter, una vez que se entra en ella, se deben hacer innumerables TAB para poder salir.

Una conocida y utilizada trampa es la caja de twitter, que se transforma en una interminable lista de información de la cual es muy engorroso salir.

En otros sitio se pueden ver también trampas en la correcta navegación lógica del sitio web. Para comprobar el estado de nuestro sitio se recomienda un simple ejercicio:

Activar un lector de pantalla y navegar sólo utilizando tecla Tab –> y las teclas de dirección.

Existen otros tantos puntos que deben ser abordados por el área TI. Para conocer el estado del código del sitio web, se recomienda visitar http://validator.w3.org/

¿Qué debemos evitar?

Además de las recomendaciones anteriores, debemos tener en cuenta que existen tecnologías que no son accesibles. A continuación una lista de elementos o acciones que es “mejor no usar”:

Pop-up: Interrumpen las acciones normales de un usuario al ingresar a un sitio web.

Video o sonidos que se reproduzcan automáticamente: Esto puede ser un gran traba para alguien que debe tener su concentración puesta en escuchar el lector de pantalla y debe escuchar además esta grabación.

Enlaces a nuevos sitios o contextos sin previo aviso: Se debe evitar la utilización de banner, enlaces o menús que se dirijan a un nuevo sitio y este cambio no haya sido anunciado. ¿Por qué esto es importante? porque sería similar a entrar a un edificio en el centro de la capital y de repente y sin previo aviso al entrar por la puerta nos encontramos en la playa, sin saber que paso y sin poder regresar.

Evitar flash: Si bien desde hace un tiempo flash se puede exportar a HTML5, aún así sigue siendo un contenido que no puede ser indexado ni por buscadores ni por los lectores de pantalla.

Carruseles de noticias no operables: Existen carruseles de noticias que pueden operados por teclado; uno ingresa sin problemas a ellos y el foco del teclado no asume ni salta a otra posición hasta que el usuario lo quiera. Todos los demás carruseles, tanto los que no se pueden operar con el teclado y/o no respetan el tiempo del usuario.