Skip to content

Questa traduzione non è ancora stata rivista dalla redazione. Fa fede la versione tedesca. Deutsche Fassung →

Barrierefreiheit

Cosa significano nome, ruolo e valore su un sito web?

Nome, ruolo e valore sono i tre attributi che ogni controllo di un sito web deve comunicare ai programmi di assistenza. Il nome dice a cosa serve l'elemento („Cerca”), il ruolo dice cosa è (pulsante, link, casella di controllo), il valore dice in quale stato si trova (selezionato o vuoto). Se manca uno degli attributi, una persona cieca sente solo „elemento” — e non può fare nulla con esso. Questo è regolato dal criterio WCAG 4.1.2.

Tre attributi rendono un elemento utilizzabile

Un programma di lettura non vede i pixel — legge ciò che il codice sorgente comunica su ogni elemento. Con un pulsante costruito correttamente, dice: „Cerca, pulsante”. Il visitatore sa subito cosa succede se preme Invio. Con una casella di controllo aggiunge il valore: „Iscriviti alla newsletter, casella di controllo, non selezionata”. I problemi sorgono con controlli personalizzati: un simbolo cliccabile senza nome viene annunciato come „immagine”, un menu a discesa assemblato tramite script senza ruolo come testo privo di significato. Il visitatore vedente non se ne accorge — l'elemento appare come sempre. Per chi usa programmi di lettura, controllo vocale e tastiere speciali, rimane invisibile o inutilizzabile. La robustezza significa: la tecnologia supporta tutti i programmi di assistenza, non solo lo schermo.

Come il servizio di verifica controlla nome, ruolo e valore

Questo criterio viene controllato dal nostro motore di misura in gran parte automaticamente con axe-core in un vero browser. Vengono controllati, tra l'altro: ogni pulsante e link ha un nome accessibile, gli attributi aggiuntivi per i programmi di assistenza sono validi e correttamente combinati, i ruoli auto-assegnati rispettano le regole. Per escludere falsi positivi, axe-core viene eseguito due volte con 800 millisecondi di distanza — solo i rilievi confermati in entrambi gli esecuzioni contano. Inoltre, il conteggio delle etichette dal criterio 3.3.2 viene incluso: un campo di input senza etichetta collegata non ha nemmeno un nome accessibile e quindi conta come una violazione di 4.1.2. Il rapporto denomina ogni rilievo con elemento e prova.

Beispiele

Schalter ohne Name, Rolle und Zustand

Verstoß
<div class="toggle on" onclick="umschalten()"></div>
Erfüllt
<button type="button" role="switch" aria-checked="true" onclick="umschalten()">
  Benachrichtigungen
</button>

Das Vorleseprogramm sagt „Benachrichtigungen, Schalter, eingeschaltet“. Beim Umschalten muss aria-checked mitgeführt werden.

Symbol-Knopf ohne Namen

Verstoß
<button><svg>…</svg></button>
Erfüllt
<button aria-label="Suche öffnen"><svg aria-hidden="true">…</svg></button>
  • Chiedete alla vostra agenzia di usare i componenti incorporati per i controlli — pulsanti e link veri portano con sé nome, ruolo e valore automaticamente.
  • Assegnate a ogni pulsante icona pura — lente, menu, carrello — un nome invisibile ma tecnicamente memorizzato.
  • Controllate particolarmente i criteri elementi personalizzati come menu a discesa e interruttori — lì mancano spesso ruolo e stato.
  • Eseguite un controllo automatico dopo ogni grande ristrutturazione, perché un singolo nuovo script può silenziare molti elementi.

Deutsche Fassung dieser Seite