ARIA Labels in WordPress: Guida Pratica per Sviluppatori

Juan Camilo Auriti

ARIA: Quando Usarla, Quando Evitarla, e Come Non Fare Danni

La prima regola di ARIA: non usare ARIA se puoi usare HTML nativo. Un <button> è meglio di un <div role="button">. Un <nav> è meglio di un <div role="navigation">. L’HTML semantico è sempre la prima scelta.

ARIA (Accessible Rich Internet Applications) serve quando l’HTML nativo non basta: widget custom, stato dinamico, relazioni complesse tra elementi. Su WordPress, i casi principali sono: menu di navigazione custom, accordion/tab, modal, filtri prodotto WooCommerce.

I 5 Attributi ARIA Più Usati in WordPress

1. aria-label (etichetta invisibile)

<!-- Bottone con solo icona -->
<button aria-label="Cerca nel sito">🔍</button>

<!-- Navigazione con nome -->
<nav aria-label="Menu principale">...</nav>
<nav aria-label="Footer links">...</nav>

2. aria-expanded (stato aperto/chiuso)

<!-- Menu dropdown -->
<button aria-expanded="false" aria-controls="submenu-1">Servizi</button>
<ul id="submenu-1" hidden>...</ul>

<!-- Toggle con JavaScript -->
button.addEventListener('click', () => {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    button.setAttribute('aria-expanded', !expanded);
    submenu.hidden = expanded;
});

3. aria-hidden (nascondere dall’assistive technology)

<!-- Icona decorativa (non leggere) -->
<span aria-hidden="true">→</span>

<!-- SVG decorativa -->
<svg aria-hidden="true">...</svg>

4. aria-describedby (descrizione aggiuntiva)

<input type="password" aria-describedby="pwd-help">
<p id="pwd-help">La password deve avere almeno 12 caratteri.</p>

5. aria-live (contenuto dinamico)

<!-- Messaggi di errore form (annunciati dallo screen reader quando appaiono) -->
<div aria-live="polite" class="form-errors"></div>

Errori Comuni ARIA su WordPress

aria-label che ripete il testo visibile: se il bottone dice “Cerca”, non serve aria-label="Cerca". Stai duplicando
role=”button” su un div cliccabile: usa un <button> nativo. Viene con focus, enter/space handling, e semantica gratis
aria-hidden=”true” su contenuto importante: nasconde l’elemento agli screen reader. Se ha informazioni utili, non nasconderlo
Troppo ARIA: ARIA mal implementata è peggio di nessuna ARIA. Lo screen reader si confonde. Se non sei sicuro, non aggiungerla

FAQ

I plugin WordPress gestiscono ARIA correttamente?

Dipende dal plugin. I plugin del core WordPress (Gutenberg blocks) hanno ARIA ragionevole. Plugin di terze parti (slider, lightbox, page builder) spesso no. Verifica con uno screen reader: se il widget non è usabile, manca ARIA o è implementata male.