Uninstallme | Desarrollo front, estándares web, accesibilidad y más

Diagnosticar problemas de accesibilidad utilizando una CSS de usuario

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.

Categorías:
Accesibilidad, Buenas ideas, CSS, How to
Publicado el:
22 de Julio del 2008
Autor:
admin

Comentar

Los colores a mano en tu CSS

Acabo de encontrar en Smashing Magazine una serie de consejos para mejorar la legibilidad de nuestras hojas de estilo. Algunos de ellos, como crear una tabla de contenidos, pueden ser muy útiles en css’s para sitios muy grandes o mantenidos por varias personas, aunque quizá un poco desproporcionados para hojas de estilo pequeñas, como por ejemplo, la que puede utilizar un blog.

Continúa » Los colores a mano en tu CSS

Categorías:
CSS
Publicado el:
20 de Julio del 2008
Autor:
admin

Comentar

Encabezados de primer nivel: ¿uno o varios?

Si estás haciendo una web que tiene que pasar una auditoría de accesibilidad, seguramente uses un solo encabezado de primer nivel (Fundación CTIC). Aunque es posible que te puedas permitir usar varios (Technosite).

Continúa » Encabezados de primer nivel: ¿uno o varios?

Categorías:
Accesibilidad
Publicado el:
13 de Julio del 2008
Autor:
admin

Comentar

La metáfora del huevo

Real como la vida misma.

Categorías:
Cajón de sastre
Publicado el:
10 de Julio del 2008
Autor:
admin

Comentar

Evitar la activación de una función asociada a un evento onkeypress con la tecla tabulador

Sintiendo ser un poco monotemática y cansina con el tema del onkeypress, dejo un ejemplo de menú desplegable con javascript en el que se ha usado una función para evitar que la tecla tabulador disparé la función asociada a un evento onkeypress en Firefox, perimitiendo así la navegación mediante teclado.

Continúa » Evitar la activación de una función asociada a un evento onkeypress con la tecla tabulador

Categorías:
Accesibilidad, Javascript
Publicado el:
1 de Julio del 2008
Autor:
admin

Comentar

Test para comprobar el soporte de eventos javascript en lectores de pantalla

He encontrado en Access Matters un interesante test para determinar cómo afecta javascript a lectores de pantalla y otras tecnologías asistivas (voz en Opera y otros navegadores).

Continúa » Test para comprobar el soporte de eventos javascript en lectores de pantalla

Categorías:
Accesibilidad, Javascript
Publicado el:
1 de Julio del 2008
Autor:
admin

Comentar

Triste pero cierto

Google lo sabe toooodo.

Términos de búsqueda más habituales por los que se encuentra este blog: cerveza en primera posición.

Categorías:
Cajón de sastre, Personal
Publicado el:
13 de Junio del 2008
Autor:
admin

Comentar

Utilidad para la maquetación de diseños en retícula

Si tienes la necesidad de comprobar que la maquetación html de un diseño en retícula mantiene las distancias y anchuras correctas, puedes dedicarte a hacer capturas de pantalla y compararlas con los diseños, utilizar algún programa para medir espacios en pantalla (recomiendo Webmaster’s Toolkit, buenísimo) o superponer una retícula sobre tus páginas.

Continúa » Utilidad para la maquetación de diseños en retícula

Categorías:
Javascript, Utilidades
Publicado el:
26 de Mayo del 2008
Autor:
admin

Comentar

Onkeypress en elementos no focalizables

A raíz de una consulta hecha hace unos días en la lista de Acceso Web sobre el uso de onkeypress, hoy se daba la respuesta de que su uso es imprescindible para elementos que no son enlaces ni controles de formulario, es decir, para elementos que no pueden tener el foco cuando se utiliza el tabulador para navegar.

Continúa » Onkeypress en elementos no focalizables

Categorías:
Accesibilidad, Javascript
Publicado el:
28 de Abril del 2008
Autor:
admin

Comentar

Caracteres especiales ALT

¿Cuál es el colmo de un maquetador web? Pues que en su teclado dejen de funcionar las teclas de menor que (<), y mayor que (>). Experimentado en propia persona.

Continúa » Caracteres especiales ALT

Categorías:
Cajón de sastre, Personal
Publicado el:
20 de Abril del 2008
Autor:
admin

Comentar

Labs

Prometo que algún día pondré algo aquí que no sea... Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

RSS

Acerca de

En este bloq se habla de accesibilidad, estándares web, desarrollo front y lo que surja.

Escribe Kus desde algún lugar comprendido entre Madrid y La Rioja.

Los contenidos están bajo una licencia Reconocimiento - Compartir Igual

Todo funciona gracias a Wordpress.