Pautas para web

Introducción

A continuación se describen los términos generales necesarios para implementar una página web con las opciones de accesibilidad necesarias para que sea accesible para todos.

Las principales dificultades de los usuarios con algún tipo de discapacidad suelen ser no poder ver, escuchar, comprender o moverse adecuadamente, además de que pueda darse la posibilidad de que posean equipos antiguos que no soporten todas las tecnologías web actuales, dado que no todas son estándar.

Los cuatro principios en los que se basan estos términos son que la página sea Perceptible, Comprensible, Operable y Robusta.

• Perceptible:  Implica que el contenido de la página pueda ser captado por el usuario, ya sea a simple vista, con un lector de pantalla en voz alta o con un dispositivo adaptado como pueda ser un dispositivo de Línea Braille.
• Comprensible:  Significa que el usuario puede entender el contenido de la web sin dificultades y es capaz de saber cómo utilizarla.
• Operable:  Indica que la página se puede manejar sin dificultades a la hora de interactuar con ella.
• Robusta: Implica que la página web es compatible con tecnologías estándar, permitiendo el acceso al mayor número de personas posibles. Esto incluye tecnologías como las distintas versiones de HTML o el soporte para productos de apoyo, como pueda ser un teclado o un ratón adaptado a personas con movilidad reducida, así como los anteriormente mencionados lectores de pantalla.

Elementos visuales

• El tamaño del texto debe ser como mínimo de 12. Se recomienda usar fuentes para el texto sin elementos Serif (Serifas o gracias). Las fuentes que los tienen pueden confundir a los usuarios con dificultades visuales o para la lectura. Los tipos de fuente más aceptados son Verdana, Trebuchet MS y Tahoma. Estas fuentes poseen sólo serifas útiles (que ayudan a no confundir caracteres entre sí) y tienen una forma regular en todos sus caracteres.
• Además el texto debe ir alineado a la izquierda, el texto justificado desorienta al usuario a la hora de leer. También se recomienda cuidar los espacios entre líneas y párrafos (espaciado entre líneas de 1.5 espacios y de 2.25 entre párrafos como mínimo).
• Es de vital importancia no utilizar tamaños de fuente absolutos, para que al hacer zoom los elementos de la página no se desorganicen y el texto aumente de tamaño adecuadamente.
• El texto y el fondo del mismo deben poseer un contraste adecuado, esto significa que al convertir el color del fondo y de la fuente a escala de grises, el texto se puede leer sin dificultad. Estos valores se cuantifican con el contraste, siendo de 4,5:1 para nivel AA y de 7:1 para el nivel AAA (el más accesible). Puede utilizar la herramienta de WebAIM Color Contrast Checker para verificar los niveles de contraste (enlace en la parte inferior de la página).
• El texto no debe ir nunca sobre una imagen que no sea de color sólido. Esto dificulta enormemente la lectura, no solamente a los usuarios con discapacidad visual sino a cualquiera que acceda a la web.
• Siguiendo con la línea del contraste, la información no debe depender de un único factor. Esto quiere decir que, por ejemplo, si se usa un círculo rojo y otro verde para indicar algo, el usuario con problemas de percepción del color sólo verá dos círculos grises. En este ejemplo lo recomendable sería incluir dentro de cada círculo un texto o una imagen que los distinga.
• El contenido multimedia como vídeo y audio deben ir acompañados por subtítulos que no sólo incluyan los diálogos que contiene, sino también descripciones de sonidos y acciones que se escuchan y realizan en el mismo. También pueden utilizarse transcripciones, esto es, texto incluido en la página (en lugar de dentro del vídeo) que permita al usuario recorrerlo a su ritmo e incluso poder conocer el contenido del elemento multimedia sin abrirlo (esto es útil en casos en los cuales el usuario tiene un equipo desactualizado o poco compatible). En caso de que sea posible, también sería de provecho añadir la transcripción en lengua de signos.
• Las imágenes relevantes al contenido deben ir acompañadas con textos alternativos para que el usuario invidente tenga referencia de qué es esa imagen y qué contiene. Si las imágenes o el contenido multimedia son meramente decorativos, deben implementarse de manera que sean omitidos por las ayudas técnicas (atributo ALT vacío).
• Se recomienda también que se complemente el contenido con imágenes que aporten información, por ejemplo, en una página de venta de coches complementar el enlace a cada modelo con una foto del mismo.
• Los enlaces, botones, controles multimedia y demás elementos interactivos deben tener un área lo suficientemente grande para que el usuario pueda accionarlos de manera adecuada. Estos elementos con un tamaño reducido pueden causar serios problemas en la navegación, especialmente a los usuarios con diversidad funcional motriz.

Diseño de la página

• Las alertas tampoco deben limitarse a un único medio. Lo conveniente es combinar las alertas sonoras con alertas visuales, de este modo hay menos posibilidades de que pasen inadvertidas por los usuarios.
• Es de suma importancia evitar los textos y expresiones complejas para que los usuarios con dificultades cognitivas y para la lectura puedan acceder a la información contenida en la web.
• Los encabezados (elementos <h1>, <h2>…) se deben utilizar para organizar el contenido de la página, nunca para tener un texto grande o vistoso, dado que los usuarios con lector de pantalla utilizan estos elementos como marcadores para desplazarse de un lado a otro de la web.
• Todo elemento de la página que contenga información relevante para el objeto de la misma debe ir pertinentemente etiquetado para que los usuarios que utilicen métodos de lectura alternativos sean capaces de identificar los elementos para orientarse a través de la misma.
• De manera similar, deben etiquetarse los controles de entrada de datos, es decir, los campos cuya función sea introducir datos por parte del usuario como pudiera ser en un formulario de registro o de contacto.
• Se valora mucho que el contenido y el estilo de la página (así como scripts de tecnologías no estándar, como PHP o Javascript) vayan separados. De esta manera, los usuarios con dificultades visuales podrán utilizar sus propias hojas de estilo adaptadas a sus necesidades.
• Se ruega evitar que el usuario tenga que utilizar la barra de desplazamiento horizontal, especialmente al hacer zoom. Para ello existe el Diseño Web Adaptable o Responsive Web Design. Es una técnica que permite que los elementos de la página se organicen y adapten a las dimensiones de la pantalla.
• El diseño y apariencia de la página web deben ser coherentes, es decir, que conserve su organización y apariencia a lo largo de todas sus secciones. Un cambio de este tipo al hacer click en un enlace puede desorientar al usuario, haciéndole creer que ha saltado a otro dominio o forzándole a explorar y reconocer nuevamente la página.
• Debe cuidarse que los elementos de la página no estén condensados y amontonados. Un diseño simple y no recargado permite navegar de manera más rápida y eficiente.
• Los elementos que parpadeen o se desplacen deben incluir un mecanismo para detenerlos (siempre y cuando no sea fundamental para el servicio que se está proporcionando). Aquellos objetos que parpadeen no deben hacerlo más de tres veces por segundo, además de evitar los destellos de color rojo puro, en consideración con los usuarios que sufren epilepsia.
• Las tablas, la numeración y las viñetas en HTML deben utilizarse para representar datos. Una tabla utilizada con fines de diseño visual puede confundir a los usuarios que utilicen lector de pantalla.
• Recuerde añadir la etiqueta de idioma adecuada, no sólo al principio de la página, sino también en los fragmentos de texto que estén en otro idioma. Esto permite al lector de pantalla recitar de manera adecuada el texto.
• Es de vital importancia que, en caso de incorporar un documento a la web en formato PDF, DOCX… estos documentos estén dotados de las opciones de accesibilidad pertinentes. En caso contrario, el usuario tampoco será capaz de leer este contenido.
• Asegúrese de que los enlaces o hipervínculos estén destacados de la manera adecuada (se recomienda subrayarlos, aplicarles un color distinto…) y que no se confundan con otros fragmentos del texto. Los enlaces deben ser descriptivos de hacia dónde llevan (“Acceder a la página de registro”), los enlaces titulados “Haga click aquí” o similares no son válidos. El atributo “TITLE” de los enlaces puede contener información extra acerca de los mismos sin que visualmente el texto de éste sea excesivamente largo.
• Es conveniente también incluir “Migas de pan” o “Breadcrumbs” en la cabecera de la página. Son enlaces encadenados que permiten al usuario retroceder a las páginas anteriores de manera fácil además de permitirle saber dónde se encuentra en todo momento.
• Los usuarios que utilizan lector de pantalla agradecen que exista un índice “Saltar a” para navegar directamente hacia los principales puntos de interés. Estos enlaces se pueden ocultar colocándolos fuera de la pantalla a través de la hoja de estilos para cuidar la estética de la web, pero seguirán estando disponibles para estos usuarios.

Tecnologías de apoyo

Entre estas tecnologías se encuentran teclados y ratones adaptados, trackballs, pantallas táctiles, conmutadores, software de barrido, software y dispositivos con eyetracking, líneas braille, licornios…

Los usuarios que navegan con ayuda de tecnologías de apoyo, como norma general, recorren la página web de manera lineal, es decir, se desplazan por los elementos de uno en uno con la tecla Tabulador o un dispositivo que emula la misma. Existen infinidad de estas tecnologías, y la mayoría funciona emulando el comportamiento de un teclado o de un ratón.

NO DESARROLLE SU PÁGINA WEB PARA SER OPERADA ÚNICAMENTE CON EL RATÓN, DÉ PRIORIDAD (pero no se limite únicamente) AL USO CON TECLADO. TODA ACCIÓN QUE PUEDA REALIZARSE CON EL RATÓN TAMBIÉN DEBE PODER REALIZARSE CON EL TECLADO.

Consideraciones

Utilice el diseño adaptable (Responsive Design) en su página:

Este tipo de diseño permite que la página reorganice los elementos de la web y se adapten a las dimensiones de cualquier pantalla. Esto es positivo en los siguientes aspectos:

• Las páginas se muestran adecuadamente en cualquier dispositivo compatible, ya sea un ordenador, teléfono móvil, Tablet, televisiones…
• Los elementos visuales de la web tienen menos tendencia a desorganizar el diseño, dado que ya se ha fijado su orden en el código incluido en la hoja de estilos.
• El usuario no necesita realizar acciones extras que puedan resultar incómodas, como utilizar el zoom del navegador o las barras de desplazamiento horizontal. Esto es especialmente incómodo y frustrante para cualquier usuario.

Incluya herramientas de personalización en su web, como puedan ser:

• Foco del teclado personalizable.
• Temas (hojas CSS) de alto contraste, escala de grises…
• Opción a página en modo texto (puede favorecer el uso de un lector de pantalla)
• Puntero del ratón de alto contraste.
• Cambiar colores del fondo de la web.
• Cambiar colores de la fuente del texto.
• Cambiar tamaño del texto.
• Proporcionar varias fuentes para que el usuario pueda elegir la más que más se ajuste a sus necesidades.
• Tamaño de los botones/enlaces personalizable.

Prescinda de tecnologías no estándar.

La World Wide Web fue concebida como una tecnología para que la información pudiese visualizarse en cualquier dispositivo, en cualquier país y en cualquier idioma. Con el paso del tiempo se han extendido tecnologías que pueden enriquecer la experiencia en el uso de una página web, sin embargo, cuanto más compleja es una página web, más probabilidad de fallo existe.

Es el caso de tecnologías como Flash, JavaScript, Python, PHP, Shockwave… Estas tecnologías pueden proporcionar nuevas herramientas al usuario a la hora de interactuar con la web, sin embargo requieren software de terceros, el cual debe instalarse, actualizarse y configurarse. Tenga en cuenta que no todos los usuarios poseen los medios económicos o los conocimientos necesarios para acceder a las últimas tecnologías, a esto se le conoce como Barrera Tecnológica y en muchas ocasiones impiden que el usuario pueda acceder a la información en igualdad de condiciones. Utilice HTML5, es retrocompatible, está ampliamente extendido en los navegadores actuales y no requiere de configuración por parte del usuario a la vez que ofrece al usuario una mejor experiencia web.

¡No saque al usuario de su página sin su consentimiento/conocimiento!

Si es necesario redirigir al usuario a otro dominio o página externa, muestre un aviso de a dónde se le está enviando. Las redirecciones repentinas (conocidas como cambio de contexto repentino) provocan frustración y desconfianza en el usuario, además de desorientarlo a la hora de ubicarse o de volver a donde estaba. Recuerde que, siempre que se redirija al usuario a otra web, debe hacerse en una pestaña nueva. De esta forma se facilita al usuario volver a donde estaba antes.