Diseñar un sitio web accesible para la diversidad de usuarios no es difícil, sin embargo es necesario advertir que las técnicas descritas en estas páginas no garantizan que su sitio web quede 100% accesible, pero se facilita mucho más el trabajo.
Use estas técnicas en todo su proceso de desarrollo; no espere hasta tener creado todo para evaluar si es accesible o no. Si usted va comprobando lo que va desarrollando, con seguridad los resultados serán mucho mejores en accesibilidad.
Teclado accesible
Desconecte el mouse de su PC y guardelo en algún cajón de su escritorio. (Si está usando un portátil, cubra con un cartón la zona en donde usa los dedos simulando el ratón). Ahora, intente ingresar a su sitio web. ¿Puede navegar usando solo el teclado? ¿Puede entrar y salir del sitio? ¿Puede diligenciar los posibles formularios que estén disponibles? ¿Puede acceder a todos los menús de navegación? ¿Puede identificar en done se hace foco usando el teclado?
Mucha gente no puede, no acostumbra o no quiere usar un mouse. Tal vez son usuarios poderosos que no quieren perder el tiempo moviendo las manos del teclado al ratón; Quizá ellos están usando una pc portátil y odian la superfie para poner los dedos simulando un ratón. Es posible que ellos estén usando un ratón inalámbrico y las pilas se descargaron. O tal ellos tienen un impedimento físico que les impida usar el ratón. De pronto ellos tienen limitaciones visuales y no pueden ver la pantalla. Ninguna de estas son razones por las que ellos no quisieran ingresar a su sitio web.
Nota: En Safari, puede que necesite ingresar a las preferencias avanzadas del navegador y marcar la casilla de verificación "Presione la pestaña Para resaltar cada elemento en una página web" para poder hacer uso de la tecla TAB del teclado.
Algunas cosas a tener en cuenta (y qué hacer con ellas)
- No ser capaz de decir donde se hace foco
- No distinguir vínculos o botones activos
- Vínculos que se repiten ellos mismos
- Diálogos con los que no se puede trabajar
- Diálogos que no se cierran
- Menús pop up que no deberían ser pop up
Semántica
Vínculos
Use una herramienta del Web Accessibility Toolbar o quizá usar la extensión de navegadores web Web Developer para generar la lista de vínculos de cada página. ¿El texto de los enlaces tiene algún sentido cuando se saca del contexto de la página web?
Los textos de los enlaces dicen algo acerca del vínculo al que dirigen al usuario. Los usuarios de lectores de pantalla suelen navegar por una página mediante el uso de la tecla Tab de su teclado y van saltando de un enlace al siguiente. El lector de pantalla solo les lee lo que dicen los textos escritos en los enlaces ¿Usted seguiría un vínculo si todo lo que escucha de parte de su lector de pantalla es "haga clic aquí?"
Algunas cosas a tener en cuenta (y qué hacer con ellas)
Imágenes de textos
Los textos que son simulados o mostrados con imágenes son muy difíciles para traducciones o tareas similares. También, muchas personas no ven las imágenes de un sitio web porque podrían tener impedimentos visuales o quizá tienen conexiones a Internet muy lentas, lo que dificulta la descarga de imágenes.
Use la configuración de su navegador para desactivar la aparición de imágenes y recargue la página (es posible que se necesite limpiar el caché primero). ¿Alguno de los textos del sitio desapareció?
Algunas cosas a tener en cuenta (y qué hacer con ellas)
Encabezados
Sugerimos que use las herramientas disponibles en Web Accessibility Toolbar o quizá usar la extensión de navegadores web Web Developer extension para mostrar una "Tabla de contenidos" que es básicamente una lista de todos los encabezados de una página web. ¿Esta tabla muestra lo que usted imaginaba se había construido en su sitio? ¿Esta tabla de contenidos muestra lo que usted quería decir cuando hizo el sitio web? ¿Tiene sentido esta tabla? ¿La tabla refleja exactamente la estructura de información y las relaciones entre las secciones de la página?
Los motores de búsqueda no son los únicos que usan los encabezados para indexar un sitio. Muchas personas utilizan la tabla de contenido generada automáticamente para obtener una idea rápida de lo que hay en una página, así como para navegar a determinados encabezados. Si miran esta tabla de contenido y parece enredado o sin sentido, no van a estar muy impresionados con su sitio.
NOTA: Si está usando HTML5 y las etiquetas <section> y <article>, Asegúrese de entender la forma en que crea un documento fuera de línea. Pruebe con un herramienta HTML5 como HTML 5 Outliner para evaluar el esquema de su página.
Algunas cosas a tener en cuenta (y qué hacer con ellas)
- Errores de uso de encabezados (Ej.:
h3dentro deh1) - Cosas que deberían estar al mismo nivel pero no
- Encabezados utilizados sólo para formatear
- Encabezados que no utilizan tags de encabezado
Hojas de estilo
Con el incremento de la densidad de los pixeles en muchas pantallas, la apariencia del texto parece cada vez más pequeña para los usuarios. Mucha gente aumenta el tamaño, algunas veces añadiendo un estilo a la página. Si usted está usando valores fijos (en pixeles, por ejemplo), su contenido sera un problema para éstas personas.
También hay que tener en cuenta que existen más dispositivos de diferentes tamaños y formas que la gente usa con mayor frecuencia. La puesta en práctica del Responsive web designs puede ayudar a asegurar que su sitio luzca correctamente sin importar en dónde se mire. Pero recuerde que no debe usar medidas en píxeles para tamaños de fuente y espaciados de línea.
Use algo como la extensión Firebug en Firefox para para duplicar el tamaño de la fuente de la página añadiendo "font-size: 2em" a la etiqueta <body>. ¿Todo el texto de la página aparece al doble del tamaño?
Algunas cosas a tener en cuenta (y qué hacer con ellas)
- Texto que no agranda
- Contenidos que no agrandan (Ej.: columnas, el documento en el body, etc)
- Imágenes de fondo que no escalan adecuadamente
Lectores de pantalla
Prenda el lector de pantalla de su equipo y escuche su página web.
- En Windows puede descargar libremente NVDA, o una versión de prueba de Jaws, el popular lector de pantalla.
- En Mac el sistema operativo incluye la opción de VoiceOver.
Un creciente número de personas tienen limitaciones visuales que les impiden ver adecuadamente las pantallas. Muchos usan lectores de pantalla que leen los contenidos. Si no se escucha nada en su página web con el lector de pantalla activado, es seguro que los visitantes de su sitio dejaran de visitarlo rápidamente.
Ponga a funcionar el lector de pantalla y luego vaya al navegador web y recargue su página. Apague el monitor y escuche lo que lee el lector de pantalla en su sitio web. ¿Tiene sentido? ¿Usted puede entender de qué se trata la página?
Use la tecla Tab paranavegar el sitio. Escuche con atención o que el lector de pantalla dice sobre los enlaces y los controles. ¿Tiene sentido lo que oye? ¿Puede decir dónde está el foco del vínculo?
¿Desea más información?
Para más información sobre diseño de sitios web accesibles, intente con los siguientes recursos:
- Consejos para Pruebas con varios navegadores
- Protocolos de revisión de accesibilidad
- Las páginas de la red de desarrollo de Mozilla sobre la web accesible
- La lista de chequeo del proyecto DHTML Fluid
- WebAIM
- Las mejores prácticas del W3C usando ARIA (Accessible Rich Internet Applications)
- Guías del W3C's sobre Contenidos Accesibles en la Web (WCAG, por sus siglas en inglés)
- Soluciones sencillas a problemas comunes de accesibilidad from Yahoo! Developer Network
- Usando ARIA en HTML