Etiquetes, agrupació i instruccions

Un camp de formulari sense etiqueta és, per a un lector de pantalla, una casella buida de la qual només se'n coneix el tipus: «quadre d'edició». La persona no sap si hi ha d'escriure el seu nom, el seu DNI o el seu codi postal. El criteri 3.3.2 Etiquetes o instruccions (A) exigeix que hi hagi etiquetes o instruccions quan el contingut requereix una entrada de l'usuari, i l'1.3.1 Informació i relacions exigeix que la relació entre l'etiqueta i el camp existeixi al codi, no només a la pantalla. En aquesta lliçó veurem com aconseguir-ho amb HTML natiu i quan cal alguna cosa més.

L'etiqueta: label i for

La manera correcta d'etiquetar un camp és l'element <label> associat pel seu atribut for a l'id del control. Aquesta associació fa tres coses: dona nom accessible al camp, amplia l'àrea de pulsació (fer clic al text enfoca el camp, una cosa valuosíssima al mòbil i per a persones amb tremolor) i permet a les eines de control per veu dir «prem Correu electrònic».

<p>Correu electrònic</p>
<input type="email" name="email">

<label for="email">Correu electrònic</label>
<input type="email" id="email" name="email" autocomplete="email">

Regles que convé gravar-se:

• Cada id ha de ser únic a la pàgina. Un id duplicat fa que el for apunti al primer i que el segon camp quedi sense nom.
• El placeholder no és una etiqueta: desapareix en escriure, sol tenir poc contrast i no tots els lectors l'anuncien. Pot complementar («Ex.: 30001») però no substituir.
• Les etiquetes han de ser visibles de manera permanent. Si el disseny no hi deixa lloc, fes servir aria-label només com a últim recurs (els camps de cerca amb un botó «Cerca» al costat són el cas típic) i recorda que el nom ha de coincidir amb el que la persona veu.
• Marca els camps obligatoris a l'etiqueta visible («Nom (obligatori)») o amb un asterisc explicat al principi del formulari, i afegeix l'atribut required perquè l'estat sigui programàtic.

Agrupar: fieldset i legend

Quan diversos controls comparteixen una mateixa pregunta (botons d'opció, caselles de selecció, els tres camps d'una data o d'un telèfon), la pregunta no pot ser l'etiqueta de cadascun. Es fa servir <fieldset> per agrupar i <legend> per a la pregunta comuna. El lector anuncia la llegenda en entrar al grup i així cada opció té sentit.

<fieldset>
  <legend>Com vols rebre la notificació?</legend>
  <input type="radio" id="n-email" name="notif" value="email">
  <label for="n-email">Per correu electrònic</label>
  <input type="radio" id="n-sms" name="notif" value="sms">
  <label for="n-sms">Per SMS</label>
  <input type="radio" id="n-postal" name="notif" value="postal">
  <label for="n-postal">Per correu postal</label>
</fieldset>

Sense el fieldset, la persona que arriba amb Tab al primer botó d'opció sent «Per correu electrònic, botó d'opció, 1 de 3» i no sap de quina pregunta es tracta. També convé agrupar les seccions llargues d'un formulari (dades personals, adreça, dades bancàries) amb fieldset o amb encapçalaments, perquè es pugui saltar d'una a l'altra. Si no pots fer servir fieldset per motius de maquetació, l'equivalent ARIA és role="group" amb aria-labelledby apuntant al text de la pregunta; per a botons d'opció personalitzats, role="radiogroup".

Instruccions i ajudes: aria-describedby

Molts camps necessiten alguna cosa més que un nom: el format esperat («DD/MM/AAAA»), una restricció («màxim 500 caràcters»), una explicació de per què es demana la dada. Aquesta informació ha de ser visible abans que la persona comenci a escriure i associada al camp amb aria-describedby, que la converteix en la seva descripció accessible. El lector l'anuncia després del nom i del tipus, normalment després d'una breu pausa.

<label for="iban">IBAN del compte</label>
<p id="iban-ayuda">24 caràcters, comença per ES. El pots escriure amb espais o sense.</p>
<input type="text" id="iban" name="iban" aria-describedby="iban-ayuda"
       autocomplete="off" inputmode="text" spellcheck="false">

aria-describedby admet diversos id separats per espais, cosa que permet encadenar l'ajuda i, quan aparegui, el missatge d'error. Les instruccions generals del formulari («Els camps amb asterisc són obligatoris», «Tens 20 minuts per completar la sol·licitud») van al principi, abans del primer camp, perquè es llegeixin abans de començar.

Tipus d'entrada i teclats

Triar el type correcte (email, tel, number, url, date) millora l'accessibilitat de franc: al mòbil apareix el teclat adequat, el navegador valida el format i el lector anuncia el tipus. Dues precaucions: type="number" no serveix per a identificadors (DNI, codis postals amb un zero inicial, targetes), perquè descarta els zeros i permet fletxes que canvien el valor per accident; fes servir type="text" amb inputmode="numeric". I type="date" té una accessibilitat desigual entre navegadors; ho tractarem a la lliçó sobre autenticació, CAPTCHA, selects i selectors de data.

Com comprovar-ho

• Prem el text de cada etiqueta: el focus ha de passar al camp. Si no hi passa, no està associada.
• Amb el lector de pantalla, recorre el formulari amb Tab: cada camp ha d'anunciar el nom, el tipus, si és obligatori i la seva descripció.
• Obre la llista de camps de formulari (a NVDA, Insert+F7, pestanya de camps): els noms s'han d'entendre sense context.
• Amb axe o WAVE, revisa «camp sense etiqueta», «id duplicat» i «fieldset sense legend».

Resum

• Cada camp necessita un <label> visible associat amb for/id; el placeholder no és una etiqueta.
• Els grups d'opcions relacionades s'embolcallen en <fieldset> amb <legend>; no ocultis mai la llegenda.
• El format, les restriccions i les ajudes es mostren abans del camp i s'associen amb aria-describedby.
• Indica l'obligatorietat de manera visible i amb required.
• Tria bé el type i l'inputmode: el teclat mòbil i la validació nativa són accessibilitat de franc.