Accesibilidad: Consejos para evaluar tu web
Testeo de diseño
Tamaño mínimo de texto
Gob.pe recomienda un tamaño mínimo (de 16 puntos) para que el texto sea fácil de leer por cualquier persona, incluyendo aquellas con problemas de visión. Asimismo, la mayoría de buscadores permiten cambiar el tamaño de letra a través de:
- Configuraciones de tamaño de texto (generalmente a través de Opciones o Preferencias).
- Zoom de solo texto.
- Zoom de página (que también amplía imágenes, botones, etc.).
Si la página o el servicio web no están diseñados correctamente, pueden quedar inutilizables al cambiar el tamaño del texto ya que el espacio entre líneas desaparece, se superponen las secciones o partes de las oraciones quedan invisibles.
Características de un correcto incremento en el tamaño del texto
- Que todo el texto se vea más grande.
- Que el texto no desaparezca o se corte.
- Que el texto, imágenes y otro contenido no se superponga.
- Que todos los botones, campos de formulario y otros sean visibles y se puedan utilizar.
- Que no se requiera dar scroll horizontalmente para leer oraciones o párrafos. Se prefiere que, al ampliar letra, todo el texto sea visible.
Comprobaciones
Estos consejos son para la opción zoom de solo texto, no se incluyen consejos de zoom de página porque usualmente no revela las barreras de accesibilidad antes descritas. En el caso del navegador Chrome, se necesita una extensión para tener zoom de solo texto. Si usas otros navegadores:
Con Internet Explorer
- En la barra selecciona “Ver” > “Tamaño del texto” > “Muy grande”. O con el teclado: Alt+V > “Tamaño del texto” > “Muy grande”.
Con Firefox
- Establece el zoom de un solo texto. Desde la barra menú selecciona “Ver” > “Zoom” > “Zoom Text Only”. O con el teclado: Alt+V, Z, T.
- Incrementa el zoom a 200%. Con el teclado (en Windows): Ctrl+[+] (presiona ambas teclas al mismo tiempo).
Formularios, etiquetas y errores
Las etiquetas, el acceso al teclado y dar indicaciones claras son importantes para la accesibilidad de los formularios. Por ejemplo, una etiqueta clara y visible si buscas recolectar datos personales es “nombre y apellidos” o “dirección de correo electrónico”.
Cuando las etiquetas se crean correctamente, las personas pueden interactuar usando solo el teclado, la entrada de voz y los lectores de pantalla. En otras situaciones se puede dar clic en la misma etiqueta, lo que facilita la selección de casillas de verificación.
Para revisarlos, primero ubica todos los formularios en la web ya sea una sola caja de texto (en el caso de un buscador) o un formulario más complejo con campos de texto, botones, casillas de verificación y listas desplegables.
¿Qué debes tener en cuenta?
1. Accesibilidad del teclado
Revisa que todas las cajas del formulario sean accesibles mediante el teclado y verifica que se pueda acceder a todos los elementos si hay una lista desplegable.
2. Etiquetas
- Comprueba que cada formulario tenga una etiqueta asociada usando “label”, “for” e “id”. (Esta es la mejor práctica en la mayoría de los casos).
- Verifica que las etiquetas estén colocadas correctamente.
Esto significa: arriba o a la izquierda de las cajas de texto y listas desplegables.
Y arriba o a la derecha de los botones y casillas de verificación.
3. Campos obligatorios y otras instrucciones
- Asegúrate de que todos los campos obligatorios están claramente indicados. Ten otros indicadores además del color. Por ejemplo, si los campos obligatorios solo se destacan por etiquetas de color rojo, serían desapercibidos por las personas que no ven los diferentes colores.
- Asegúrate de que las instrucciones para completar los formularios estén antes de que sean necesarias.
Por ejemplo, las instrucciones generales deberían estar arriba del formulario.
4. Mensajes de error
En caso de que el usuario rellene un formulario incorrectamente, suele aparecer un mensaje de error. Haz la siguiente prueba: deja algunos campos en blanco o ingresa información con un formato erróneo (por ejemplo, el número de teléfono o correo electrónico) y luego da clic a “enviar” el formulario. Si aparece el mensaje de error asegúrate de que presente las siguientes características:
- El mensaje debe brindar información clara y específica para ayudar a las personas a comprender y corregir su error. Si la equivocación se refiere a un formato (como la fecha o la dirección) asegúrate de que se esté indicando el formato correcto.
- El mensaje de error debe ser fácil de encontrar. Usualmente es mejor que aparezca antes del formulario y no después.
- Comprueba que los campos sin errores aún estén llenos con los datos ingresados. Las personas no deberían reingresar toda la información en el formulario salvo si involucra datos confidenciales (como los números de tarjetas de crédito).
General
Revisión de la estructura básica
Nos enfocamos en una verificación más amplia que te ayude a comprender cómo algunas personas “ven” la página web de manera diferente. A menudo, las webs se diseñan con varias columnas, secciones, colores y otros aspectos visuales que ayudan a organizar la información; sin embargo, las personas con discapacidad visual no distinguen estos detalles. Ellas escuchan la página con un lector de pantalla.
Por ello es necesario evaluar la estructura básica; es decir, mirar la página web sin imágenes, estilos y diseño. Así, cualquiera se dará una primera idea de las posibles barreras de accesibilidad. Los siguientes pasos muestran cómo deshabilitar imágenes, las hojas de estilo (CSS) y otros temas para verificar su estructura.
¿Qué debes tener en cuenta?
- Asegúrate de que el texto tenga sentido al leerla en el orden en que se muestra. Por ejemplo: los títulos están arriba del cuerpo de texto correspondiente.
- Verifica que el texto alternativo provee información adecuada para las imágenes ausentes.
- Revisa que los cuerpos del texto tengan encabezados claros. Cuando el contenido principal y otras secciones tienen buenos títulos, es más fácil para las personas orientarse dentro del contenido de la página.
Comprobación
Con una barra de herramientas para desarrolladores web en Chrome (descargable como extensión)
- Ingresa a la web que vas a evaluar.
- En la extensión selecciona “Images” > “Disable Images”.
- En la extensión selecciona “CSS” > “Disable All Styles”.
- En la extensión selecciona “Miscellaneus” > “Linearize Page”.
Con Internet Explorer
- Ingresa a la web que vas a evaluar.
- En la barra de herramientas, selecciona “Imágenes” > “Remover Imágenes”. O con el teclado Ctrl + Alt + 4, luego baja a “Remover Imágenes”.
- En la barra de herramientas, selecciona “CSS” > “Deshabilitar CSS”. O con el teclado Ctrl + Alt + 3, luego baja a “Disable CSS”.
- En la barra de herramientas, selecciona “Tablas” > “Linearize”. O con el teclado Ctrl + Alt + 7, luego baja a “Linearize”.