Ha un Ruolo di Accessibilità Valido

ID Regola: ha-ruolo-accessibilità-valido

WCAG 2.0 (A) 4.1.2

accessibilityRole comunica lo scopo di un componente all'utente della tecnologia assistiva.

accessibilityRole può essere uno dei seguenti:

• adjustable Utilizzato quando un elemento può essere "regolato" (ad es. un cursore).
• alert Utilizzato quando un elemento contiene testo importante da presentare all'utente.
• button Utilizzato quando l'elemento deve essere trattato come un pulsante.
• checkbox Utilizzato quando un elemento rappresenta una checkbox che può essere selezionata, deselezionata o avere uno stato misto.
• combobox Utilizzato quando un elemento rappresenta una combobox, che permette all'utente di selezionare tra diverse scelte.
• header Utilizzato quando un elemento funge da intestazione per una sezione di contenuto (ad es. il titolo di una barra di navigazione).
• image Utilizzato quando l'elemento deve essere trattato come un'immagine. Può essere combinato con un pulsante o un link.
• imagebutton Utilizzato quando l'elemento deve essere trattato come un pulsante ed è anche un'immagine.
• keyboardkey Utilizzato quando l'elemento agisce come un tasto della tastiera.
• link Utilizzato quando l'elemento deve essere trattato come un link.
• menu Utilizzato quando il componente è un menu di scelte.
• menubar Utilizzato quando un componente è un contenitore di più menu.
• menuitem Utilizzato per rappresentare un elemento all'interno di un menu.
• none Utilizzato quando l'elemento non ha alcun ruolo.
• progressbar Utilizzato per rappresentare un componente che indica il progresso di un'attività.
• radio Utilizzato per rappresentare un pulsante radio.
• radiogroup Utilizzato per rappresentare un gruppo di pulsanti radio.
• scrollbar Utilizzato per rappresentare una barra di scorrimento.
• search Utilizzato quando un elemento di campo di testo deve essere trattato anche come campo di ricerca.
• spinbutton Utilizzato per rappresentare un pulsante che apre una lista di scelte.
• summary Utilizzato quando un elemento può essere usato per fornire un rapido sommario delle condizioni attuali nell'app quando viene lanciata per la prima volta.
• switch Utilizzato per rappresentare un interruttore che può essere acceso e spento.
• tab Usato per rappresentare una scheda.
• tablist Usato per rappresentare un elenco di schede.
• text Usato quando l'elemento deve essere trattato come testo statico che non può cambiare.
• timer Usato per rappresentare un timer.
• togglebutton Usato per rappresentare un pulsante a levetta. Dovrebbe essere utilizzato con accessibilityState checked per indicare se il pulsante è attivato o disattivato.
• toolbar Usato per rappresentare una toolbar (un contenitore di pulsanti d'azione o componenti).
• grid Usato con ScrollView, VirtualizedList, FlatList o SectionList per rappresentare una griglia. Aggiunge gli annunci di ingresso/uscita dalla griglia nella GridView di Android.

Perché è importante

Gli elementi a cui sono assegnati valori di ruolo non validi non vengono interpretati dalla tecnologia assistiva come inteso dallo sviluppatore.

Quando i lettori di schermo e altre tecnologie assistive non conoscono il ruolo di ogni elemento, non possono interagire con esso in modo intelligente, né possono comunicare il ruolo all'utente. Le caratteristiche, le proprietà e i metodi di un elemento per trasmettere informazioni a e/o dall'utente non possono essere comunicati tramite tecnologie assistive quando un valore di ruolo è non valido.

Come risolvere il problema

Assicurati che il valore accessibilityRole sia un ruolo valido.

Esempi Positivi

<TouchableOpacity accessibilityRole="button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Esempi Negativi

<TouchableOpacity accessibilityRole="secondary-button">
  <Text>Increase Count</Text>
</TouchableOpacity>

Risorse

• React Native accessibilityRole