Nome del Controllo Attivo

Cosa Verifichiamo

Un elemento interattivo dovrebbe avere un nome accessibile disponibile per tecnologie assistive come VoiceOver e Controllo Vocale.

Esempio Errato ❌

Nessun nome (accessibilityLabel) impostato.

VoiceOver legge "Button"

Voice Control — l'utente dice "Notifiche"
L'elemento non risponde poiché non ha un nome

Esempio Corretto ✅

accessibilityLabel=
'Notifications'

VoiceOver legge "Notifications, button"

Voice Control — l'utente dice "Notifiche"
L'elemento si attiva perché il suo nome corrisponde

Colpo d'Occhio

• Questa regola ha un impatto critico per gli utenti
• Ogni elemento interattivo necessita di un nome: pulsanti, link e input richiedono tutti un nome accessibile che VoiceOver possa annunciare
• Se un elemento interattivo non ha testo visibile, fornisci esplicitamente uno utilizzando accessibilityLabel per dargli un nome significativo
• Non lasciare VoiceOver senza niente da dire: un elemento che annuncia solo il suo ruolo o valore - senza nome - non fornisce agli utenti un contesto accurato su ciò che fa
• VoiceOver cercherà di annunciare qualcosa (come il testo del pulsante o il nome dell'immagine), quindi è meglio fornire un nome accurato e intenzionale

Impatto sugli Utenti

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

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

Questa regola ha un impatto anche sulle persone che utilizzano il Controllo Vocale. Gli utenti del Controllo Vocale che tentano di attivare l'elemento pronunciando il suo etichetta visibile scopriranno che non risponde.

Conferma dell'Problema del Nome del Controllo Attivo

1. Attiva VoiceOver
2. Focalizza l'elemento interattivo
3. Si verificherà una delle seguenti cose:
   • Inaccessibile: Non annuncerà il suo nome, solo il suo ruolo e valore se presenti.
   • Accessibile: Annuncerà il suo nome su VoiceOver.

Correzione dei Problemi

Per risolvere i problemi del Controllo Attivo, aggiungi un'etichetta di accessibilità a ogni elemento interattivo in modo che VoiceOver abbia un nome significativo da annunciare. Assicurati che il nome scelto contenga l'etichetta visibile dell'elemento.

Assicurati che il nome scelto descriva l'azione, non l'aspetto. Un'icona di una lente d'ingrandimento dovrebbe essere etichettata come "Cerca", non "icona della lente d'ingrandimento."

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

UIKit

Per risolvere un problema trovato da questa regola, aggiungi un accessibilityLabel al controllo.

button.accessibilityLabel = "Deque Systems Website"

SwiftUI

Assicurati che il testo dell'elemento sia significativo oppure fornisci un accessibilityLabel se è necessario ulteriore contesto.

Caso d'uso: Pulsante con un'immagine come etichetta

Assicurati che l'immagine abbia un nome significativo. Sappi che questa non sarà un'opzione quando si supportano più lingue. Se il nome non è praticabile, imposta un accessibilityLabel sull'immagine.

In alternativa, combina un elemento padre (es: contenitore generico) e i suoi figli (es: testo e un pulsante) per creare un unico elemento. Se non è disponibile un testo significativo, imposta un accessibilityLabel sull'intera vista come mostrato di seguito.

var body: some View {
    HStack(alignment: .center, spacing: 10,
           content: {
        Text("axe DevTools for iOS")
        Spacer()
        Button(action: { openLink() },
               label: {
            Image(systemName: "arrow.up.forward.app")
                .accessibilityHidden(true)
                .frame(minWidth: 50, minHeight: 50)
        })
        .accessibility(removeTraits: .isStaticText)
        .accessibility(removeTraits: .isButton)
        .accessibility(addTraits: .isLink)
    }).padding(16)
        .accessibilityElement(children: .combine)
        // .accessibilityLabel("Axe DevTools for iOS") <-- Add when `Text` is missing to ensure a name is present
}

React Native

Per risolvere un problema trovato 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 a 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 VoiceOver.

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

Quando raggruppi un'etichetta visibile con un elemento interattivo, avvolgili in MergeSemantics affinché VoiceOver li combini in un unico 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 più fondamentali in termini di accessibilità. Gli utenti di VoiceOver e Voice Control avranno difficoltà a utilizzare un elemento senza un nome accessibile. Prendere provvedimenti per correggere tutte le istanze di questo problema prima di affrontare problemi di priorità inferiore.

Domande frequenti

Quando uso VoiceOver, sento il contenuto letto ad alta voce dopo aver focalizzato l'elemento. Perché questa regola fallisce ancora? Se un elemento manca di un nome definito, il lettore di schermo annuncerà spesso il suo valore. Tuttavia, il valore non è un sostituto per il nome accessibile mancante. Per le immagini nei pulsanti, in particolare, VoiceOver potrebbe annunciare il nome del file dell'immagine. Anche se il nome del file è descrittivo, questo non è un sostituto per l'attributo nome accessibile mancante.

Risorse

Pagine dei corsi di Deque University

• Vedere Mobile iOS 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 sull'accessibilità dei contenuti web (WCAG) 2.1
  • Comprendere SC 4.1.2, Nome, Ruolo, Valore (Livello A)