Web: estándares (w3c) y accesibilidad (taw)

Hoy en día hay que tener en cuenta muchas cosas a la hora de comenzar a programar/maquetar una web (nada de abrir el dreamweaver y arrastrar elementos por favor!!), desde seguir unos estándares para validar nuestro código hasta comprobar la accesibilidad de todos los elementos, ya que no queremos que ningún usuario se quede sin poder ver nuestro contenido..

Para que eso no ocurra voy a intentar ayudaros a resolver algunos problemas que aparecen cuando se mide la accesibilidad de una web, recomiendo tener los estándares w3c y el test de accesibilidad taw (o en su caso los complementos para firefox ^^) siempre a mano mientras vas metiendo código, ya que ir resolviendo los conflictos mientras van apareciendo es mejor que tener la web lista, comprobarlo, y que te dé el bajón!

Bueno, voy al lío, cómo solucionar algunos errores de accesibilidad:

(*) No existe el atributo «lang» o «xml:lang»: No se ha indicado el idioma principal de este documento.

Debemos específicar el idioma de nuestra web, para hacerlo simplemente añadimos el atributo correspondiente a la etiqueta <html> quedándonos así:

<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">

«es» para español, «en» para ingles,.. podéis ver todos en la informacion oficial.

(*) Proporcione un texto equivalente para todo elemento no textual.

Es muuuy importante que todas nuestras imágenes tengan el atributo «alt», ya que en él debemos especificar lo que representa nuestra imagen, así si no se puede visualizar, el usuario no deja de recibir la información. Si además la imagen tiene información muy importante, podemos añadirle el atributo «longdesc» donde se le especifica una URL con más datos sobre la imagen (sólo puede contener una url, nada de texto).
Una etiqueta de imagen válida y accesible sería:

<img src="imagen.jpg" alt="descripcion de la imagen" longdesc="masinformacion.html" />

Acordaros que la etiqueta img se cierra «ella misma», tiene que llevar la barra / siempre al final!

(*) No existen teclas de acceso rápido (atributo «accesskey») para ningún control ni enlace de este documento. Compruebe si son necesarias
(*) Indique el significado de abreviaturas y acrónimos mediante el atributo «title» la primera vez que aparezcan en un documento.

A la hora de insertar enlaces, debemos agregarles el atributo «title» indicando información sobre donde nos llevará, también es conveniente añadir «acceskey», ya que se podrá acceder a todo el contenido de la web sin necesidad de tener ratón, sólo con el teclado. Un ejemplo de enlace completito sería:

<a href="pagina.html" title="titulo de la pagina" acceskey="x">enlace</a>

Para utilizar la tecla de acceso al enlace en windows debemos hacerlo manteniendo pulsado «alt», para mac pulsamos «control» (más la letra de acceso claro).

(*) No existe el elemento «noscript» con contenido alternativo para «scripts». Compruebe si es necesario para no perfer funcionalidad o información.

Siempre que tengamos scripts, debemos tener noscripts, ya que si un navegador no ejecuta el script dispone de una alternativa con esta etiqueta.

<script type="text/javascript">contenido del script</script>

<noscript>alternativa del script</script>

Acordaros de añadir el atributo «type» al script, nada de «language»..!

Y.. basta de accesibilidad por hoy, mientras me vayan surgiendo/me acuerde/me pidan ayuda para solucionarlos iré poniendo más, espero que os sirva para algo :P

Importante: valida tu código mientras lo vas escribiendo, será menos pesado!

  • 14 junio 2008
  • html
  • , , , , ,

One comment on “Web: estándares (w3c) y accesibilidad (taw)”

  1. Hola, tu blog es muy interesante, lastima que no exista un directorio, donde la gente pueda colgar todas las soluciones mas comunes sobre problemas de accesibilidad de las paginas.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *