reCAPTCHA de Google accesible con teclado | Niquelao Niquelao

¿Qué tal te ha quedado?

Saltar al contenido

• 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 construidos 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: UserWay — Widget de accesibilidad 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 de qué hablo.

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 hace que dichos tres 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 teclado es sencillo. En el código son enlaces, pero carecen del atributo href, por lo que no pueden recibir el foco.

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

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. 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 de sistema de captcha por 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 en 23:25
He echado un vistazo a 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 sobre ellos. 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…
Saludos.

Related: IAAP CPACC / WAS Certification — La certificación profesional 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 rescript. Acabo de hacer un cambio para solucionarlo. El problema estaba en el evento onclick asociado a cada enlace. Dicho evento no discriminaba entre los códigos de tecla del teclado. Ahora, ese evento solo funciona con la tecla “Enter”.
Gracias por tus comentarios (útiles para solucionar errores…). Si ves algún nuevo problema… ya sabes…

Deja un comentario
Cancelar respuesta

If you are shopping: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

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.