Cómo los sitios web para lectores de pantalla Diseño

Un lector de pantalla permite a un usuario con discapacidad visual para disfrutar de contenido web mediante la lectura en voz alta utilizando un sintetizador de voz. Diseñar un sitio web específicamente para un lector de pantalla, o la construcción de un sitio normal con esta accesibilidad en mente, requiere un enfoque en la estructura global, marcado válido y organización de contenidos. Aunque los elementos visuales se pueden seguir utilizando en un diseño destinado a los lectores de pantalla con el fin de atraer a los visitantes con deficiencia visual, el diseño general de la página será dictado principalmente por las necesidades de la pantalla reader.For esta razón, el diseño debe centrarse en HTML y la funcionalidad CSS exclusivamente.

Instrucciones

1 Crear una estructura de sitio que es mínimo y organizado de una manera clara y lineal. Un ejemplo podría ser un diseño basado en rejilla compuesto de una cabecera, menú y barra de búsqueda en la parte superior seguido por el área de contenido principal de la izquierda y una barra lateral a la derecha. Evitar la incorporación de elementos visuales o ilustrativos tales como imágenes deslizadores que no pueden ser representados por texto.

2 Construir un menú de navegación principal que sólo incluye enlaces de nivel superior. Desde un usuario con problemas de visión tiene el menú leer a ellos cada vez, varios niveles de enlaces de nivel inferior pueden llegar a ser engorroso. Para incluir un enlace antes de que el menú que les permite saltar al área de contenido principal y lo llaman "Saltar al contenido principal" o "Saltar Menú". La redacción es importante, ya que la voz sintetizada debe ser capaz de leer y pronunciar la frase correctamente.

3 Los elementos de diseño tales como balas, bordes, botones y menús de navegación con CSS en lugar de imágenes. Esto permite que el lector de pantalla para comprender los componentes textuales de estos elementos más fácil. Por ejemplo, en lugar de utilizar un botón de "Registrarse", utilizar un enlace en su lugar y el estilo con CSS si es necesario.

4 Añadir "ALT" atributos de las imágenes en el contenido de representarlos, pero que sea breve. Por ejemplo, "foto de la casa" es más apropiada que una frase completa descripción de lo que está pasando en la foto o un término genérico como "foto". No utilice atributos ALT para elementos de diseño a menos que representen un enlace. A pesar de que esto es contrario a los estándares XHTML, se ahorra el lector de pantalla de tener que leer el marcado ALT en cada elemento de diseño que no es una parte relevante de los contenidos.

5 Coloque titulares, encabezados o títulos en el lado izquierdo de la página. Los lectores de pantalla leen la página de arriba a abajo, de izquierda a derecha. Los títulos deben ser descriptivo, con la palabra clave, categoría o materia al comienzo del título. Mantener el contenido en sí lineal y utilizar etiquetas de título válidos (H1, H2, etc.) para estructurar el texto.

6 Crear contenido que es conciso y divide en párrafos cortos. Use un lenguaje básico y evitar la jerga o palabras inventadas que el lector de pantalla no puede pronunciar y que el usuario puede no ser capaz de entender. Escribir palabras compuestas como dos palabras, como "página de inicio", "trabajar" o "mantenimiento de la casa". Use listas numeradas o con viñetas cuando sea posible para organizar el contenido.

7 Para las páginas con mucho contenido, incluir una lista de enlaces de anclaje antes de que el contenido de la tabla-de-contenidos-estilo. Para incluir un enlace "al principio de página" en la parte inferior de las páginas. Considere la posibilidad de un diseño que utiliza cubos o cajas debajo del contenido que contiene enlaces a contenido relevante en las listas ordenadas; Sin embargo, evite el estilo del contenido de estas áreas de una manera convencional, que incluye las marcas de tiempo, el número de observaciones o extractos que cortan a mitad de la frase. Que alguien lea el contenido de cada área en voz alta para que usted pueda entender cómo el lector de pantalla lo interpretará para asegurarse de que es tan simple y completa como sea posible.

8 Utilice la etiqueta <label> en el diseño de formas, y siempre colocar el formulario en la parte superior izquierda de la página. Añadir descripciones mediante el atributo de título dentro de la etiqueta etiqueta de texto en lugar de colocar por encima o por debajo de un elemento de formulario. Tenga en cuenta que los indicadores visuales como asteriscos o texto predeterminado de campo no tienen sentido para el lector de pantalla y necesitan ser representados en la etiqueta en su lugar.

Consejos y advertencias

• Utilice el <acronym> y <abbr> para decirle al lector de pantalla para leer un acrónimo o abreviatura como letras en vez de una palabra.
• No utilice fragmentos como "leer más" o "clic aquí" en los enlaces. Crear términos de enlace que se destacan por su propia cuenta, como "seguir leyendo Cómo diseñar para lectores de pantalla" o "Date de alta aquí."
• Evitar marcado que hace que la página se actualice cuando los usuarios realizan una acción destinada a la misma página. Soluciones como AJAX pueden ayudar.