|

Hacía unos meses que me rondaba la cabeza la idea de crear una css para chequear problemas de accesibilidad. La idea surgió al ver esta sencilla técnica para poner un borde a todos los elementos de un html (a modo de debugging) en Snipplr utilizando un código tan simple como este:

* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }

Poco después, vi otra técnica para sobrescribir las declaraciones de estilos en línea. Esta técnica tiene el “pequeño inconveniente” de no funcionar en Explorer, aunque no dejaba de ser interesante como forma de mostrar la existencia de estilos en línea.

span[style]{
background: red !important;
}

Casi todas las buenas ideas ya están inventadas y hoy acabo de encontrar en la web de Eryc Meyer esta css para diagnosticar algunas cosillas que pueden ser problemáticas, como por ejemplo, estilos en línea, enlaces sin una url en su atributo href, elementos html (div, span, li, p, td, etc) vacíos, elementos sin un valor en su atributo class, imágenes sin texto alternativo, tablas sin summary, etc.

Eryc Meyer ha creado dos versiones de esta css, una para Internet Explorer 7 y otra para Firefox. En CSS Tools: Diagnostic CSS podemos ver las dos.

Quizá la más interesante y a la que le podamos sacar mayor partido sea a la css para Firefox, ya que si usamos la extensión Web Developer, tenemos la opción de chequear rápidamente cualquier página añadiendo la css como hoja de estilo de usuario mediante la opción CSS > Add User Style Sheet.