Holmes, el detective de CSS

Holmes, The CSS Markup Detective es una herramienta muy simple que ayuda a mejorar la calidad y la accesibilidad de las páginas web. Holmes clasifica los errores que detecta en tres tipos:

• Errores, remarcados en rojo.
• Advertencias, remarcados en amarillo.
• Elementos desaconsejados, remarcados en gris.

Entre otras cosas, Holmes es capaz de detectar:

• Atributos requeridos que faltan en etiquetas, como por ejemplo el atributo name en los controles de un formulario.
• Atributos que no existen.
• Elementos desaconsejados (obsoletos) o que no forman parte del estándar.

Además de recuadrar el elemento que presenta un error, Holmes muestra un mensaje de información sobre el elemento que al pasar el cursor del ratón por encima. En la página de ejemplo Test Suite podemos ver cómo funciona y qué errores detecta:

• Enlaces sin el atributo href.
• Imágenes sin el atributo alt.
• Elementos desaconsejados como acronym o center.
• ...

Lo mejor de todo es que es muy fácil de instalar y usar: simplemente, es un CSS que debemos añadir a las páginas que queremos comprobar. Para activarlo, simplemente hay que añadir una clase especial llamada "holmes-debug" a la etiqueta body.

Gracias a esa simplicidad en su uso, se pueden hacer cosas como integrarlo en un gestor de contenidos. En la página Adding  a CSS Markup Detective to Drupal no explican un ejemplo de uso con el gestor de contenidos Drupal.

Cuando esta herramienta se integra con un gestor de contenidos, los creadores de contenido pueden detectar de forma sencilla y por ellos mismos, sin tener que ser experto en HTML, algunos errores que repercuten en la accesibilidad.

Por último, funciona en todos lo navegadores actuales, excepto... lo has adivinado, Internet Explorer.