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)
- skipped heading levels (e.g.
h3insideh1) - things that should be at the same level but aren't
- headings used for formatting only
- headings that don't actually use a heading tag
Stylesheets
With the increasing pixel density of many screens, the appearance of text is seeming smaller and smaller to viewers. Many people increase the size, sometimes by adding a style to the page. If you're using values, your content will remain un-viewable for these people.
Also, people are viewing web pages on more and more different sizes and shapes of devices. Responsive web designs can ensure that your site will look great wherever it's seen, but not if you're using pixels for font sizes and line spacings.
Use something like Firebug in Firefox to double the page's font size by adding "font-size: 2em" to the body tag. Does all of the text on the page double in size?
Some things to look out for (and what to do about them)
- text that doesn't enlarge
- containers that don't enlarge (e.g. columns, the document body, etc)
- background images that don't scale properly
Screen Readers
Turn on a screen reader and listen to your page.
- On Windows, you can download the free, open source screen reader NVDA, or a trial version of Jaws, a popular screen reader.
- On a Mac, the operating system includes VoiceOver.
An increasing number of people have visual impairments that make it difficult to see the screen. Many of them use a screen reader, which reads the content of the screen aloud to them. If your page doesn't play nicely with screen readers, these visitors to your site will be leaving pretty quickly.
Launch the screen reader, return to the browser and reload your page. Turn off the monitor and listen to the screen reader read your page. Does it make sense? Can you understand what the page is about?
Use the Tab key to navigate the site. Listen to the screen reader read out the links and controls. Does what you hear make sense? Can you tell where focus is based on what's spoken?
Want more info?
For more information on designing accessible websites, try the following resources:
- Tips for Testing using multiple browsers
- Accessibility Review Protocols
- The Mozilla Developer Network's pages on accessible web development
- The Fluid Project's DHTML Developer Checklist
- WebAIM
- W3C's Best Practices for using ARIA (Accessible Rich Internet Applications)
- W3C's Web Content Accessibility Guidelines (WCAG)
- Easy fixes to common accessibility problems from Yahoo! Developer Network
- Using ARIA in HTML