Identificazione coerente
I componenti che svolgono la stessa funzione su un sito devono essere identificati in modo coerente — stessa etichetta, stessa icona, stesso nome accessibile. Due pulsanti che compiono la stessa azione non devono chiamarsi «Cerca» su una pagina e «Trova» su un'altra.
Cosa richiede
Quando due componenti dell’interfaccia utente svolgono la stessa funzione su un sito, devono essere identificati in modo coerente. Ciò significa utilizzare lo stesso nome accessibile (etichetta, aria-label, testo alternativo), la stessa icona e un trattamento visivo corrispondente — in modo che l’utente possa riconoscere «questa è la stessa azione che ho compiuto due pagine fa».
La regola riguarda l’etichettatura, non lo stile. Un pulsante di invio può essere visivamente enfatizzato in modo diverso a seconda del contesto, ma il nome accessibile «Invia» non dovrebbe diventare «Manda» altrove se svolge la stessa funzione.
Come soddisfarlo
- Mantenere un vocabolario ristretto di verbi d’azione («Salva», «Annulla», «Elimina», «Cerca») e applicarlo in tutto il sito.
- Usare la stessa icona per la stessa azione ovunque — un solo glifo per la ricerca, non tre diversi.
- Quando un’icona rappresenta un’azione, assegnarle lo stesso nome accessibile su tutte le pagine.
- Utilizzare un componente di design system (
<Button label="Salva">) anziché codificare le etichette pagina per pagina. - Verificare la presenza di sinonimi nel sito: «Manda» vs. «Invia», «Cerca» vs. «Trova», «Accedi» vs. «Entra», «Registrati» vs. «Iscriviti».
Errori comuni
- Due icone che rappresentano la stessa azione con due nomi accessibili diversi («Modifica» su una schermata, «Cambia» su un’altra).
- Un campo di ricerca etichettato «Cerca» nell’intestazione e «Trova contenuti» nella barra laterale.
- Un pulsante «Elimina» nella vista elenco e un pulsante «Rimuovi» nella vista dettaglio — stesso effetto, parola diversa.
- Testo del CTA incoerente: «Acquista ora» sulla pagina prodotto e «Aggiungi al carrello» sulla pagina di listing, per quella che è funzionalmente la stessa azione.
Perché è importante
Gli utenti di screen reader navigano scorrendo un elenco di link o pulsanti. Se la stessa azione è etichettata in modo diverso su tutto il sito, non possono riconoscere il pattern — devono leggere ogni etichetta da zero e ragionare se questo «Manda» sia lo stesso di quell’«Invia». Per gli utenti con disabilità cognitive, l’identificazione coerente è uno dei più grandi aiuti alla comprensione che si possano offrire.
Questo criterio di successo viene rispettato trattando il testo dell’interfaccia e le icone come token di design di prima classe, e non come contenuti che ogni redattore decide individualmente.