Problemas típicos de accesibilidad web.
1 Alternativas alcontenido no textual.
Problema: Cuando una imagen (y otros elementos como area, input y applet) actúan como enlace y no se proporciona una descripción, un usuario de lector de pantalla no puede describir el vínculo de una manera clara.
Esto significa que el usuario no puede comprender a donde le llevará dicho enlace ni el porqué.
Solución: Para resolver este problema, HTML incluye el atributo "alt", con el fin de proporcionar un texto equivalente al objeto.
2. Identificar los enlaces.
Problema: Un lector de pantalla puede leer una lista de todos los enlaces en una página. Esto permite al usuario escanear rápidamente enlaces útiles sin tener que leer todo el contenido de la página. Si un vínculo no tiene sentido cuando se lee fuera de contexto, se hace muy difícil navegar por el sitio Web. Por ejemplo, una página web puede incluir la frase "Haga clic aquí para obtener una versión de texto de la página" donde sólo las palabras "Haga clic aquí" son el enlace. El vínculo será leído por un lector de pantalla como "Haga clic aquí" y el usuario tendrá que localizar la frase completa a fin de comprender el significado del enlace.
Solución: La solución es proporcionar títulos a los vínculos, títulos que deberán tener sentido contextual sin necesidad de buscar la frase para interpretarlo.
3 Presentación escalable.
Problema: Algunos sitios web tienen líneas de texto más amplio que la pantalla y algunos lectores de pantalla no lo leen. Cuando el contenido de una página web es más ancho que la ventana del navegador, los usuarios videntes pueden desplazarse horizontalmente para leer la información, aunque esto representa mala usabilidad.
Un problema similar se produce si el área de texto se especifica mediante medidas "absolutas" en lugar de "relativas", pronto aparece el scroll horizontal.
Solución: La solución es usar unidades relativas al tamaño de la fuente (em, ex) y de la ventana (%), así, se mantiene una consistencia estructural y por tanto visual, que, dependiendo de los márgenes de la estructura, no hacen aparecer scroll horizontal en los primeros niveles de zoom.
4 Navegación clara y coherente.
Problema: Problemas generales con los sitios web que no indican de antemano lo que contiene una pantalla. Una persona vidente puede ver fácilmente lo que contiene una pantalla, pero no una persona con problemas de visión que tiene que leer cada uno de los elementos uno por uno. A partir de la experiencia, se puede sospechar que la página contiene más información de lo que parece y no puede ser encontrada.
Solución: La solución a este problema es simple, crear diseños donde cada página tenga un propósito coherente, que pueda explicarse con un título y un breve texto introductorio.
2. Formularios: La clave.
Los Formularios – Usabilidad.
Los formularios se usan desde el comienzo de la civilización. En algún momento de la historia a alguien se le ocurrió contar, documentar y categorizar por ejemplo, el número de vacas que tenía por sexo, nombre, raza y edad.
Lo cierto es que a nadie le gusta rellenar formularios, es una tarea engorrosa y quizá es así porque es una tarea prácticamente ineludible ya no sólo en internet.
El formulario es probablemente, la parte más importante de un sitio Web. Es la única zona de la Web en la que introducimos datos, en muchos casos hasta ahora inexistentes, totalmente nuevos, y por ello relevantes. Es la zona en la que se introducen datos para interactuar y procesar, ya sean éstos palabras clave para buscar, ya sea un formulario de contacto en el que enviamos información a otra persona, un formulario para introducir nuestra identidad en una comunidad, para vender, o bien para hacer trámites, pagos y gestiones para con la e-administración, bancos e instituciones.
Por todo esto la importancia de los formularios es vital, y va en aumento, porque cada día más personas quieren gestionar su propia información. Por ello debemos seguir ciertas pautas, recomendaciones y guías de buenas prácticas para construir formularios que sean naturales, que “dialoguen” con los usuarios en cada contexto y sobre todo sean accesibles para todos sin excepción.
¿Cómo podemos diseñar buenos formularios?
La respuesta correcta es depende. Depende de los objetivos del sitio, las necesidades de los usuarios y el contexto.
A la hora de planificar un formulario web, nuestro objetivo es reducir el número de opciones que el usuario tiene que formalizar, y por tanto, agilizar el tiempo de ejecución.
Por ello, un buen formulario debe ser:
- 1 - Simple y fácil.
- 2 - Claro desde el principio hasta el final.
- 3 - Adecuado al contexto: No puede ser igual el formulario de registro en una comunidad social que en una administración local.
- 4 - Coherente.
3.5 Buenas prácticas de Usabilidad en formularios Web
- Organizar el contenido de los formularios en grupos lógicos ayuda a la visualización y la ejecución.
- Si en un formulario existen varias preguntas de varios temas, es preferible construir tantas páginas como temas haya.
- Estructurar los formularios como una conversación. Las pausas naturales que surgirán entre las preguntas ayudarán a organizar el formulario.
- Si se solicita información que no tiene que ver con el tema del formulario, es preferible solicitarla al final, después de haber completado el formulario.
- Utilizar información visual mínima.
- En los formularios complejos que requieren bastante tiempo, es mejor crear una página introductoria y explicativa.
- Para los formularios secuenciados en múltiples páginas, incluir indicadores de progreso, estado y posición.
3.5.1 Los Formularios – Accesibilidad.
Buenas prácticas de Accesibilidad en formularios Web
1 – Facilitar el acceso a formularios mediante el teclado.
• Tabular el formulario para mejorar su acceso desde el teclado.
• Utilizar "tabindex" para controlar el orden tabular de los campos.
• Acceskey para cada elemento del formulario supone un acceso directo desde el teclado.
2 - Agrupar los elementos comunes y etiquetar adecuadamente cada uno.
• Se debe agrupar la información cuando sea necesario y natural con la etiqueta <fieldset> y el elemento <legend>, así, estructuramos un orden categorizado y natural que tomará la forma de diálogo que buscamos.
• Para cada campo individual debemos usar la etiqueta <label>. La asociación de cada campo y <label> es necesario para indicarle a los lectores de pantalla qué orden seguir.
• En los menús de selección, si son largos, deberemos agruparlos con <optgroup> en una jerarquía clara.
Ejemplos ↓
Gráfico explicativo
