Uppdatering av kontrastkontroll

Saltar al contenido Inicio Contrast Checker HeadingsMap Easyvalidator Sobre mí… ← reCAPTCHA de Google accesible con teclado HTML 5 Outline con Headingsmap → Actualización de Contrast Checker Publicado el 24 septiembre 2013 por Rumoroso Tras un periodo en el que no pude dedicarle mucho tiempo, recientemente me he puesto a revisar la funcionalidad y la usabilidad de la extensión para Firefox Contrast Checker. La versión anterior podía analizar el color de todos los elementos de la página, pero lo hacía bajo demanda; es decir, había que pulsar un botón para ello.

Lo que he hecho ha sido eliminar la necesidad de ese botón, realizando el análisis de forma automática una vez que la página ha terminado de cargar. Por otro lado, siempre pensé que era necesario un selector que, al mover el ratón, devolviese el color del punto sobre el que se encuentra. Algo similar a lo que hace la extensión ColorZilla. Como quería implementarlo con la tecnología más sencilla, tras darle varias vueltas, se me ocurrió que utilizando el elemento canvas podría generar una captura de la página completa y obtener información a partir de su contenido.

Lo que hice fue añadir la funcionalidad para crear ese canvas, detectar la posición del ratón y obtener la información de color del píxel en esa coordenada. Creo que es una solución sencilla que permite llegar donde quería sin mayor complejidad. Además, como en muchas ocasiones he necesitado hacer capturas de páginas para mostrar diseños o para revisiones de accesibilidad, al haber añadido esta funcionalidad de forma indirecta, lo único que tuve que hacer fue incluir un botón para su descarga.

Finalmente, le di algunas vueltas a la forma de uso, la disposición de los elementos, etc., para tratar de mejorar la experiencia de usuario. No dudéis en decírmelo si no lo he conseguido, e incluso si ha sido un retroceso… Y aquí tenéis el resultado… Esta entrada fue publicada en Accesibilidad y etiquetada accesibilidad, color, contraste, wcag. Guarda el enlace permanente. ← reCAPTCHA de Google accesible con teclado HTML 5 Outline con Headingsmap → 5 respuestas a Actualización de Contrast Checker Pete dijo: 18 febrero 2014 en 23:33 He notado que el plugin antiguo incluía información sobre daltonismo.

Había un análisis para visión “normal” y otro para enfermedades oculares. (Este sitio tiene una captura de pantalla del plugin antiguo: http://openweb.eu.org/articles/text-contrasts) ¿Hay alguna manera de ver esa información en el plugin actualizado? ¿Se va a volver a añadir?

Rumoroso dijo: 19 febrero 2014 en 0:30 Hola Pete, La última versión del plugin no muestra esa información al usuario, pero todavía puede estimar los valores. Estoy trabajando para ofrecer una opción que permita ver dicha información, pero tengo que encontrar un lugar adecuado en el panel para colocarla. Si necesitas una versión con esa información, puedo subir aquí una versión temporal que la muestre. Saludos Rumoroso dijo: 20 febrero 2014 en 19:00 Hola Pete, Tras tu comentario, decidí que era el momento de subir una versión con esa información (información sobre daltonismo), así que eso he hecho.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Estará disponible tan pronto como los revisores la validen. Gracias por tu comentario… Saludos Bruce Ritter dijo: 3 febrero 2015 en 21:24 Hola Pete, ¡Gran trabajo!

Me encanta la facilidad para comprobar el contraste de color del texto en la página y que luego el texto problemático quede resaltado para poder capturarlo e incluirlo en los informes. Pero me gustaría ir un paso más allá: que generase automáticamente un informe o incluso que introdujese los defectos de accesibilidad directamente en nuestro sistema de reporte de incidencias, todo de forma automática. ¿Estarías dispuesto a compartir el código o a ofrecerlo como una biblioteca que pueda ser llamada y que devuelva la misma información que aparece en la lista de la izquierda, junto con el texto problemático y las coordenadas del cuadro delimitador en la página?

Bruce Ritter dijo: 3 febrero 2015 en 21:26 Hola Pete, ¡Gran trabajo! Me encanta la facilidad para comprobar el contraste de color del texto en la página y que luego el texto problemático quede resaltado para poder capturarlo e incluirlo en los informes. Pero me gustaría ir un paso más allá: que generase automáticamente un informe o incluso que introdujese los defectos de accesibilidad directamente en nuestro sistema de reporte de incidencias, todo de forma automática. ¿Estarías dispuesto a compartir el código o a ofrecerlo como una biblioteca que pueda ser llamada y que devuelva la misma información que aparece en la lista de la izquierda, junto con el texto problemático y las coordenadas del cuadro delimitador en la página?

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Deja un comentario Cancelar respuesta Categorías (X)HTML Accesibilidad CSS html5 Javascript movilidad web Niquelando rescripting Follow @rumoroso Niquelao Funciona con WordPress.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.