(TRANSLATION) Quick-and-Dirty Website Accessibility Tests - and Fixes

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?

¿Porqué debería preocuparte?

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.

Some things to look out for (and what to do about them)

Semantics

Links

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to generate a list of the links on each page. Does the text of the links make any sense when taken out of the context of the page?

Why should you care?

The text of a link says something about what the link is. Screen reader users often navigate a page by tabbing from one link to the next, and all they hear is the link text. Would you follow a link if all you knew about it was "click here?"

Some things to look out for (and what to do about them)

Images of text

Why should you care?

Text that is embedded in an image is very difficult to internationalize. Also, some people won't see the images on your page: They might have a visual impairment; they might have a super-slow connection.

Use the browser's settings to turn images off and reload the page (you might need to clear your cache first). Does any of the text disappear?

Some things to look out for (and what to do about them)

buttons that lose their labels

Headers

Use a free tool such as the Web Accessibility Toolbar or the Web Developer extension to show a "table of contents" for your site: a list of all the headings on a page. Does this table of contents look like what you meant when you made the site? Does it make sense? Does it accurately reflect the structure of the information and the relationships between the sections?

Why should you care?

Search engines are not the only things that use headings to index your site. Many people use an automatically generated table of contents to get a quick sense of what's on a page, as well as to navigate to particular headings. If they look at this table of contents and it looks nonsensical, they're not going to be too impressed with your site.

NOTE: If you're using HTML5 and its <section> and <article> elements, make sure you understand the way it creates a document outline. Try an HTML5 outlining tool like HTML 5 Outliner to assess your page's outline.

Some things to look out for (and what to do about them)

skipped heading levels (e.g. h3 inside h1)
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

Why should you care?

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)

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.

Why should you care?

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: