Google reCAPTCHA toegankelijk via toetsenbord
Salta al contenido](#content)
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 o recodificar.
Esto es especialmente útil para solucionar problemas de accesibilidad en sistemas creados en torno a servicios JavaScript. Cuando no podemos recodificar el script original, la opción consiste en crear un script complementario que solucione los problemas que este genera.
Related: — con plan gratuito para empezar hoy mismo.
En esta ocasión, he desarrollado un sencillo script que logra que el sistema reCAPTCHA de Google sea accesible mediante teclado.
Este es un ejemplo de reCAPTCHA que creé para ilustrar lo que comento. Si navegamos usando la tecla Tab, el foco se sitúa en el campo de texto; pero si continuamos, 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 implica que esos tres botones no son accesibles con 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 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", conseguimos 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 observa 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 el sistema de captcha debido a 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 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
He revisado tu página de demostración. Esos elementos reciben el foco, pero no puedo seguir los enlaces. No funcionan con el teclado. Sí funcionan al hacer clic con el ratón. Estoy probando en Chrome.
Rumoroso dijo:
19 febrero 2014 en 0:16
Hola Pete, gracias por tu comentario. Acabo de ver a qué te refieres y el problema (supongo) es que el script de reCAPTCHA ha cambiado y ya no hay eventos onclick en los elementos de interacción. He modificado mi script para lanzar dicho evento al pulsar una tecla, así que creo que está solucionado…
Un saludo.
Related: — La que acredita tu experiencia en accesibilidad.
Pete dijo:
4 marzo 2014 en 17:14
Se ve genial. Solo falta un último detalle: si elijo escuchar el audio, el enlace “Get an audio challenge” cambia mágicamente a un botón “Get a visual challenge” al que no se puede acceder con la tecla Tab. No estoy seguro de si esa parte también puede ser objeto de rescripting.
Rumoroso dijo:
12 marzo 2014 en 11:00
Hola Pete,
Sí, no había detectado esa situación en el último rescripting. Acabo de realizar un cambio para solucionarlo. El problema estaba en el evento onclick asociado a cada enlace. Ese evento no discriminaba entre los códigos de tecla del teclado. Ahora, ese evento solo se activa con la tecla “Enter”.
Gracias por tus comentarios (útiles para resolver errores…). Si ves algún nuevo problema… ya sabes…
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