La mejora de la web y experiencia de usuario para las personas con dificultades visuales

Question

Yo estaba escuchando a un episodio reciente de Hanselminutes donde Scott Hanselman estaba discutiendo la accesibilidad en las aplicaciones web y me puse a pensar acerca de la accesibilidad en mis propias aplicaciones.

Todos entendemos la importancia de marcado semántico en nuestras aplicaciones web, como se relaciona con la accesibilidad, pero ¿qué otras mejoras sencillas que se pueden hacer para mejorar la experiencia de usuario para los usuarios con discapacidad?

En el episodio, hubo un número de veces en que me abofeteó en la frente y dijo: "¡por supuesto!¿Por qué no he hecho eso?" En particular, Scott habló acerca de un sitio web que coloca un enlace oculto en la parte superior de una página web que dice "saltar al contenido principal".El enlace sólo será visible para las personas que utilizan lectores de pantalla y permite a su lector de pantalla para saltar pasado menús y otros tipos de contenido secundario.Es una mejora evidente sin embargo, es fácil no pensar en ello.

Hay más a la accesibilidad y la experiencia general del usuario que simplemente crear XHTML válido y llamar a un día.

¿Cuáles son algunos de sus sencillos trucos para mejorar la experiencia de usuario para las personas con discapacidad visual?

Answer 1

Echa un vistazo Colmillos

Colmillos es un navegador herramienta para Firefox que emula lo que un lector de pantalla "ve" cuando visita una página Web.Su función es simple:a la salida de un trasunto de lo que un lector de pantalla leerá a un usuario cuando una página Web es visitado.Es una herramienta útil para analizar rápidamente si usted ha estructurado su contenido de manera efectiva, de modo que es comprensible y utilizable por los problemas de visión de los individuos, sin obligarlos a aprender a usar (y comprar) un lector de pantalla de la aplicación, tales como JAWS o Windows Ojos.

Answer 2

La creación de páginas accesibles es algo que es difícil pensar en si nunca lo has hecho.Sin embargo, una vez que aprenda los conceptos básicos es muy fácil de hacer en el 95% de los casos.Voy a ser en su mayoría de repetir lo que otros han dicho, pero:

1. Sólo el uso de tablas para datos tabulares
2. Asegúrese de utilizar las herramientas semánticas disponibles para usted a través de HTML.Esto significa que el uso de TH con un atributo scope.Utilizar <em> en lugar de <i> y <strong> en vez de <b>.El uso de la acrónimo y abbrev las etiquetas.El uso de listas de definición.Puedo expandir estas cosas, si alguien quiere.

3. Una de las cosas más importantes es el uso de la etiqueta etiqueta en los campos de entrada.Para cada campo de entrada, botones de radio, casillas de verificación y textinput usted debe:

   <label for="username">Nombre de usuario:</label><input name="username" />

4. Agregar un "skip navigation" o "saltar a la navegación", dependiendo de donde grandes trozos de texto.Si usted está trabajando en un sitio web del gobierno esto debería ser una segunda naturaleza que todo lo que estamos creando permite omitir información repetitiva.

5. No utilice colores de énfasis.

6. Asegúrese de que todo el texto se puede cambiar de tamaño.Esto prácticamente significa no utilizar "px" en tu css.

7. Voy a volver a insistir en esto: crear semántica de las páginas. Uso H etiquetas para sus títulos.Uso ul/li para la navegación.

8. El uso de la alt atributo en todos imágenes.Si usted tiene un espaciador, gif...bueno..no.En caso contrario, explicar lo que es la imagen y lo que su significado es el contenido que está asociada.no use "gráfico" como su etiqueta alt.El uso de "Gráfico de YTD finanzas:De 5.000 $T1, $4,000 Q2, $8,000 Q3" o algo similar.

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

La clave aquí es proporcionar a aquellas personas con discapacidades visuales, auditivas y motor impedimentos de la misma experiencia como aquellos con el estándar de las capacidades físicas.Si usted no puede desplazarse dentro de un campo, un lector de pantalla no se puede tampoco.Si no puede hacer clic en el texto junto a una casilla de verificación para activarla, el lector de pantalla no conoce el texto está relacionado con la casilla de verificación.

Usted debe con frecuencia ver tu sitio sin hojas de estilo (ctrl-shift-s si tiene Firefox y el Web Developer Toolbar) para ver si la página tiene sentido.Si no tiene sentido para usted, como un vidente individuales, no tendrá sentido para alguien que usa un lector de pantalla.

Answer 3

Ha sido un tiempo desde que he estado en un puesto de trabajo en la que tenía que adherirse a la Sección 508, pero aquí es lo que me recuerda que no ha sido tocado por los otros carteles...

1. Sólo el uso de tablas de datos.No utilice tablas para maquetar, si se puede evitar.
2. Cuando el uso de las tablas de datos, los encabezados de columna deben estar anidados en TH etiquetas y usted debe utilizar el título y el alcance de los atributos.Su tabla de etiquetas debe utilizar el atributo "summary".
3. Las imágenes deben tener un valor para el atributo alt que describe lo que está pasando en la imagen y si la imagen no sirve para nada (es una placa de apoyo de la imagen o algo similar), entonces el atributo alt debe ser ajustado a cadena vacía.
4. Trate de usar un texto para leer el habla y/o navegar sólo a través del teclado y/o desactivar las hojas de estilo.Creo que usted necesita para la compra de MANDÍBULAS, pero estoy seguro de que hay lectores de pantalla gratis por ahí.Usted necesita para disfrutar de un sitio a través de un lector de pantalla para verdaderamente entender lo difícil de la mayoría de las páginas web son para navegar sin las señales que los lectores de pantalla interpretar.

Answer 4

"Personas con dificultades de visión" incluye la ceguera al color.Yo solía trabajar con alguien que no podía distinguir el rojo y el verde demasiado bien, por lo que las aplicaciones que utilizan una de las luces de tráfico estilo de interfaz era muy difícil para él para uso.En la industria estábamos trabajando, alertas en las filas fueron codificadas por color, por lo tanto, otra forma de mostrar que era útil para él, como una columna adicional en la fila con el texto de el tipo de alerta ("emergencia", "advertencia", etc).

Answer 5

El problema más grande con los lectores de pantalla es generalmente de tablas para colocar las cosas en su página.Screenreaders realmente no puede manejar.Poner las cosas en div en el html y ponerlos en un orden sensible.A continuación, la posición del div en la página con css.El uso de tablas para mostrar el contenido que debería estar en una tabla.

Answer 6

El código para muchas páginas web está estructurada como:

1. Encabezado
2. De Navegación Superior
3. De Navegación Izquierdo
4. Contenido
5. Pie de página

Cuando estructurado de esta manera, el enlace oculto para "Saltar al Contenido Principal" es beneficioso.Sin embargo, con diseño de CSS, usted puede ser capaz de reordenar esta manera que usted tiene:

1. Contenido
2. Encabezado
3. De Navegación Superior
4. De Navegación Izquierdo
5. Pie de página

A continuación, utilice posicionamiento CSS y los flotadores para mover estos diferentes elementos en la pantalla para hacer que el aspecto de la página de la manera que usted quiere que se vea.

La principal ventaja para la estructuración de una página web, de esta manera es que si el navegador no es compatible con el CSS, a continuación, el contenido es el primero en la página.En adición a los lectores de pantalla, esto es beneficioso para los dispositivos móviles y las arañas del motor de búsqueda.

Answer 7

Para los parcialmente deficientes visuales necesitamos para asegurarse de que el texto no es excessivly pequeñas y contrasta el color de fondo sustancialmente.Nosotros también debe asegurarse de que el texto es de tamaño variable mediante la relación de tamaño de las unidades, tales como em's en lugar de unidades absolutas como px's (aunque, en mi opinión, esto se está convirtiendo en un problema menor, como los navegadores son cada vez más favoreciendo el zoom sobre el texto cambiar el tamaño).

Para los usuarios de lectores de pantalla, es útil para obtener una buena idea de la forma en que los lectores de pantalla son realmente utilizados.El siguiente artículo presenta orientaciones basadas en las observaciones de los ciegos navegar por la web utilizando los lectores de pantalla;es un poco fuera de fecha, ahora, pero 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 un sección de su sitio web dedicado al asesoramiento para los desarrolladores web sobre cómo atender a los usuarios con problemas de visión.

Además a las personas que impared, debemos considerar aquellos con discapacidades que les impiden el uso de un ratón, y también a aquellos con discapacidades neurológicas.Si alguien puede aportar recursos a dar consejos sobre cómo atender a las personas, eso sería genial.