Ruolo di presentazione su elemento interattivo

Silktide controlla la presenza di elementi interattivi, come pulsanti, link e campi dei moduli, contrassegnati come puramente decorativi. Contrassegnare in questo modo un elemento interattivo ne elimina il significato per le tecnologie assistive, lasciandolo però cliccabile sullo schermo.

<!-- Problema: il pulsante funziona ancora, ma viene annunciato come inesistente -->
<button role="presentation">Elimina</button>

<!-- Soluzione: rimuovere il ruolo -->
<button>Elimina</button>

Perché è importante

I ruoli presentation e none comunicano alle che un elemento non ha alcun significato: servono a rimuovere la semantica da elementi come le tabelle usate per il layout. Applicati a un elemento interattivo, creano il peggior tipo di barriera: un controllo su cui gli utenti vedenti che usano il mouse fanno clic ogni giorno, ma che uno presenta come contenuto inattivo o ignora completamente. L'utente non ha modo di sapere che il pulsante esiste.

Come risolvere il problema

Rimuovi role="presentation" o role="none" dall'elemento interattivo. Gli elementi nativi espongono già il significato corretto senza alcun ruolo.
Se l'elemento non dovrebbe essere realmente interattivo, rendilo tale: sostituiscilo con un elemento non interattivo come <div> e rimuovi qualsiasi tabindex.
Se stavi cercando di sopprimere il significato di un contenitore (ad esempio, una tabella di layout che racchiude dei controlli), assegna il ruolo al contenitore, non ai controlli al suo interno.

Come esegue il controllo Silktide

Individua ogni elemento della pagina con role="presentation" o role="none".
Determina se l'elemento è interattivo: un pulsante, un link o un'area di una mappa immagine con un href, un campo di un modulo oppure qualsiasi elemento inserito nell'ordine di tabulazione della tastiera con un tabindex pari o superiore a 0.
Segnala ogni elemento interattivo a cui è assegnato un ruolo di presentazione.

Gli elementi rimossi dall'ordine di tabulazione con un tabindex negativo non vengono segnalati, così come gli elementi decorativi quali immagini o grafiche SVG.

Risoluzione dei problemi

Un framework o una libreria ha aggiunto il ruolo

Alcune librerie UI applicano role="presentation" ai contenitori interni e, occasionalmente, all'elemento sbagliato. Esamina l'elemento segnalato: se è effettivamente utilizzabile con il mouse ma viene reso muto per le tecnologie assistive, la correzione riguarda il modo in cui utilizzi la libreria oppure il codice a monte.

Questo controllo non segnala nulla anche se mi aspettavo dei risultati

I test ARIA possono essere disattivati per ogni sito web. Controlla le impostazioni avanzate del sito web.