Nome Vista Attiva

Cosa Controlliamo

Un elemento interattivo dovrebbe avere un nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Esempio Fallito ❌

Nessun nome impostato sull'elemento interattivo

TalkBack legge "Button"

Voice Access — l'utente dice „Cerca“
L'elemento non risponde poiché non ha un nome

Esempio Corretto ✅

`contentDescription="Search"`

TalkBack legge "Search, button"

Voice Access — l'utente dice „Cerca“
L'elemento si attiva perché il suo nome corrisponde

In Sintesi

• Questa regola ha un impatto critico per gli utenti
• Ogni elemento interattivo necessita di un nome: pulsanti, link, controlli personalizzati, ecc. richiedono un nome accessibile che TalkBack possa annunciare
• Se un elemento interattivo non ha testo visibile, fornisci uno esplicitamente utilizzando le proprietà contentDescription o accessibilityLabel
• Non lasciare TalkBack senza nulla da dire: un elemento che annuncia solo il suo ruolo o valore — senza nome — non offre agli utenti alcun contesto su ciò che fa

Impatto sugli Utenti

Le persone che usano TalkBack sono le più colpite. Un elemento interattivo senza nome non trasmetterà il contesto o lo scopo completo alla persona che interagisce con esso.

Quando un elemento interattivo — come un pulsante, un pulsante immagine o un controllo personalizzato — non ha un nome accessibile, TalkBack non ha nulla da annunciare quando questo elemento è focalizzato. Ad esempio, potresti avere un pulsante con l'immagine di una freccia sottolineata che indica che l'utente può scaricare. Senza un nome accessibile, TalkBack annuncerà solo „Pulsante, doppio tocco per attivare“.

Questa regola ha anche un impatto per le persone che usano Voice Access. Gli utenti di Voice Access che provano ad attivare l'elemento pronunciando la sua etichetta visibile scopriranno che non risponde.

Confermare Problema Nome Vista Attiva

1. Attiva TalkBack
2. Concentra l'elemento interattivo
3. Si verificherà uno dei seguenti eventi:
   • Inaccessibile: Non annuncerà il suo nome, solo il suo ruolo e valore se presenti.
   • Accessibile: Annuncerà il suo nome in TalkBack.

Risolvi i Problemi

Per risolvere i problemi di Nome Vista Attiva, aggiungi un'etichetta testuale o una descrizione del contenuto a ciascun elemento interattivo in modo che TalkBack abbia un nome significativo da annunciare.

Assicurati che il nome che scegli:

• Contenga l'etichetta visibile dell'elemento.
• Descriva l'azione, non l'aspetto. Ad esempio, un'icona di una lente d'ingrandimento dovrebbe essere etichettata „Cerca“, non „icona di una lente d'ingrandimento“.

Se lo scopo di un elemento cambia in base allo stato (ad es. un pulsante Play/Pause), aggiorna il nome ogni volta che lo stato cambia.

XML

Utilizza la proprietà del testo dell'elemento o la descrizione del contenuto per garantire che TalkBack abbia informazioni accurate da condividere.

Button button = .......
button.setText("Button's Name");

ImageButton imageButton = .......
imageButton.setContentDescription("Button's Name");

Compose

Abbina i pulsanti immagine con una descrizione del contenuto o testo per indicare lo scopo dell'elemento.

@Composable
fun EmailIconButton() {
    IconButton(
        onClick = { … },
    ) { 
        Icon(
            painter = painterResource(id = R.drawable.email_icon),
            contentDescription = “Send an Email”
        )
    }
}

I pulsanti non immagine dovrebbero fornire testo per TalkBack.

@Composable
fun EmailButton() {
    Button(
        modifier = Modifier.semantics { this.contentDescription = “Send an Email” }
        onClick = { … },
    ) { 
        Text(
            text = “Email”
        )
    }
}

React Native

Per risolvere un problema individuato da questa regola, aggiungi un accessibilityLabel all'elemento interattivo.

<TextInput
  ...
  accessibilityLabel="First Name"
/>

Quando gli elementi sono raggruppati insieme all'interno di un View contenitore, aggiungi le proprietà accessible e accessibilityLabel ad esso:

<View
   importantForAccessibility='no-hide-descendants'
   accessible={true}
   accessibilityElementsHidden={false}
   accessibilityLabel={"Dark Mode"}
   accessibilityValue={{ text: "" + isEnabled }}
   accessibilityRole='switch'
   onPress={() => { 
      setIsEnabled(!isEnabled) 
    }}
 >            
    <Switch
      trackColor={{ false: 'lightgray', true: 'dimgray' }}
      ios_backgroundColor={'lightgray'}
      thumbColor={'white'}
      onValueChange={ () => {
         setIsEnabled(!isEnabled)
      }}
      value={isEnabled}
      accessibilityElementsHidden={true}
     />
</View>

Flutter

Usa la proprietà tooltip su IconButton per fornire un nome accessibile. Questo imposta il nome annunciato da TalkBack e mostra anche un suggerimento visivo alla pressione prolungata.

  IconButton(
    icon: const Icon(Icons.search),
    tooltip: 'Search',
    onPressed: () {},
  )

Per elementi interattivi con figli solo icona, imposta semanticLabel direttamente su Icon:

  ElevatedButton(                                                                                                                                            
    onPressed: () {},
    child: const Icon(Icons.add, semanticLabel: 'Add item'),
  )

Quando raggruppi un'etichetta visibile con un elemento interattivo, avvolgili in MergeSemantics in modo che TalkBack li combini in un singolo elemento focalizzabile:

  MergeSemantics(
    child: Row(
      children: [                                                                                                                                              
        const Text("Dark mode"),
        Switch(                                                                                                                                                
          value: _darkMode,                                                                                                                                  
          onChanged: (value) => setState(() => _darkMode = value),
        ),
      ],
    ),
  )

Posso Ignorare Questa Regola?

Questa regola ha un impatto critico per gli utenti e non dovrebbe essere ignorata. Un elemento interattivo senza nome è uno dei fallimenti di accessibilità più fondamentali. Gli utenti di TalkBack e Voice Access sono effettivamente esclusi dall'utilizzo di un elemento senza un nome accessibile. Prendi provvedimenti per risolvere tutte le istanze di questo problema prima di affrontare problemi di priorità inferiore.

Domande frequenti

Quando uso TalkBack, sento il contenuto letto ad alta voce dopo aver messo a fuoco l'elemento. Perché questa regola continua a fallire? Se un elemento non ha un nome definito, il lettore di schermo spesso annuncerà il suo valore. Tuttavia, il valore non è un sostituto del nome accessibile mancante.

Risorse

Pagine dei corsi Deque University

• Vedi Android Mobile Nativo sotto 4.1.2a Nome, Ruolo, Valore (A)

  Nota: L'accesso completo alle risorse di Deque University richiede un abbonamento.

Altre risorse

• Linee guida per l'accessibilità dei contenuti web (WCAG) 2.1
  • Comprendere SC 4.1.2, Nome, Ruolo, Valore (Livello A)