reCAPTCHA de Google accesible con teclado

reCAPTCHA de Google accesible con teclado | Niquelao Niquelao ¿Cómo dices que te ha quedado? Saltar al contenido Home Contrast Checker HeadingsMap Easyvalidator Sobre mí… ← EasyValidator, validación web on-line desde Firefox Actualización de Contrast Checker → reCAPTCHA de Google accesible con teclado Publicado el 22 agosto 2013 por Rumoroso El otro día introduje el término de rescripting . El rescripting es la metodología de trabajo que se utiliza para adaptar scripts, sitios web, etc. a ciertos requisitos (accesibilidad, estándares, movilidad, etc.) sin necesidad de reprogramar/recodificar . Esto es especialmente útil para solucionar problemas de accesibilidad de sistemas creados en torno a servicios javascript. Cuando no podemos recodificar el script, la opción pasa por crear un script que complemente al anterior y solucione los problemas que este origina. En esta ocasión lo que he hecho ha sido un simple script que consigue que el sistema reCAPTCHA de Google sea accesible con teclado. Este es un ejemplo de reCAPTCHA que creé para demostrar de qué hablo. Si se navega tabulando, el foco recae en el campo de texto pero si se sigue, se omiten los tres botones que tiene (recarga, versión audio y ayuda) y continua por la página. Esto hace que esos tres botones no sean accesibles con teclado, con lo que no se cumple con las WCAG 2 ( Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard ). Hacer que los tres botones sean accesibles con teclado es sencillo. En el código son enlaces, pero no tienen el atributo href , con lo que no pueden recibir el foco. Lo que hice fue crear un simple script que añada el atributo tabindex . Si a este le damos el valor “0″, conseguiremos que los enlaces se incluyan en la secuencia natural de tabulación sin alterar el orden de esta. Así, tal y como se ve en ejemplo de reCAPTCHA accesible con teclado , con un simple script podemos conseguir que se cumpla con el requisito de las WCAG 2 sin necesidad de cambiar de sistema de captcha por no poder reprogramar el código que incluye. Este es el enlace con el sencillo script que hice para el rescripting del sistema captcha . Esta entrada fue publicada en Accesibilidad , Javascript , rescripting y etiquetada accesibilidad , re-scripting , rescripting . Guarda el enlace permanente . ← EasyValidator, validación web on-line desde Firefox Actualización de Contrast Checker → 4 respuestas a reCAPTCHA de Google accesible con teclado Pete dijo: 18 febrero 2014 en 23:25 I looked at your demo page. Those elements are getting focus, but I cannot follow the links. They do not work with the Keyboard. They do work when clicked on. I am testing in Chrome. Rumoroso dijo: 19 febrero 2014 en 0:16 Hi Pete, thx for your comment. I just see what you are talking about and the problem (I guess) is that the script of recaptcha has changed and there is not onclick events in the interaction elements. I changed my script to launch that event on key press, so I think it is solved… Regards Pete dijo: 4 marzo 2014 en 17:14 Looks great. One last piece missing, if I choose to hear the audio, the “Get an audio challenge” link magically changes to a “Get a visual challenge” button which cannot be tabbed into. Not sure if that part can also be re-scripted. Rumoroso dijo: 12 marzo 2014 en 11:00 Hi Pete, Yes, I did not see that situation in the last rescript. I just made a change to solve it. The problem was in the onclick event that is associated in each link. That event did not discriminate bettwen key codes of the keyboard. Now, that event only works with “enter key”. Thanks for your feed back (usefull to solve bugs…). If you see any new problem… you know… 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.