Accessibilitat digital a React: millors pràctiques per crear aplicacions inclusives i eficients

Parlarem de la importància de l'accessibilitat digital en el desenvolupament web, destacant com implementar pràctiques accessibles des de l'inici, especialment a l'hora de crear components reutilitzables a React

L’accessibilitat digital és crucial per garantir que tothom, independentment de les habilitats o discapacitats que tingui cada persona, pugui interactuar amb el contingut que normalment consumim en tots els canals (web, mòbil, caixers…) de manera efectiva. Aquest concepte no només té un impacte directe en les persones amb discapacitat, sinó que també millora l’experiència d’usuari (UX) general i fa que les aplicacions siguin més fàcils d’utilitzar per a tothom. En el context del desenvolupament web, per exemple, l’accessibilitat ha de ser una consideració des de l’inici, diria que fins i tot una obligació.

L'hauríem d'implementar després o al principi del desenvolupament?

Construir components accessibles des de l’inici del desenvolupament no només beneficia els usuaris amb discapacitat, sinó que també millora el rendiment i la usabilitat de l’aplicació en general. Botons, enllaços, formularis, taules… Quan es dissenyen i codifiquen adequadament, pensant en l’accessibilitat, permeten que els usuaris interactuïn sense barreres, cosa que millora la satisfacció general i redueix la necessitat de modificacions posteriors i costoses.

Com apliquem això a React?

A l’hora de crear components accessibles a React, per exemple, hem de seguir unes certes pautes essencials, que ajuden a garantir que tothom podrà interactuar amb la interfície de manera efectiva. Les Pautes d’accessibilitat per al contingut web (d’ara endavant, WCAG) són una referència fonamental en aquest sentit i ens proporcionen criteris clars per al disseny accessible. I cal recordar que, per normativa europea, a partir d’aquest 2025 hem de tenir productes accessibles.

Algunes de les pràctiques més importants inclouen:

Ús d’etiquetes ARIA: les etiquetes ARIA (Accessible Rich Internet Applications) proporcionen informació addicional sobre els elements de la interfície, com ara rols, estats i propietats, que són essencials per a usuaris de tecnologies d’assistència, com per exemple lectors de pantalla.

Contrastos de color: és crucial garantir que hi hagi prou contrast entre el text i el fons per facilitar la lectura, especialment per a persones amb discapacitats visuals.

Disseny accessible: un disseny simple, clar i lògic millora la navegabilitat, especialment en dispositius d’assistència, com ara teclats o lectors de pantalla.

Quan construïm components React reutilitzables, tal com ja hem recalcat, l’accessibilitat ha de ser part integral del procés. Per exemple:

Botons: assegura’t d’utilitzar etiquetes <button> en comptes de <div> o <span> (i recorda’t també de no posar un role=”button” a un button, perquè ja ve de fàbrica!), perquè els botons natius tenen accessibilitat incorporada, com ara enfocament i rols correctes. Si utilitzes un <div> per necessitat, assegura’t d’agregar rols i atributs ARIA adequats

<button onClick={handleClick}>Enviar</button>

Enllaços: els enllaços han de ser clars i tenir una funció definida. Utilitza un <a> amb l’atribut href correctament establert, i assegura’t que el text de l’enllaç sigui descriptiu; és el que per norma general llegirà un lector de pantalles 🙂

<a href=”/contact” title=”Anar a la pàgina de contacte”>Contacte</a>

Modals i diàlegs: els modals s’han de manejar adequadament per garantir que els usuaris puguin navegar-hi sense perdre el focus. Utilitzar etiquetes ARIA, com aria-labelledby i aria-hidden, és essencial. També pots utilitzar altres tècniques, com focus traps.

<div role=”dialog” aria-labelledby=”modalTitle” aria-hidden=”false”>
<h2 id=”modalTitle”>Formulari de contacte</h2>
<!– mi modal…–>
</div>

Formularis: els formularis han de tenir etiquetes adequades i rols que ajudin en la navegació. No t’oblidis d’afegir-hi atributs aria-describedby i aria-required quan calgui.

<form>
<label htmlFor=”email”>Adreça electrònica</label>
<input id=”email” type=”email” aria-required=”true” />
</form>

Optimització de components accessibles

A més de l’accessibilitat, l’optimització del rendiment és un factor important. Assegura’t que els components accessibles siguin eficients sense sacrificar l’experiència de l’usuari. Tècniques com el lazy loading d’imatges i contingut pesat ajuden a millorar el rendiment, ja que asseguren que només es carreguin quan calgui, però de manera inclusiva.

Per exemple, per a imatges, pots utilitzar loading=”lazy” a l’etiqueta <img>:

<img src=”imagen.jpg” alt=”Descripció de la imatge” loading=”lazy” />

Això millora el rendiment sense comprometre l’accessibilitat. A React també hi tenim diverses eines, com la renderització dinàmica en conjunt amb Suspense. Ben integrats, optimitzem molt la càrrega sense comprometre l’accessibilitat.

Eines i proves d'accessibilitat (A11y)

Hi ha diverses eines útils per provar l’accessibilitat de la teva aplicació.

Axe DevTools: un conjunt d’eines per detectar problemes d’accessibilitat en temps real.

Lighthouse: una eina d’auditoria de Google que pot avaluar l’accessibilitat, el rendiment i altres aspectes clau de la teva aplicació.

Aquestes eines t’ajudaran a identificar i solucionar problemes d’accessibilitat abans no arribin als usuaris finals.

Testing per a accessibilitat

El testing d’accessibilitat també es pot integrar fàcilment en el teu flux de treball de desenvolupament. Utilitzar eines com React Testing Library et permet escriure proves que verifiquen que els components siguin accessibles i funcionin correctament en diferents contextos d’accessibilitat.

Per exemple, tenim el getByRole, que és la manera més desitjada de rescatar el nostre element a l’hora de fer testing. Si efectuem bé el getByRole i ens torna el que esperem, llavors el nostre component ja té una part de l’a11y testada. Verifiquem que, existint, té el seu rol perfectament.

test(‘el botó té el text correcte’, () => {
render(<SubmitComponent/>);
const mybutton = screen.getByRole(‘button’);
expect(mybutton).toHaveTextContent(‘Enviar’);
});

I per acabar...

L’accessibilitat ha de ser una prioritat en el desenvolupament web, especialment quan es creen components reutilitzables a React. No només millora l’experiència dels usuaris amb discapacitat funcional, sinó que també optimitza el rendiment i la usabilitat en general. Seguint les pautes WCAG, utilitzant etiquetes ARIA i fent proves d’accessibilitat, podem crear aplicacions més inclusives, fàcils d’utilitzar i amb un millor rendiment per a tothom.