Google reCAPTCHA – Tastaturzugänglich

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 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.

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Sí funcionan al hacer clic sobre ellos. Estoy haciendo las pruebas 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 ese evento al pulsar una tecla, así que creo que está solucionado… Un saludo 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 Hola Pete, Sí, no había visto 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. Ese evento no discriminaba entre los códigos de tecla del teclado.

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

Ahora, ese evento solo funciona con la tecla “Enter”. Gracias por tu feedback (útil para resolver bugs…). 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 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.