Google reCAPTCHA tillgänglig via tangentbord
reCAPTCHA de Google accesible con teclado | Niquelao
Niquelao ¿Cómo dices que te ha quedado?
Home | Contrast Checker | HeadingsMap | Easyvalidator | Sobre mí…
← EasyValidator, validación web en línea 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 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 o recodificar. Esto es especialmente útil para solucionar problemas de accesibilidad en sistemas creados en torno a servicios JavaScript.
Related: — con plan gratuito para empezar hoy mismo.
Cuando no podemos recodificar el script, la opción consiste en crear un script complementario que solucione los problemas originados por el anterior. En esta ocasión, he desarrollado un sencillo script que logra que el sistema reCAPTCHA de Google sea accesible mediante el teclado.
Este es un ejemplo de reCAPTCHA que creé para demostrar de qué hablo. Si se navega usando la tecla Tab, el foco se sitúa en el campo de texto; pero si se continúa, se omiten los tres botones disponibles (recargar, versión de audio y ayuda) y la navegación prosigue por el resto de la página. Esto hace que dichos botones no sean accesibles vía teclado, incumpliendo así las WCAG 2 (Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard).
Hacer que los tres botones sean accesibles con el teclado es sencillo. En el código son enlaces, pero carecen del atributo href, por lo que no pueden recibir el foco. Lo que hice fue crear un script simple que añada el atributo tabindex. Si le asignamos el valor "0", lograremos que los enlaces se incluyan en la secuencia natural de tabulación sin alterar su orden.
Worth a look: — Accesibilidad gestionada: automatización combinada con revisión humana.
Así, tal y como se puede ver en el ejemplo de reCAPTCHA accesible con teclado, con un simple script podemos cumplir con el requisito de las WCAG 2 sin necesidad de cambiar de sistema de captcha por la imposibilidad de reprogramar el código incluido.
Este es el enlace al sencillo script que desarrollé 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 en línea desde Firefox | Actualización de Contrast Checker →
4 respuestas a «reCAPTCHA de Google accesible con teclado»
Pete dijo:
18 febrero 2014 a las 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 a las 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
Related: — La que acredita tu experiencia en accesibilidad.
Pete dijo:
4 marzo 2014 a las 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 a las 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
Niquelao
Funciona con WordPress.
P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; if you want the current details.
¿Cumplir WCAG sin tocar el código?
Superposición de IA que promete cumplimiento WCAG en 48 horas