Actualización de Contrast Checker

Actualización de Contrast Checker | Niquelao Niquelao ¿Cómo dices que te ha quedado? Saltar al contenido Home 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 una temporada en la que no pude mirar mucho para ella, recientemente me he puesto a revisar la funcionalidad y usabilidad de la extensión de Firefox Contrast Checker . La versión anterior podía revisar el color de todos los elementos de la página, pero lo hacía bajo demanda, es decir, apretando un botón para ello. Lo que he hecho ha sido eliminar la necesidad de ese botón, haciendo el análisis de forma automática cuando la página se ha terminado de cargar. Por otro lado, siempre pensé que hacía falta un selector que con el desplazamiento del ratón devolviese el color del punto sobre el que este se encuentre. Algo así a lo que hace la extensión ColorZilla. Como lo quería hacer con la tecnología más simple, tras darle varias vueltas se me ocurrió que utilizando el elemento canvas podría generaruna 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 pixel de esa coordenada. Creo que es una solución sencilla que permite llegar a 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, disposición de elementos, etc. para tratar de mejorar la experiencia de uso. No dudéis en decírmelo si no lo he conseguido, e incluso si ha sido un retroceso… Y aquí 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 I noticed that the old plugin had information for color blindness. There was the analysis for “Normal” vision and the analysis for eye diseases. (This site has a screen shot from the old plugin: http://openweb.eu.org/articles/text-contrasts ) Is there a way to see that information in the updated plugin? Is it going to be added back in? Rumoroso dijo: 19 febrero 2014 en 0:30 Hi Pete, The last version of the plugin has not that information for users, but it still can estimate the values. I am working to offer an option to see that info, but I have to find a place in the panel to do it. If you need a version with that information, I can upload here a temporal version that show it. Regards Rumoroso dijo: 20 febrero 2014 en 19:00 Hi Pete, After your comment, I decided that it was the moment to upload a version with that information (information for color blindness), so I just do it. It will be available as soon as the revisors validate it. Thx for your comment… Regards Bruce Ritter dijo: 3 febrero 2015 en 21:24 Hi Pete, Great job! I love the ease of checking color contrast of text on the page, then having the offending text outlined for image capture for writing it up. But I would like to take it one step further, and have it actually write a report, or even enter the accessibility defects into our defect reporting system, and have it all done automatically. Would you be willing to either share the code, or offer it as a library that can be called that will return the same information in the list that you have on the left side, along with the offending text and bounding box coordinates on the page? Bruce Ritter dijo: 3 febrero 2015 en 21:26 Hola Pete , ¡Buen trabajo ! Me encanta la facilidad de control de contraste de color de texto en la página , y luego tener el texto ofensivo esbozado para la captura de imágenes para la escritura para arriba. Pero me gustaría ir un paso más allá, y lo han hecho escribir un informe , o incluso entrar en los defectos de accesibilidad en nuestro sistema de notificación de defectos , y lo tienen todo hecho automáticamente . ¿Estaría usted dispuesto a compartir ya sea el código , o ofrecerlo como una biblioteca que se puede llamar que volverá la misma información en la lista que usted tiene en el lado izquierdo , junto con el texto ofensivo y el cuadro delimitador coordenadas en la página ? 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.