Accessibilitat web: què és i a qui obliga de debò

L'accessibilitat web no va de complir un paper: va que la gent pugui fer servir el teu web. A Espanya hi ha 4,38 milions de persones amb alguna discapacitat o limitació, 94,9 de cada mil habitants, i la dada que canvia la conversa per a un negoci local és una altra: el 75,4 % d'aquest grup té 55 anys o més, segons l'enquesta de discapacitat de l'INE. No parlem d'un col·lectiu llunyà: parlem dels teus clients de sempre, uns anys més tard.

Què és l'accessibilitat web, sense tecnicismes

És que el teu web es pugui llegir, entendre i fer servir encara que qui hi hagi a l'altra banda hi vegi poc, hi senti poc, no pugui fer servir el ratolí o simplement tingui el mòbil al sol en una terrassa. Res d'això és una situació rara: la meitat són coses que ens passen a tots algun dia, només que a uns els passa sempre.

No és una capa que s'afegeix al final ni un mode especial de la pàgina. És el mateix web, fet de manera que no faci nosa.

A qui obliga l'accessibilitat web a Espanya

Aquí convé ser exactes, perquè circula molta por venuda a pes. La norma que ho regula és la Llei 11/2023, que transposa una directiva europea i que s'aplica a una llista concreta de productes i serveis, no a tots els webs del país.

Què hi entra i què no

Hi entren, entre d'altres, els serveis de comerç electrònic, que la llei defineix com els prestats a distància a través de webs i aplicacions mòbils per celebrar un contracte amb un consumidor. En cristià: si al teu web s'hi compra, ets a la llista. També hi entren banca, transport de viatgers, telecomunicacions o llibres electrònics. Un web que només explica què fas i té un formulari de contacte no és un servei de comerç electrònic.

L'excepció que afecta gairebé tothom qui llegeix això

La llei diu que les microempreses que presten serveis estan exemptes de complir aquests requisits i de qualsevol obligació relacionada. I defineix microempresa amb dos números: menys de deu persones empleades i un volum de negoci anual que no superi els dos milions d'euros, o un balanç anual que tampoc els superi.

O sigui que la majoria de botigues en línia petites d'aquí no tenen l'obligació legal. Dir-ho no és treure-li importància, és el contrari: si ho fas, que sigui perquè et convé, no perquè algú t'ha espantat.

Per què t'interessa encara que la llei no t'obligui

Perquè qui no pot fer servir el teu web no t'escriu per avisar-te. Se'n va, i tu veus una visita més que no ha fet res. Un text gris clar sobre fons blanc, un botó que només es distingeix pel color o un formulari que no diu quin camp ha fallat no generen una queixa, generen un abandonament silenciós.

I hi ha un efecte secundari que es nota de seguida: el que fa un web accessible —titulars ordenats, textos clars, botons grans, imatges descrites— és gairebé el mateix que fa un web que s'entén a la primera. Beneficia tothom, no només qui ho necessita.

Les quatre idees de la norma, en cristià

L'estàndard internacional el manté el W3C i es diu WCAG. Sona a enginyeria, però se sosté sobre quatre idees que s'entenen en una frase cadascuna:

• Perceptible: que es pugui veure o sentir. Contrast suficient, text que no sigui una imatge, vídeos amb subtítols.
• Operable: que es pugui manejar. Amb el ratolí, amb el dit, amb el teclat i sense presses ni comptes enrere.
• Comprensible: que s'entengui. Llenguatge normal, un ordre previsible i errors que expliquin què passa.
• Robust: que funcioni amb el que faci servir el visitant, inclosos els lectors de pantalla.

Té tres nivells, A, AA i AAA. El que es demana a la pràctica és l'AA, i és al qual s'arriba amb feina normal de disseny i programació.

Els errors d'accessibilitat web que veiem a gairebé tots els webs

• Text gris clar perquè queda elegant a la pantalla del dissenyador.
• Fotos sense descripció, que per a un lector de pantalla són un forat.
• Titulars que són titulars només de mida, sense estructura a sota.
• Formularis amb l'etiqueta dins del camp, que desapareix en escriure.
• Enllaços que posen «aquí» i no diuen on porten.
• Vídeos amb veu i sense subtítols, que a més es veuen sense so al mòbil.
• Finestres emergents que no es tanquen ni amb el teclat ni amb el dit.

Cap no és un problema de diners. Són decisions que es van prendre sense pensar en això.

El contrast: l'error més repetit i el més fàcil d'arreglar

El text normal necessita una relació de contrast de 4,5 a 1 amb el seu fons, i el text gran, de 3 a 1. No cal fiar-se de l'ull: hi ha mesuradors gratuïts on enganxes els dos colors i et diu el número.

On sol fallar

Als textos secundaris en gris, als botons de color clar amb lletra blanca i, sobretot, al text a sobre d'una foto. Allà la solució no és canviar la lletra: és posar una capa fosca a sota o moure el text fora de la imatge.

El text alternatiu de les fotos

Cada imatge que aporta informació necessita una frase que la descrigui, i les que són pur adorn es marquen com a decoratives perquè el lector de pantalla les salti. La regla pràctica: escriu el que li diries a algú per telèfon, no un munt de paraules clau seguides. De passada, és el mateix que demanem a fotos per al teu web, on també expliquem quin pes ha de tenir cada imatge.

Els títols ordenen la pàgina per a qui no la veu

Un lector de pantalla pot saltar de titular en titular, com qui passa el dit per l'índex d'un llibre. Si els titulars estan posats per mida i no per jerarquia, aquest índex no existeix i només queda escoltar-ho tot de dalt a baix. Un h1 per pàgina i els h2 en ordre ho arreglen, i és exactament el que ja toca fer per escriure bé, com expliquem a textos per a la teva pàgina web.

El formulari: etiquetes, errors i res de paranys

L'etiqueta va fora del camp i s'hi queda mentre escrius. Els errors es diuen amb paraules, no només pintant la vora de vermell, perquè hi ha qui no distingeix aquest vermell. I l'avís que el missatge s'ha enviat ha de ser text, no una icona verda i prou. Si a sobre els missatges no t'arriben, això és una altra història i és a per què no t'arriben els missatges del formulari.

Que tot funcioni amb el teclat

Hi ha gent que no fa servir ratolí, per tremolor, per dolor o perquè navega amb un lector de pantalla. Tot el que es pugui fer amb el ratolí ha de poder-se fer amb el teclat, i s'ha de veure per on vas: aquell requadre que marca l'element actiu no es treu, encara que al dissenyador li sembli lleig.

La prova del tabulador

Obre el teu web, no toquis el ratolí i ves prement el tabulador. Si pots arribar al menú, als enllaços, al formulari i al botó d'enviar, i en tot moment veus on ets, vas bé. Si en algun punt desapareix el focus o et quedes atrapat dins d'una finestra emergent, ja tens el primer arranjament. Triga dos minuts.

Vídeo i àudio: subtítols abans que res

Els subtítols no són només per a qui no hi sent. Al mòbil, la majoria de la gent mira els vídeos sense so, així que un vídeo sense subtítols és un vídeo que gairebé ningú entén. Si a més hi ha una transcripció escrita a sota, hi guanyes dues coses: la gent que prefereix llegir i un text que Google sí que pot indexar.

Què li fa l'accessibilitat web al SEO i a les IA

No és màgia ni un factor secret de posicionament, però se solapen molt. Els encapçalaments ordenats, els enllaços amb nom propi, les imatges descrites i un web que carrega ràpid al mòbil són la base de qualsevol feina de posicionament SEO i també que un assistent d'intel·ligència artificial pugui llegir-te i citar-te, que és de què va el posicionament GEO. La velocitat va al mateix paquet i l'expliquem a part a per què el teu web va lent al mòbil.

Com comprovar l'accessibilitat web de la teva pàgina en deu minuts

No cal una auditoria per començar. Amb revisar quatre coses es veu de seguida si hi ha un problema gros o només detalls.

Tres comprovacions sense instal·lar res

• Fes gran la lletra al dos-cents per cent al navegador. Si se solapen coses o desapareixen botons, hi ha feina.
• Treu el so a un vídeo i mira si s'entén.
• Navega amb el tabulador i comprova que es veu per on vas.

Els automàtics detecten una part, no tot: un text alternatiu que posa «imatge1» passa el test i no serveix de res. La meitat d'això només ho veu una persona mirant.

Què no és accessibilitat web

Aquella icona de ninot que obre una barreta amb botons per fer la lletra gran i canviar els colors. Es ven com a solució d'un dia i per sobre queda bé, però no arregla el que està malament a sota: si les teves fotos no tenen descripció i el teu formulari no té etiquetes, la barreta no se les inventa. Serveix de pedaç i, de vegades, de coartada.

Què costa un web accessible

Fet des del principi, pràcticament res: són decisions de disseny, no hores extra. Als nostres preus, Tu Landing són 100 € al mes i Tu Web, de fins a deu subpàgines, 200 € al mes, més IVA i sense permanència, amb domini, allotjament, correu i manteniment inclosos. No cobrem l'accessibilitat a part perquè no és un extra, és fer bé la feina.

Arreglar-ho després sí que costa, i depèn d'amb què estigui fet el web. Aquesta diferència la desglossem a WordPress o web a mida.

Per on començar si el web ja està fet

Pel contrast i per les descripcions de les fotos, que s'arreglen en una tarda i són la meitat dels errors. Després, el formulari i el teclat. I si véns per internet, revisa el procés de compra sencer, perquè és on més es perd: ho expliquem per dins a quant costa una botiga en línia. Les revisions periòdiques entren al manteniment web, juntament amb les còpies i les actualitzacions.

I compte amb una confusió habitual: la declaració d'accessibilitat és obligatòria per al sector públic, no per a la botiga de la cantonada. El que sí que necessita qualsevol web són els seus textos legals.

Com ho fem nosaltres, des de Sant Antoni de Calonge

Quan muntem un web ja surt així, sense que calgui demanar-ho. I si el teu ja està fet, el mirem i et diem què té arranjament ràpid, què té arranjament car i què no val la pena tocar. Explica'ns l'adreça i et contestem amb la llista, sense compromís.