Els formularis són una part essencial de moltes aplicacions web, ja que permeten als usuaris introduir i enviar informació. Assegurar-se que els formularis siguin accessibles és crucial per garantir que tots els usuaris, incloses les persones amb discapacitats, puguin interactuar amb ells de manera efectiva.

1. Etiquetes (Labels) Clarament Associades:

   • Cada camp de formulari ha de tenir una etiqueta (<label>) clarament associada. Això ajuda els usuaris de lectors de pantalla a entendre el propòsit de cada camp.
   • Exemple:

     <label for="email">Correu Electrònic:</label>
     <input type="email" id="email" name="email">
     

2. Ordre de Navegació Lògic:

   • L'ordre de navegació amb el teclat ha de seguir una seqüència lògica. Utilitza l'atribut tabindex només quan sigui necessari per corregir l'ordre natural.
   • Evita l'ús excessiu de tabindex per no complicar la navegació.

3. Indicadors de Requeriment:

   • Indica clarament quins camps són obligatoris. Això es pot fer visualment i mitjançant atributs com aria-required.
   • Exemple:

     <label for="name">Nom: <span aria-hidden="true">*</span></label>
     <input type="text" id="name" name="name" aria-required="true">
     

4. Missatges d'Error Accessibles:

   • Proporciona missatges d'error clars i accessibles quan es produeixen errors de validació.
   • Utilitza aria-live per assegurar-te que els lectors de pantalla notifiquin els usuaris dels errors.
   • Exemple:

     <div aria-live="assertive" id="error-message" style="color: red;">
       <!-- Missatge d'error aquí -->
     </div>
     

5. Descripcions Addicionals:

   • Utilitza aria-describedby per proporcionar informació addicional sobre un camp de formulari.
   • Exemple:

     <label for="password">Contrasenya:</label>
     <input type="password" id="password" name="password" aria-describedby="password-help">
     <small id="password-help">La contrasenya ha de tenir almenys 8 caràcters.</small>
     

Crea un formulari de registre amb els següents camps: Nom, Correu Electrònic, Contrasenya i Confirmació de Contrasenya. Assegura't que el formulari sigui accessible seguint els conceptes clau esmentats.

Solució Proposada:

Modifica el formulari anterior per incloure missatges d'error accessibles quan els camps obligatoris no es completen correctament.

Solució Proposada:

Els formularis accessibles són essencials per garantir que tots els usuaris puguin interactuar amb les aplicacions web de manera efectiva. Mitjançant l'ús d'etiquetes clares, missatges d'error accessibles i una navegació lògica, podem millorar significativament l'experiència d'usuari per a persones amb discapacitats. Practicar aquests principis en els teus projectes t'ajudarà a crear aplicacions més inclusives i accessibles.