Google reCAPTCHA tilgjengelig med tastatur

reCAPTCHA de Google accesible amb teclat | Niquelao Niquelao Com diries que t’ha quedat? Salta al contingut Inici Contrast Checker HeadingsMap Easyvalidator Sobre mi… ← EasyValidator, validació web en línia des de Firefox Actualització de Contrast Checker → reCAPTCHA de Google accessible amb teclat Publicat el 22 d’agost de 2013 per Rumoroso L’altre dia vaig introduir el terme rescripting.

El rescripting és la metodologia de treball que s’utilitza per adaptar scripts, llocs web, etc. a determinats requisits (accessibilitat, estàndards, mobilitat, etc.) sense necessitat de reprogramar o recodificar. Això és especialment útil per solucionar problemes d’accessibilitat en sistemes creats al voltant de serveis JavaScript. Quan no podem recodificar l’script, l’opció passa per crear un script que complementi l’anterior i resolgui els problemes que aquest origina. En aquesta ocasió, el que he fet ha estat un simple script que aconsegueix que el sistema reCAPTCHA de Google sigui accessible amb teclat.

Aquest és un exemple de reCAPTCHA que vaig crear per demostrar de què parlo. Si es navega prement la tecla de tabulació, el focus recau en el camp de text, però si es continua, s’ometen els tres botons que té (recarrega, versió àudio i ajuda) i es continua per la pàgina. Això fa que aquests tres botons no siguin accessibles amb teclat, cosa que incompleix les WCAG 2 (Guideline 2.1 Keyboard Accessible: Make all functionality available from a keyboard).

Fer que els tres botons siguin accessibles amb teclat és senzill. Al codi són enllaços, però no tenen l’atribut href, per la qual cosa no poden rebre el focus. El que vaig fer va ser crear un simple script que afegeixi l’atribut tabindex.

Si li donem el valor “0”, aconseguirem que els enllaços s’incloguin en la seqüència natural de tabulació sense alterar-ne l’ordre. Així, tal com es veu a l’exemple de reCAPTCHA accessible amb teclat, amb un simple script podem aconseguir que es compleixi el requisit de les WCAG 2 sense necessitat de canviar de sistema de captcha per no poder reprogramar el codi que inclou.

Aquest és l’enllaç amb el senzill script que vaig fer per al rescripting del sistema captcha. Aquesta entrada es va publicar a Accessibilitat, Javascript, rescripting i etiquetada accessibilitat, re-scripting, rescripting. Desa l’enllaç permanent. ← EasyValidator, validació web en línia des de Firefox Actualització de Contrast Checker → 4 respostes a reCAPTCHA de Google accessible amb teclat Pete va dir: 18 de febrer de 2014 a les 23:25 He mirat la vostra pàgina de demostració. Aquests elements reben el focus, però no puc seguir els enllaços.

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

No funcionen amb el teclat. Funcionen quan es fa clic. Estic provant-ho al Chrome. Rumoroso va dir: 19 de febrer de 2014 a les 0:16 Hola Pete, gràcies pel teu comentari.

Acabo de veure de què parles i el problema (suposo) és que l’script de recaptcha ha canviat i no hi ha esdeveniments onclick als elements d’interacció. He canviat el meu script perquè llanci aquest esdeveniment en prémer una tecla, així que crec que està resolt… Salutacions Pete va dir: 4 de març de 2014 a les 17:14 Sembla genial. Només falta una última cosa: si trio escoltar l’àudio, l’enllaç “Get an audio challenge” màgicament es converteix en un botó “Get a visual challenge” al qual no es pot accedir amb la tabulació.

No estic segur si aquesta part també es pot tornar a scriptar. Rumoroso va dir: 12 de març de 2014 a les 11:00 Hola Pete, Sí, no havia vist aquesta situació en l’últim rescript. Acabo de fer un canvi per solucionar-ho.

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

El problema era a l’esdeveniment onclick associat a cada enllaç. Aquest esdeveniment no discriminava entre els codis de tecla del teclat. Ara, aquest esdeveniment només funciona amb la “tecla Intro”.

Gràcies pels teus comentaris (útils per solucionar errors…). Si veus cap nou problema… ja ho saps… Deixa un comentari Cancel·la la resposta Categories (X)HTML Accessibilitat CSS html5 Javascript mobilitat web Niquelando rescripting Segueix @rumoroso Niquelao Funciona amb 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.