Versions Compared

Old Version 2

changes.mady.by.user Alan Harnum

Saved on

compared with

New Version 3

changes.mady.by.user Jaime Enrique Cortés Fandiño

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Div
classa11y-checks

Making your website accessible to a broad range of diverse users is not hard. The techniques described on these pages won't guarantee that your pages are 100% fully accessible, but they're an easy way of getting pretty close.

Use these techniques throughout your development process: Don't wait till after you've created everything to check if it's accessible. If you double-check what you're building as you go along, it will become second nature.

Keyboard Accessibility

Unplug your mouse and put it in your desk drawer (if you're using a laptop, tape some cardboard over the trackpad). Now, try to use your site. Can you accomplish everything using only the keyboard? Can you log in and out? Can you fill in any forms? Can you access all the navigational menus? Can you tell where the keyboard focus isDiseñ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?

Div
stylefloat: right; width: 50%;


Panel
titleWhy should you care?

Many people can't, won't or don't want to use a mouse or trackpad. Maybe they're power-users who don't want to waste time moving their hands from the keyboard to the mouse; maybe they're using a laptop and hate the trackpad; maybe they're using a wireless mouse and the batteries have died; maybe they have a mobility impairment and can't use a mouse; maybe they have a visual impairment and can't see the screen. None of these are reasons why they wouldn't want to use your site.

Note: In Safari, you may need to check the "Press Tab to highlight each item on a webpage" checkbox in the Advanced preferences before you can tab around pages
¿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

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?

Div
stylefloat: right; width: 50%;


Panel
titleWhy 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

Div
stylefloat: right; width: 50%;


Panel
titleWhy 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)

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?

Div
stylefloat: right; width: 50%;


Panel
titleWhy 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)

Stylesheets

Div
stylefloat: right; width: 50%;


Panel
titleWhy 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.
Div
stylefloat: right; width: 50%;


Panel
titleWhy 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:

...