Mejorando la experiencia del usuario web para personas con problemas de visión

Question

Estaba escuchando un recent episode of Hanselminutes donde Scott Hanselman hablaba de accesibilidad en aplicaciones web y me hizo pensar en la accesibilidad en mis propias aplicaciones.

Todos comprendemos la importancia del marcado semántico en nuestras aplicaciones web en lo que respecta a la accesibilidad, pero ¿qué ocurre con otras mejoras simples que se pueden realizar para mejorar la experiencia del usuario para usuarios con discapacidad?

En el episodio, hubo una serie de veces en que me di una palmada en la frente y dije: "¡Por supuesto! ¿Por qué no he hecho eso?" En particular, Scott habló sobre un sitio web que colocó un enlace oculto en la parte superior de una página web que decía "saltar al contenido principal". El enlace solo será visible para las personas que usen lectores de pantalla y permitirá que su lector de pantalla salte los menús y otro contenido secundario. Es una mejora tan obvia, pero es fácil no pensar en ello.

La accesibilidad y la experiencia general del usuario son más que simplemente crear XHTML válido y llamarlo por día.

¿Cuáles son algunos de tus simples trucos para mejorar la experiencia del usuario para personas con problemas de visión?

Answer 1

Salida Fangs

Fangs es una herramienta en el navegador para Firefox que emula lo que un lector de pantalla “ve” al visitar una página web. Su función es simple: generar una transcripción de lo que un lector de pantalla leerá a un usuario cuando se visite una página web. Es una herramienta útil para analizar rápidamente si ha estructurado su contenido de manera efectiva para que sea comprensible y utilizable por personas con problemas de visión, sin forzarlo a aprender a usar (y comprar) una aplicación de lector de pantalla como JAWS o Windows Eyes.

Answer 2

El mayor problema con los lectores de pantalla suele ser tablas para colocar cosas en su página. Los lectores de pantalla no pueden manejarlos realmente. Coloca cosas en div's en tu html y ponlas en un orden razonable. Luego, coloca los div's en tu página con css. Use tablas para mostrar contenido que debe estar en una tabla.

Answer 3

"Visión deteriorada" incluye daltonismo. Solía ​​trabajar con alguien que no podía distinguir el rojo del verde demasiado bien, por lo que cualquier aplicación que utilizara una interfaz de estilo de semáforo era muy difícil para él. En la industria en la que estábamos trabajando, las alertas en filas estaban codificadas por colores, por lo que otra forma de visualización era útil para él, como una columna adicional en la fila con el texto del tipo de alerta ("emergencia", "advertencia", etc.)

Answer 4

El código para muchas páginas web se estructura como:

1. Cabecera
2. de navegación superior
3. navegación hacia la izquierda
4. contenido
5. pie de página

Cuando estructurado de esta manera, luego, el enlace oculto para "Saltar al contenido principal" es bene ficial. Sin embargo, con el diseño CSS, es posible que pueda volver a ordenar esto para que usted tiene:

1. contenido
2. Cabecera
3. de navegación superior
4. navegación hacia la izquierda
5. pie de página

Usted luego use CSS y flotantes para mover estos diferentes elementos en la pantalla para que la página se vea como usted quiere.

La principal ventaja de estructurar una página web de esta manera es que si el navegador no es compatible con CSS, entonces el contenido está primero en la página.Además de los lectores de pantalla, esto es beneficioso para dispositivos móviles y arañas de motor de búsqueda.

Answer 5

Para las personas con deficiencia visual parcial debemos asegurarnos de que el texto no sea excesivamente pequeño y contrasta sustancialmente el color de fondo. También debemos asegurarnos de que el texto pueda redimensionarse usando unidades de tamaño relativo como em en lugar de unidades absolutas como px (aunque, en mi opinión, esto se está convirtiendo en un problema menor ya que los navegadores están cada vez más a favor del zooming sobre el cambio de tamaño del texto).

Para los usuarios de lectores de pantalla, es útil tener una buena idea de la manera en que los lectores de pantalla se usan actualmente. El siguiente artículo presenta pautas basadas en observaciones de personas ciegas que navegan por la web usando lectores de pantalla; Es un poco fuera de fecha ahora, pero le da una buena idea de lo que va a ayudar a los usuarios de lectores de pantalla, y lo que no:

http://redish.net/content/papers/interactions.html

Además, la Fundación Americana para los ciegos tienen una section of their website dedicated to advice for web developers on how to cater for vision impaired users.

Además de los impedidos visuales, debemos considerar a las personas con discapacidades que les impiden usar un mouse, y también a aquellos con discapacidades neurológicas. Si alguien puede proporcionar recursos para dar consejos sobre cómo atender a esas personas, sería genial. Sólo

Answer 6

Ha sido un tiempo desde que he estado en un trabajo donde tuvimos que cumplir con la Sección 508, pero aquí es lo que recuerdo que no ha sido tocado por los otros carteles ...

1. usa tablas para datos. No use tablas para el diseño si puede evitarlo.
2. Al usar tablas para datos, los encabezados de sus columnas deben anidarse en etiquetas TH y debe usar atributos de título y alcance. Las etiquetas de la tabla deben usar el atributo de resumen.
3. Todas las imágenes deben tener un valor para el atributo alt que describe lo que está sucediendo en la imagen y si la imagen no sirve para nada (es una imagen shim o algo similar), entonces el atributo alt debe establecerse en cadena vacía.
4. Intenta usar un lector de texto a voz y/o navega solo a través del teclado y/o apaga las hojas de estilo. Creo que debes comprar JAWS, pero estoy seguro de que hay lectores de pantalla gratis. Necesita experimentar un sitio a través de un lector de pantalla para comprender realmente cuán difícil es navegar la mayoría de las páginas web sin las indicaciones que interpretan los lectores de pantalla.

Answer 7

Crear páginas accesibles es algo que es difícil de pensar si nunca lo ha hecho. Sin embargo, una vez que aprende los conceptos básicos, es muy fácil hacerlo en el 95% de los casos. Yo sobre todo a repetir lo que otros han dicho, pero:

1. Sólo use tablas para datos tabulares
2. Asegúrese de que utiliza las herramientas semánticas a su disposición a través de HTML. Esto significa usar TH con un atributo de alcance. Utilice <em> en lugar de <i> y <fuerte> en lugar de b >. Utilice acrónimo y abreviatura etiquetas. Use listas de definiciones. Puedo ampliar estas cosas si alguien lo desea.

3. Una de las cosas más importantes es utilizar la etiqueta etiqueta en los campos de entrada. Por cada campo de entrada, botón de radio, casilla de verificación y entrada de texto que debe tener:

   < label for = "nombre de usuario"> Nombre de usuario: </label> < entrada name = "nombre de usuario" />

4. agregar un " omita la navegación "u" skip to navigation "dependiendo de dónde se encuentren grandes fragmentos de texto. Si está trabajando en un sitio del gobierno, esto debería ser una segunda naturaleza que todo lo que está creando le permite omitir la información repetitiva.

5. No utilice los colores para enfatizar.

6. Asegúrese de que todo el texto se pueda cambiar de tamaño. Esto significa que no uses "px" en tu CSS.

7. Volveré a enfatizar esto: crear páginas semánticas. Use H etiquetas para sus títulos. Utilice ul/li para la navegación.

8. Utilice la atributo alt en todas las imágenes. Si tienes un espaciador gif ... bueno ... no lo hagas. De lo contrario, explica de qué se trata la imagen y cuál es su significado para el contenido al que está asociada. no use "una tabla" como su etiqueta alt. Utilice la "Tabla de finanzas de YTD: $ 5,000 Q1, $ 4,000 Q2, $ 8,000 Q3" o algo similar.

9. proporcionan subtítulos o transcripciones de todos los componentes de audio y vídeo

La clave aquí es proporcionar a las personas con deficiencias visuales, auditivas y motor impedimentos la misma experiencia que las personas con capacidades físicas estándar. Si no puede tabular en un campo, un lector de pantalla tampoco puede. Si no puede hacer clic en el texto junto a una casilla de verificación para seleccionarlo, el lector de pantalla no sabe que el texto está relacionado con la casilla de verificación.

Debería ver con frecuencia su sitio sin hojas de estilo (ctrl-shift-s si tiene Firefox y Web Developer Toolbar) para ver si la página tiene sentido. Si no tiene sentido para usted como persona vidente, no tendrá sentido para alguien que use un lector de pantalla.