Una página totalmente innaccesible...

Con este ejemplo quiero mostrar cómo la validación automática de un código no es suficiente para garantizar la accesibilidad de una página. Para ello, he intentado vulnerar el mayor número posible de las Pautas de Accesibilidad de Contenido Web del W3C, pero consiguiendo a la vez superar sin errores los test de su validador de código HTML [ir a la página] y de CSS [ir a la página], así como los de TAW [ir a la página], HERA [ir a la página] y Cynthia Says [ir a la página].

Sólo hasta el primer párrafo, ya he incumplido los siguientes puntos:

Proporcionar metadatos de la página, punto 13.2. No empleo elementos meta para indicar el idioma, ni el autor, ni nada más que la codificación.

No emplear tablas para maquetar, punto 5.3. Toda la maqueta de esta página está creada por medio de una tabla, al estilo de la vieja escuela. Pero no sólo eso, sino que además he empleado en ella marcado estructural, vulnerando el punto 5.4.

Ofrecer textos alternativos para contenidos no textuales, punto 1.1. La imágen que empleo como cabecera de la página debería contar con alt="alfa centauri", que es el texto que aparece en ella, para que pudiese ser accesible a un lector de pantalla.

Emplear los elementos de marcado de acuerdo con su semántica definida en una gramática pública, que es a lo que se refiere el according to specification del primer párrafo de la pauta 11, cosa que no he hecho en los encabezados, ni en esta lista, que he marcado con unos cuantos p, para también incumplir el punto 3.6. Además, ésta la he sangrado con un blockquote, cosa que explícitamente se rechaza en el punto 3.7.

Proporcionar información por algún medio que no sea sólo el color, punto 2.1, lo que no hago en los vínculos.

Emplear encabezados para indicar la estructura del documento, punto 3.5, lo que no hago en los vínculos. No, como he dicho, son meros párrafos con un estilo distinto.

No abrir un vínculo a ventana nueva sin avisar antes al usuario, punto 10.1. ¿Cómo? Bueno, como el ejemplo de JavaScript obstrusivo lo de dejado para el formulario y la galería de imágenes, aquí he incluido el atributo target. Sí, ese atributo está depreciado en la DTD que he elegido —la XHTML 1.0 Strict— y debería generar un error de validación. Pero como soy muy listo y sé que puedo añadir líneas a la DTD, vuelvo a incluir target y así engaño al validador; no obstante, sigo incumpliendo el punto 11.2, que me dice que no debería utilizar elementos ni atributos depreciados.

Emplear unidades de medidas relativas antes que absolutas, punto 3.4. El tamaño de letra es posiblemente un poco pequeño para una buena legibilidad, pero como lo he fijado a 10 píxeles, me temo que si está viendo esta página con Internet Explorer 6 no podrá modificarlo. Cierto es que en el texto de la pauta no se menciona el píxel como unidad absoluta —porque no lo es, su tamaño depende de la resolución de la pantalla—, pero se puede inferir que no se debería usar por el ejemplo que aparece en el documento de técnicas de CSS.

Crear vínculos con un texto significativo, punto 13.1. No, repito en todos el mismo, y además, no ofrezco con éste ninguna información sobre el destino al que apuntan.

Marcar apropiadamente abreviaturas y acrónimos, punto 4.2. Pues no, ésta tampoco.

Pero aún podemos hacer muchas cosas más, como por ejemplo incluir así una cita:

Imagination will often carry us to worlds that never were. But without it we go nowhere.

Carl Sagan

En este caso, empleo correctamente los elementos de marcado, pero no indico el cambio de idioma en el contenido como me pide el punto 4.1, ni he elegido un color para el texto con un contraste suficiente con el fondo, por lo que también vulnero el punto 2.2.

¿Y qué tal si ahora incluyo un vídeo?

En el código con el que lo he incrustado no aparece el elemento embed —que es código propietario de Netscape y hace que la página no valide—, pero no ofrezco información equivalente sincronizada, como me exigen los puntos 1.3 y 1.4. Es cierto que en este caso no se puede hacer una transcripción del mismo, pero sí una audiodescripción. Ah, y tampoco incluyo un texto alternativo para avisar a los usuarios de que necesitan el plugin de Flash.

Así que, hagamos recuento:

Oh, vaya, haciendo esta tabla además he incumplido los puntos 5.1 —no he marcado correctamente los encabezados de las columnas ni las filas—, 5.2 —no los he asociado explícitamente con las celdas de datos— y 5.5 —no incluyo summary.

Además, no voy a proporcionar un vínculo a una versión accesible, con lo que obvio el punto 11.4.

...y sin embargo totalmente válida

Sí, así es. He elegido algunas de las herramientas más populares para comprobar la validez de una página web y he puesto a prueba ésta según los criterios más estrictos, con el feliz resultado de una aprobación que me permite llenar este espacio de sellos:

Cierto es que en todas las páginas de los programadores de estas herramientas se avisa explícitamente de que para emplear los sellos se deben revisar —y corregir si fuera necesario— las advertencias manuales, pero no hago más que seguir esa tendencia al «medallismo» que se aprecia en muchos sitios.