Quando usare aria-label, aria-labelledby, aria-describedby o semplice testo visibile, con 20 snippet prima e dopo, errori comuni e un verificatore del nome accessibile.
Usa aria-label solo quando un elemento non ha testo visibile che lo nomina, come un pulsante con sola icona: <button aria-label="Close dialog">. Se un testo visibile lo nomina già, affidati a quello o punta aria-labelledby verso di esso. aria-describedby aggiunge un aiuto extra letto dopo il nome. Le etichette HTML native vengono sempre prima.
Quale strumento di denominazione scegliere
Ogni pulsante, link, campo e landmark ha bisogno di un nome accessibile, la breve frase che le tecnologie assistive pronunciano quando il focus arriva lì. Questa pagina mostra come viene calcolato quel nome, venti pattern sbagliati accanto alle loro versioni corrette e un verificatore che legge uno snippet incollato e riporta il nome che otterrebbe.
aria-label contiene il nome come stringa dentro l'attributo. aria-labelledby punta a uno o più id di elementi e costruisce il nome dal loro testo, così il nome corrisponde sempre a ciò che vedono gli utenti vedenti. Quando sono presenti entrambi, vince aria-labelledby.
Sì. Per la maggior parte dei controlli il valore di aria-label sovrascrive il contenuto testuale, quindi un pulsante che mostra Buy con aria-label="Add to basket" viene annunciato come Add to basket. Questa discrepanza confonde chi usa il controllo vocale e viola il criterio WCAG 2.5.3 Label in Name.
Usalo per informazioni di supporto che non sono il nome: una regola per la password, un suggerimento sul formato o un messaggio di errore. Gli screen reader di solito leggono la descrizione dopo il nome e il ruolo, spesso dopo una breve pausa, e alcuni utenti disattivano le descrizioni.
Solo se il div ha un ruolo che consente la denominazione, come role="region" o role="dialog". Su un div o span generico, ARIA vieta la denominazione e la maggior parte degli screen reader ignora l'attributo.
No. Le immagini prendono il nome dall'attributo alt. Usa alt="" per le decorazioni, così l'immagine viene saltata. aria-label su un img funziona ma non aggiunge nulla che alt non possa fare.
Scorri questo elenco dall'alto e fermati alla prima opzione adatta. Il testo visibile è al primo posto perché serve utenti vedenti, di screen reader e di controllo vocale con un'unica stringa.
I quattro modi per dare a un elemento il suo nome o la sua descrizione
Ogni snippet mostra il pattern sbagliato, la correzione e più o meno ciò che uno screen reader dice dopo la correzione. Gli annunci variano in base al prodotto e alle impostazioni.
Senza un nome il pulsante viene di solito annunciato solo come button. Nascondi il disegno così non viene letto come un'immagine senza etichetta. Dopo la correzione viene di solito annunciato come: Close, button.
Un link vuoto viene spesso letto come il suo URL, lettera per lettera su alcune configurazioni. Dopo la correzione viene di solito annunciato come: Our shop on Instagram, link.
Il testo reale in uno span visivamente nascosto sopravvive agli strumenti di traduzione, che tendono a saltare i valori degli attributi. Dopo la correzione viene di solito annunciato come: Cart, 3 items, link.
Con due elementi nav senza nome, l'elenco dei landmark mostra navigation due volte e nessuno riesce a distinguerli. Dopo la correzione viene di solito annunciato come: Main, navigation.
Il testo del placeholder è un nome di riserva debole e scompare appena si digita. Dopo la correzione viene di solito annunciato come: Search products, search edit text.
Un vero elemento label rende cliccabile anche la didascalia, il che ingrandisce l'area di clic. Dopo la correzione viene di solito annunciato come: Email, edit text.
Le descrizioni vengono unite nell'ordine in cui sono elencati gli id. Dopo la correzione viene di solito annunciato come: Password, secure edit text, invalid entry, At least 12 characters, Too short....
Il legend dà il nome al gruppo, così ogni opzione ha senso da sola. Dopo la correzione viene di solito annunciato come: Delivery speed, group, Standard, radio button, 1 of 2.
Puntare al titolo visibile mantiene identici il titolo pronunciato e quello mostrato. Aprila con showModal() per una vera modale. Dopo la correzione viene di solito annunciato come: Delete project?, dialog, This removes all 14 pages..
Mantieni fisso il nome e lascia cambiare lo stato. Non cambiare anche l'etichetta in Unbold. Dopo la correzione viene di solito annunciato come: Bold, toggle button, pressed.
Cambiare insieme sia l'etichetta sia uno stato premuto si legge come una doppia negazione. Dopo la correzione viene di solito annunciato come: Mute, toggle button, not pressed.
Lo script deve invertire aria-expanded e l'attributo hidden insieme. Dopo la correzione viene di solito annunciato come: Products, button, collapsed.
Un div cliccabile non è affatto focalizzabile né annunciato come controllo. Dopo la correzione viene di solito annunciato come: Menu, button, collapsed.
Scrivi ciò che l'immagine comunica al lettore. Un alt vuoto indica una decorazione, così viene saltata. Dopo la correzione viene di solito annunciato come: Sales rose from 40 to 65 orders a week in May, image.
role=img rende l'SVG un unico oggetto invece di un albero di forme. Dopo la correzione viene di solito annunciato come: Northgate Bakery, image.
Una didascalia visibile dà il nome alla tabella per tutti. Usa aria-labelledby solo quando il titolo sta fuori dalla tabella. Dopo la correzione viene di solito annunciato come: Opening hours, table, 2 columns, 8 rows.
La regione deve esistere prima che il suo testo cambi, altrimenti molti lettori perdono l'aggiornamento. Dopo la correzione viene di solito annunciato come: Saved (pronunciato senza spostare il focus).
aria-roledescription cambia il ruolo pronunciato. Usalo con parsimonia e mai su elementi generici. Dopo la correzione viene di solito annunciato come: Customer photos, carousel.
Un testo dei link univoco aiuta chiunque scorra un elenco di link. Iniziare con le parole visibili mantiene intatto Label in Name. Dopo la correzione viene di solito annunciato come: Read more about winter opening hours, link.
Chi dice click Send al controllo vocale deve colpire questo pulsante, quindi la parola visibile deve stare nel nome. Dopo la correzione viene di solito annunciato come: Send, button.
Errori trovati negli audit e le loro correzioni
Controlla i nomi prima di pubblicare
Incolla uno snippet. Il verificatore lo analizza nel tuo browser senza eseguire alcuno script, trova il primo elemento interattivo o con nome e calcola un nome usando una versione ridotta dell'ordine ufficiale. Salta diversi passaggi della specifica, quindi consideralo un suggerimento rapido e conferma negli strumenti di sviluppo o con uno screen reader.
Pulsante con icona
Pulsante con icona corretto
Campo con etichetta
Etichetta non corrispondente
Finestra con labelledby
Snippet HTML
Nessun pulsante, link, campo, landmark, immagine o tabella trovato nello snippet.
Elemento
Nome calcolato
(vuoto)
Origine del nome
Avvisi
Nessuno trovato da questo controllo semplificato.
elemento label
contenuto testuale
title dell'svg
title (riserva debole)
placeholder (riserva debole)
aria-labelledby punta all'id mancante "{id}".
aria-label su un div o span senza ruolo viene ignorato dalla maggior parte degli screen reader.
L'immagine non ha l'attributo alt.
Il placeholder è l'unico nome. Aggiungi un'etichetta.
Nessun nome accessibile trovato.
Il testo visibile "{visible}" non è all'inizio del nome (WCAG 2.5.3 Label in Name).
Il nome termina con una parola del ruolo, quindi il ruolo verrà pronunciato due volte.
L'elemento stesso è aria-hidden.
Inizia gratis · Nessuna carta di credito richiesta