Gli umili <label>. È comune. È chiaro. È basilare. È banale. A prima vista, non ha niente di speciale. Spesso utilizzato come semplice obiettivo per i CSS per modellare del testo. Cos'altro c'è da sapere? Schiaffeggia quel piccoletto sopra il campo del modulo e torniamo a Javascript per CSS per rendere la nostra pagina dinamica ed eccitante, giusto?

Forse no.

Preambolo

Scommetterei una bella somma che quasi tutti i professionisti con accesso a un server HTTP hanno scritto sulle etichette. Sarebbe facile definirlo come un cavallo morto, ma secondo il WebAIM Million Report of 2023 , del milione di home page più importanti su Internet, il 96,3% di esse presentava almeno un errore di accessibilità rilevato e di quelle pagine il 45,9% conteneva errori con le etichette dei moduli. Questo lo colloca al 4° problema di accessibilità più comune dopo contrasto cromatico insufficiente, immagini senza testo alternativo e link senza nome accessibile. Entrambi i numeri hanno registrato una tendenza al ribasso negli ultimi 5 anni, ma c'è ancora molto lavoro da fare per ridurli. Se questo post fa pensare ad almeno una persona "Woah, non lo sapevo", lo considererò un successo entusiasmante

Lo scopo di un'etichetta

Quando pensiamo a un'etichetta nel frame di un'applicazione Web, probabilmente immaginiamo un form, adiacente a elementi come campi di testo, pulsanti di opzione, caselle di controllo e così via. Trasmettono valori attesi come nomi e date o ciò che rappresentano altre selezioni. Visivamente ha senso, ma c'è dell'altro in gioco.

Perchè importa

Quando eliminiamo il termine monolitico "utenti", dobbiamo capire che gli utenti sono persone. Le persone sono uniche e complesse e possono perdersi nel frenetico mondo dello sviluppo software. Progettare pensando all'inclusività richiede un cambiamento mentale; quando immaginiamo solo l'utente “medio” come nostro target allora corriamo il rischio di escludere fasce di persone dalle nostre applicazioni. Le persone con disabilità sopportano il peso di questa esclusione, ma non deve essere così.

E la buona notizia: le etichette accessibili sono facili. Direi che sono una delle "vittorie" di accessibilità più facili che un team possa ottenere. Immergiamoci e impariamo cosa rende un'etichetta accessibile e, cosa altrettanto importante, utilizzabile.

Rendiamolo accessibile

Immagina due persone con situazioni diverse.

Jeremy ha 41 anni. Lavora come consulente finanziario presso una banca locale. Ama nuotare, fare escursioni e fare campeggio con amici e familiari. Anche Jeremy è cieco, a causa delle complicazioni dovute a un intervento chirurgico al cervello nei suoi primi 30 anni. Jeremy utilizza uno screen reader per interagire con la tecnologia sia in funzione del suo lavoro che nel tempo libero.

Viola ha 73 anni. È andata in pensione dopo una carriera di successo come avvocato. Nella sua pensione, ha viaggiato per il mondo per visitare luoghi storici e le città natale dei suoi genitori, che erano immigrati dall'Europa orientale. Di recente si è trasferita a vivere più vicino ai suoi nipoti. Violet ha l'artrite in entrambe le mani. Preferisce utilizzare il software di riconoscimento vocale per interagire con il computer e il telefono per evitare dolori inutili.

Sia Jeremy che Violet stanno cercando di utilizzare la stessa pagina Web: un portale per i pazienti sul sito Web del loro medico, che offre la possibilità di pagare le spese mediche, aggiornare le proprie informazioni personali, fissare appuntamenti e così via.

Il problema di Jeremy:

"Devo utilizzare la mia carta di credito per pagare la mia fattura medica, ma non riesco a capire quali siano i campi della pagina di pagamento."

Se le etichette non sono associate correttamente agli elementi del modulo, uno screen reader leggerà solo il tipo di elemento, non il testo nelle vicinanze.

Il problema di Violetta:

"Ho bisogno di cambiare il mio indirizzo sul mio file ma non importa quello che dico al computer, il pulsante Salva non farà clic."

Come l'esempio del lettore di schermo sopra, anche il software di riconoscimento vocale si basa sulla corretta associazione di etichette per navigare e attivare campi e pulsanti del modulo.

Giusto. Entrambi questi problemi sono causati da elementi del modulo etichettati in modo inadeguato. Diamo un'occhiata al codice che in genere produce questi risultati.

Il problema di Jeremy in codice

Esaminiamo il modulo di pagamento.:

<form>
  <label>Card Number</label>
  <input type=”text” id=”card-number” />
  <label>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

L' forattributo

Il modo più semplice è utilizzare l' forattributo. È un attributo nativo dell'elemento <label>. Il suo valore atteso è l' idattributo dell'elemento del form di destinazione. Nel nostro esempio, abbiamo tre input con ids: card-number, expiration-datee security-code. Possiamo aggiungere l' forattributo alle etichette e impostare il loro valore sull'id di input corrispondente. Vediamo come appare.

<form>
  <label for=”card-number”>Card Number</label>
  <input type=”text” id=”card-number” />
  <label for=”expiration-date”>Expiration Date</label>
  <input type=”text” id=”expiration-date”/>
  <label for=”security-code”>Security Code</label>
  <input type=”text” id=”security-code”/>
  <button type=”submit” id=”submit”>Submit</button>
</form>

Alcune cose da tenere a mente

• L' forattributo deve essere sull'elemento <label>, non sull'input.
• L'elemento di input deve avere un idattributo. Il <label>può ancora avere il suo idattributo, ma non è rilevante qui.
• La relazione tra etichetta e input è uno a uno.

Usando ARIA

ARIA è un potente insieme di attributi che possono essere aggiunti agli elementi per informare le tecnologie assistive sul nome, lo stato e il ruolo di un elemento. Nel nostro caso, possiamo utilizzare l'attributo aria-labelledby per associare un'etichetta a un input. Diamo un'occhiata a come funziona.

<form>
  <label id="card-number-label">Card Number</label>
  <input type="text" aria-labelledby="card-number-label" />
  <label id="expiration-date-label">Expiration Date</label>
  <input type="text" aria-labelledby="expiration-date-label"/>
  <label id="security-code-label">Security Code</label>
  <input type="text" aria-labelledby="security-code-label"/>
  <button type="submit" id="submit">Submit</button>
</form>

<form>
 <label id=”card-number-label”>Card Number</label>
 <label id=”card-number-instructions”>Enter the 16 digit number on the front of your card</label>
 <input type=”text” id=”card-number” aria-labelledby=”card-number-label card-number-instructions”/>
 ...
</form>

Ora che abbiamo risolto il problema che Jeremy stava affrontando, esaminiamo cosa non va nella pagina che sta usando Violet.

Il problema di Violet in codice

La pagina che Violet sta utilizzando contiene campi modulo per le sue informazioni di contatto e pulsanti in una barra degli strumenti per eseguire funzioni di salvataggio e annullamento. Questi due pulsanti sono rappresentati solo da icone, senza etichetta testuale visibile. Questo di per sé può essere migliorato, ma nel mondo reale è una situazione comune in cui imbattersi.

Ecco il nostro codice con il problema.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only”></button>
  <button type=”button” id=”cancel” class=”icon-only”></button>
</form>

Usare ARIA (di nuovo)

L' aria-labelattributo può essere utilizzato per fornire direttamente un nome accessibile alla maggior parte degli elementi HTML. Il suo valore è il testo esposto alle tecnologie assistive. Questo dovrebbe essere un linguaggio umano, poiché i lettori di schermo annunceranno il testo dell'etichetta aria e gli utenti del software di riconoscimento vocale lo useranno per interagire con l'elemento.

<form>
  <label for=”address1">Address 1</label>
  <input type=”text” id=”address1" />
  <label for=”address2">Address 2</label>
  <input type=”text” id=”address2"/>
  <button type=”button” id=”save” class=”icon-only” aria-label=”Save”></button>
  <button type=”button” id=”cancel” class=”icon-only” aria-label=”Cancel”></button>
</form>

Ci sono molte sfumature con aria-label ma meritano un articolo a parte. Per il nostro semplice esempio, questo sarà sufficiente. Fai solo attenzione a non abusare aria-label when di or aria-labeledby would do the same job.

Siamo accessibili ora!

Con queste semplici modifiche sia Jeremy che Violet possono completare l'attività che si erano proposti di svolgere nelle rispettive pagine. Usando queste tecniche ci siamo assicurati che gli elementi sul modulo siano correttamente identificati dalle tecnologie assistive e che le informazioni siano trasmesse alle persone che le utilizzano. Schiaccia un adesivo Accessible™ su di esso e chiamalo un giorno.

… Ma possiamo fare di meglio

Non dovremmo mai fermarci al punto in cui selezioniamo semplicemente la casella accanto ai criteri di successo WCAG 2.1. WCAG stabilisce una linea di base per rimuovere le barriere per le persone con disabilità quando utilizzano il web, ma dovremmo sempre cercare di fare di meglio del semplice "possibile da usare" e mirare a "piacevole da usare". Accessibilità e usabilità vanno di pari passo ed esiste una tecnica molto semplice che possiamo implementare per migliorare drasticamente l'esperienza per gli utenti che compilano i moduli.

La nostra nuova persona

Immaginiamo qualcuno a cui potresti non pensare immediatamente quando senti la parola "accessibilità".

Mia è una matricola all'Università della Florida centrale per conseguire una laurea in astrofisica. È una studentessa molto brillante e una lavoratrice diligente. La sua attenzione ai dettagli e il suo acuto senso della moda la rendono l'esperta di riferimento quando uno dei suoi amici aggiorna il proprio guardaroba. Mentre si trasferiva nel suo dormitorio e disimballava una scatola, ha accidentalmente tagliato l'indice della sua mano dominante con un taglierino.

Alcune disabilità sono temporanee. Anche un piccolo infortunio può ridurre il raggio di movimento di qualcuno, rendendo molto più difficili le attività che dava per scontate. Con il dito tagliato in una benda di garza, Mia deve usare il telefono in un modo a cui non è abituata.

Il problema di Mia

"Devo inserire le mie informazioni sanitarie sul sito di questo medico, ma continuo a selezionare le caselle sbagliate perché il mio telefono è scomodo da usare!"

Può essere una sfida interagire con campi come caselle di controllo e pulsanti di opzione sui telefoni nel migliore dei casi, ma anche con un infortunio comune può rapidamente trasformarsi in frustrazione. Mia deve selezionare le caselle accanto ai farmaci per la tiroide che assume per fornire il suo background di salute, ma doverlo fare con l'altra mano o con un altro dito si sta rivelando difficile a causa delle dimensioni ridotte dell'elemento.

Il problema di Mia in codice

Diamo un'occhiata alle caselle di controllo. In apparenza sembrano accessibili, con adeguate associazioni di etichette. Ma guardiamo più da vicino.

<form>
  <label for=”synthroid”>Synthroid</label>
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  <label for=”levothroid”>Levothroid</label>
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  <label for=”levoxyl”>Levoxyl</label>
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
</form>

Esiste una tecnica molto semplice che possiamo utilizzare quando i controlli del modulo hanno etichette visibili per aumentare la loro area cliccabile o toccabile, nota anche come dimensione target . Tutto quello che dobbiamo fare è inserire il controllo del modulo all'interno dell'elemento <label>. Se un controllo del modulo è figlio di un <label>allora facendo clic o toccando l'etichetta si attiverà il campo del modulo associato. Diamo un'occhiata a quel cambiamento ora.

<form>
  <label for=”synthroid”>
  Synthroid
  <input type=”checkbox” id=”synthroid” name=”medications” value=”synthroid”/>
  </label>
  <label for=”levothroid”>
  Levothroid
  <input type=”checkbox” id=”levothroid” name=”medications” value=”levothroid”/>
  </label>
  <label for=”levoxyl”>
  Levoxyl
  <input type=”checkbox” id=”levoxyl” name=”medications” value=”levoxyl”/>
  </label>
</form>

Alcuni dettagli su questa particolare tecnica

• Questa è una caratteristica dell'elemento nativo <label>. Se stai etichettando i campi del modulo con elementi come <span>(e non dovresti esserlo!) Non ottieni questa funzionalità gratuitamente e dovrai implementarla manualmente.
• Questa funzionalità è applicabile solo se l' <label><elemento racchiude il suo campo modulo. L'utilizzo aria-labelledbynon comporta automaticamente lo stesso comportamento.
• L' <label>elemento deve ancora contenere l' forattributo e deve corrispondere all'attributo idnel campo del modulo.
• Non avvolgere più input in un'unica etichetta.

Prima di andare

Incontriamo un'altra persona. Ancora una volta, probabilmente non qualcuno a cui penseresti quando consideri l'accessibilità.

Ben è un architetto del software in una startup tecnologica a San Francisco. La sua azienda sta lavorando alla creazione della Waffle Iron of the Future. Perfettamente croccante ogni volta e ti aiuta anche a pagare le tasse. È innamorato del progetto e trascorre la maggior parte della sua giornata a pensare a come renderlo ancora migliore. Ben prende un autobus per andare in città quando deve andare in ufficio. Non ha alcuna disabilità.

Ben, con il suo blazer mentale concentrato sulla piastra per waffle, si è dimenticato di dover compilare lo stesso modulo di Mia per l'appuntamento dal medico. Anche lui sta usando il suo telefono per compilare il modulo. Il traffico è a singhiozzo, quindi l'autobus avanza inaspettatamente mentre lavora.

Poiché le dimensioni target sono state ingrandite nei campi del modulo farmaci, Ben è in grado di completare facilmente il modulo. Non deve preoccuparsi di fare clic sulla casella di controllo sbagliata o di toccare il pulsante di opzione sbagliato. Il pensiero non gli sfiora nemmeno la mente. È in grado di finire il modulo e tornare a pensare ai waffle.

Ora stiamo progettando universalmente!!

In questo post abbiamo visto come un semplice modulo può presentare barriere alle persone con disabilità e come possiamo utilizzare l'elemento <label> per rimuovere tali barriere. Abbiamo anche visto come una semplice modifica può rendere il modulo più facile da usare per le persone con e senza disabilità. Questa è l'essenza dell'Universal Design. Considerando le esigenze delle persone con disabilità, possiamo rendere le nostre applicazioni migliori per tutti.

Grazie per aver letto. Spero che tu abbia imparato qualcosa di nuovo o ricordato qualcosa che potresti aver dimenticato.