Pulsanti che annunciano la propria azione
Descriva chiaramente le azioni per gli utenti che non possono vederle.
Pulsanti che annunciano la propria azione è una lezione Web Accessibility Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Web Accessibility Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Web Accessibility Academy include 4 lezioni in totale.
I pulsanti hanno bisogno di nomi
Un pulsante è utile solo se gli utenti sanno cosa fa. Il suo nome accessibile è ciò che il lettore di schermo legge ad alta voce prima che venga premuto.
Il testo diventa il nome
Per un normale pulsante, il testo visibile al suo interno è il nome accessibile. Parole chiare producono un annuncio chiaro.
<button>Save changes</button>Indicare l'azione
Etichetti un pulsante con l'azione che esegue, come Salva, Elimina o Aggiungi al carrello. Un verbo dice agli utenti esattamente cosa accadrà.
Evitare etichette vaghe
Etichette come OK, Invia o Vai sono vaghe quando diversi pulsanti le condividono. Indichi l'azione specifica, così ognuno è comprensibile da solo.
Il problema delle sole icone
Un pulsante con una icona e senza testo non ha un nome accessibile. Un lettore di schermo potrebbe limitarsi a dire «pulsante», lasciando l'utente a indovinare. 🤔
<button><svg>...</svg></button>Dare un nome a un pulsante con icona
Assegni un nome con aria-label al pulsante privo di testo. L'icona continuerà a essere visibile, ma la tecnologia assistiva annuncerà la sua funzione.
<button aria-label="Close dialog"><svg>...</svg></button>Nascondere le icone decorative
Quando un'etichetta indica già l'azione, imposti aria-hidden sull'icona interna, così non verrà letta come rumore aggiuntivo.
<svg aria-hidden="true">...</svg>Annunciare i cambiamenti di stato
Un pulsante di attivazione/disattivazione dovrebbe comunicare il proprio stato. Usi aria-pressed, in modo che i lettori di schermo dicano se è attivo o disattivo.
<button aria-pressed="true">Mute</button>Espandere i contenuti
Un pulsante che mostra o nasconde un pannello dovrebbe avere aria-expanded, così gli utenti sentono se il pannello è aperto o compresso.
<button aria-expanded="false">Details</button>Mantenere le etichette brevi e precise
Una buona etichetta è breve ma veritiera. Promette esattamente ciò che accade premendo il pulsante, senza sorprese dopo il clic.
Far corrispondere il visibile all'accessibile
Se un pulsante contiene testo visibile, mantenga quelle parole nel nome accessibile, così gli utenti del controllo vocale possono pronunciare l'etichetta che vedono.
Verifica rapida
Un pulsante di chiusura mostra solo una X. Come gli si assegna un nome accessibile?
Riepilogo
Indichi ogni pulsante con la relativa azione, assegni un'etichetta a quelli formati solo da icone ed esponga lo stato con gli attributi aria. Ora gli utenti sapranno sempre cosa fanno. 👍
Domande Frequenti
La lezione «Pulsanti che annunciano la propria azione» è gratuita?
Sì — il testo completo di «Pulsanti che annunciano la propria azione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Web Accessibility Academy, passa a CoddyKit PRO. Il corso Web Accessibility Academy include 4 lezioni in totale.
Cosa imparerò in «Pulsanti che annunciano la propria azione»?
Descriva chiaramente le azioni per gli utenti che non possono vederle. Eserciti Web Accessibility Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Web Accessibility Academy?
Non è richiesta alcuna esperienza precedente. Web Accessibility Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Pulsanti che annunciano la propria azione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Web Accessibility Academy?
Sì. Ogni lezione Web Accessibility Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- I link portano da qualche parte, i pulsanti fanno qualcosa
- Testo dei link comprensibile anche fuori contesto
- Pulsanti che annunciano la propria azione
- L'anti-pattern dell'ancora senza href