Formularis de contacte accessibles i l'Acta europea d'accessibilitat

Un formulari de contacte sovint és l'única porta entre un visitant i el seu negoci. Si aquesta porta només es pot obrir amb un ratolí, bona vista i paciència per resoldre un trencaclosques d'imatges borroses, algunes persones simplement es queden fora. Des de mitjan 2025, ja no és només una qüestió d'usabilitat: per a moltes empreses que venen a consumidors de la UE, ha passat a ser una qüestió jurídica.

Què cobreix l'Acta europea d'accessibilitat

L'Acta europea d'accessibilitat (Directiva (UE) 2019/882) s'aplica des del 28 de juny de 2025. Estableix requisits d'accessibilitat per a determinats productes i serveis oferts als consumidors, entre els quals hi ha el comerç electrònic, els serveis bancaris per a consumidors, els llibres electrònics, les comunicacions electròniques i parts del transport de passatgers. En un lloc web, això vol dir la botiga en línia o el servei bancari en conjunt, inclosos els formularis que els clients utilitzen per contactar, fer preguntes o presentar reclamacions. Les microempreses que presten serveis n'estan exemptes: empreses amb menys de deu treballadors i un volum de negocis anual o un balanç general anual no superior a EUR 2 milions. Les ofertes adreçades exclusivament a altres empreses generalment queden fora del seu àmbit d'aplicació.

Cada estat membre ha transposat la directiva al dret nacional. A Alemanya és la Barrierefreiheitsstärkungsgesetz (BFSG); a Polònia, una llei de 2024 per garantir que determinats productes i serveis compleixin els requisits d'accessibilitat. Les autoritats de supervisió i les sancions varien segons el país, però el criteri tècnic és, en termes generals, el mateix: a la pràctica, la norma europea EN 301 549, que al seu torn es basa en les Directrius d'accessibilitat per al contingut web (WCAG).

Per què compensa fins i tot sense obligació legal

Potser la seva empresa n'està exempta o només presta serveis a altres empreses. Tot i així, els formularis accessibles valen la pena per una raó senzilla: cada persona que abandona a mig camí és una consulta que mai no rebrà. Les millores que ajuden una persona que utilitza un lector de pantalla també ajuden qui emplena el formulari amb un telèfon en un tren, sota una llum solar intensa, amb un canell trencat o en una segona llengua. Etiquetes clares i missatges d'error útils redueixen els abandonaments per a tothom, i cap d'aquestes millores debilita la protecció contra els missatges brossa.

Una llista pràctica de comprovació amb referències a les WCAG 2.2

• Etiquetes visibles vinculades als camps (1.3.1, 3.3.2): cada camp té una etiqueta visible connectada mitjançant for/id. Un text de marcador de posició per si sol no és una etiqueta: desapareix tan bon punt algú comença a escriure.
• Missatges d'error que expliquen com corregir-los (3.3.1, 3.3.3): identifiqui el camp, indiqui què no és correcte i com solucionar-ho, amb text i no només amb una vora vermella. «Introdueixi una adreça de correu electrònic com name@example.com» és millor que «Entrada no vàlida».
• Funcionament complet amb teclat (2.1.1, 2.1.2): es pot arribar a tots els camps, caselles, CAPTCHA i al botó d'enviament, i utilitzar-los amb Tab, espai i retorn, sense trampes de teclat.
• Focus visible (2.4.7): sempre es pot veure quin camp està actiu. Eliminar el contorn del focus del navegador sense substituir-lo incompleix aquest criteri.
• Contrast suficient (1.4.3): el text, les etiquetes i els missatges d'error tenen una relació de contrast respecte del fons d'almenys 4.5:1 (3:1 per al text gran).
• Mida dels elements d'interacció (2.5.8): els botons, les caselles i els enllaços mesuren almenys 24 × 24 píxels CSS o tenen prou espai al voltant.
• Alternatives als CAPTCHA (1.1.1) i autenticació accessible (3.3.8): 1.1.1 exigeix una alternativa textual i el CAPTCHA en més d'una modalitat sensorial; 3.3.8 cobreix estrictament els passos d'inici de sessió, però la idea es pot aplicar més enllà: un trencaclosques com tornar a escriure lletres distorsionades o resoldre una suma no hauria de ser l'única manera de continuar. Ofereixi una alternativa o utilitzi un mètode que no necessiti cap trencaclosques.
• Camps trampa ocults a les tecnologies de suport: el contenidor del camp trampa porta aria-hidden="true" i el camp porta tabindex="-1", de manera que les persones que utilitzen lectors de pantalla o teclat mai no hi arriben.

CAPTCHA i camps trampa: on es troben la protecció contra els missatges brossa i l'accessibilitat

Estrictament, el criteri 3.3.8 tracta dels passos d'inici de sessió i autenticació, no dels formularis de contacte. Tot i això, la idea que hi ha al darrere s'hi aplica bé: escriure lletres distorsionades, resoldre una suma o seleccionar semàfors en una graella d'imatges exclou completament algunes persones. Les opcions que normalment funcionen sense cap trencaclosques —com Cloudflare Turnstile, Friendly Captcha, un camp trampa combinat amb una comprovació temporal o filtratge al servidor com Akismet— mantenen fora els missatges brossa sense demanar als visitants que demostrin res. Un camp trampa només és amable si és realment invisible, també per a les persones que utilitzen lectors de pantalla i teclat:

<div class="hp" aria-hidden="true">
  <label for="hp-website">Deixi aquest camp buit</label>
  <input type="text" id="hp-website" name="website"
         tabindex="-1" autocomplete="off">
</div>
<!-- CSS: .hp { position: absolute; left: -10000px; } -->

Provi el seu formulari en quinze minuts

1. 1Deixi el ratolí de banda i empleni tot el formulari només amb el teclat. Pot arribar a tots els camps i al botó d'enviament, i pot veure sempre on és?
2. 2Enviï el formulari buit i, després, amb una adreça de correu electrònic incorrecta. Els errors apareixen com a text al costat del camp corresponent i queda clar què cal fer?
3. 3Obri la pàgina en un telèfon o ampliï el navegador al 200%. Tot es pot llegir, els botons es poden tocar fàcilment i algun bàner de galetes o giny de xat tapa el botó d'enviament?
4. 4Activi un lector de pantalla (VoiceOver, NVDA o TalkBack) i escolti: s'anuncien tots els camps amb la seva etiqueta i el camp trampa roman en silenci?
5. 5Executi una comprovació automatitzada com axe-core. Troba ràpidament les etiquetes que falten i els problemes de contrast, però no ho detecta tot: continuen sent necessaris els passos manuals anteriors.

Si prefereix començar amb una visió general, formexposed examina els seus formularis públics des de l'exterior, sense enviar res. Les comprovacions d'accessibilitat executen axe-core a cada formulari, assenyalen els CAPTCHA sense una alternativa accessible i els camps trampa que els lectors de pantalla anuncien, i examinen el formulari en un telèfon: elements d'interacció tàctil, capes superposades que tapen el botó d'enviament i desplaçament horitzontal. La comprovació gratuïta mostra el nivell general; aquests detalls són a l'informe complet. És un bon punt de partida per a la llista anterior, no un substitut de les proves amb persones reals.