Consejos de accesibilidad web

Primero de todo, lo expuesto a continuación no va hacer que tu página supere los tests de accesibilidad, pero si lo tienes en cuenta a la hora de desarrollar un proyecto te traerá menos dolores de cabeza y podrás centrarte en los aspectos de la accesibilidad más difíciles.

Los mejores consejos que se pueden dar para hacer una web accesible tal vez se puedan resumir en dos:

• Usar el sentido común
• Validar el código XHTML y las hojas de estilo CSS según los estándares del W3C

Lo difícil es seguir estos dos consejos pero esta claro que no todo queda aquí y probablemente no tengamos ni medios ni dinero para hacer pruebas de usabilidad y accesibilidad satisfactorias.

Voy a evitar lo obvio, como separar el código de los aspectos visuales no usar contenido dinámico ni efectos JavaScript, etc. Todo esto ya lo sabemos. Por eso os propongo una serie de claves para lograr una web accesible.

Tipografía

1. Usar tamaños de fuentes legibles. Algunos dicen mínimo 11px. Yo te diría 12 o incluso 13px.
2. Usar tamaños relativos (em) y nuca pixeles (px).
3. Mejor no usar el elemento small. Remplazalos por un span y usa CSS

Maquetación

1. Usa tablas solo para mostra datos tabulares. Y no uses tablas dentro de tablas.
2. No te olvides de poner un sumario a la tablas, usa pare ello el atributo summary en el elemento table.
3. Pon un titulo a las tablas, usa el elemento caption dentro de la tabla antes de la cabeceras.
4. Usa correctamente los títulos h1, h2, h3, etc. Y con sentido lógico, no pongas un h3 si antes no has puesto un h2. Encontrarás quien te diga que solo puede haber un h1, yo creo que eso depende del formato de la web. Si se trata de un documento tiene sentido, pero no si se trata de un blog, que cada entrada tiene un titulo.
5. No anides elementos de bloque (p, noframes, table, blockquote, ul, ol, dl, h1-h6, etc.) dentro de elementos que no lo son (strong, em, a, etc.)
6. Evita los elementos vacíos como divs o p. Sin embargo, no te aparecerán warnings cuando usas un div con una clase, típico caso cuando usas la clase clearfix: <div class=”clearfix”></div>.
7. No te olvides delos alt en las imágenes y usa también el atributo title.
8. Tampoco te olvides del title en los links.
9. No uses el atributo target en los elementos a.
10. En los links, no uses el mismo texto para el titulo que para el propio texto.
11. No te inventes atributos, si hay gente que lo hace.
12. No uses popups ni efectos de Javascript. Si lo usas asegúrate que la página funciona bien con el Javascript deshabilitado.
13. Proporciona contenido alternativos a los objetos multimedia, object.

Formularios

1. Pon los campos dentro de los elementos label. Y usa el atributo for del elemento label para relacionarlo con el campo, usando como referencia el id del elemento.
2. Siempre que puedas pon valores por defecto a los campos de entrada.
3. Valida los campos del formulario simpre desde el lado del servidor. Los scripts son un añadido para dar más usabilidad, el formulario debe funcionar correctamente sin ellos.
4. No pidas datos inecesarios.
5. Captchas y accesibilidad hoy por hoy son dos cosas incompatibles. El W3C es conciente de los problemas de accesibilidad generados por los captchas.

A todo esto seguro que te preuntarás que si no podemos usar poups, JavaScript, ni el atributo target con el valor  _blank para abrir un link en otra ventana ¿como lo hacemos para poner el link de “Acepto los condiciones legales…”, “He leido..”, etc. sin que el usuario pierda todo lo que ha introducido? Yo mismo me lo he preguntado muchas veces, pero eso lo vermos más adeletante.

---

---