Azione Inaccessibile

Cosa Controlliamo

Un elemento interattivo dovrebbe essere attivabile tramite tecnologia assistiva. Questa regola verifica che l'azione associata a un elemento interattivo possa essere messa a fuoco e attivata usando TalkBack o Accesso Col Switch.

Esempio di Errore ❌

TalkBack può focus il toggle delle 'Notifiche', ma cannot activate it

TalkBack annuncia "Notifications, on." - non è fornito alcun ruolo o suggerimento di attivazione

Doppio tocco non ha effetto; gli utenti non hanno modo di attivare l'impostazione

Esempio di Successo ✅

TalkBack può focus and activate il toggle delle 'Notifiche'

TalkBack annuncia "Notifications, switch button, on. Double-tap to activate."

Il ruolo e il suggerimento di attivazione sono presenti; gli utenti sanno esattamente come interagire con il controllo

In Sintesi

• Questa regola ha un impatto critico per gli utenti
• Questa regola segnala elementi interattivi su cui la tecnologia assistiva non può concentrarsi o attivarli
• Gli elementi interattivi non sono disponibili per TalkBack quando sono segnalati come non importanti per l'accessibilità
• Un genitore cliccabile con elementi figlio che hanno testo è inaccessibile quando nascosto alla tecnologia assistiva

Impatto sugli Utenti

Gli utenti della tecnologia assistiva sono quelli più colpiti. Quando TalkBack può concentrarsi su un elemento interattivo ma non può attivarlo, gli utenti potrebbero non essere in grado di completare azioni critiche, come inviare un modulo, attivare un'impostazione o navigare a un altro schermo. Questo crea una barriera completa per le persone che si affidano esclusivamente alla tecnologia assistiva per interagire con l'app.

Conferma Problema di Azione Inaccessibile

1. Attiva TalkBack o Accesso Col Switch
2. Prova a concentrare e interagire con l'elemento
3. Avverrà uno dei seguenti casi:
   • Inaccessibile: L'elemento non può essere messo a fuoco o la sua azione non può essere attivata
   • Accessibile: L'elemento è messo a fuoco e la sua azione può essere attivata

Risolvi Problemi

Per risolvere un problema di Azione Inaccessibile, assicurati che l'elemento interattivo non sia esplicitamente nascosto alla tecnologia assistiva. Le viste che le persone possono accedere senza tecnologia assistiva dovrebbero essere ugualmente disponibili per chi la utilizza.

XML

Non impostare la proprietà importantForAccessibility su "no" nelle viste toccabili. Se questo attributo è presente, rimuovilo o impostalo su "yes" o "auto".

Impose

Non contrassegnare le viste toccabili di Compose come invisibleToUser(). Rimuovi questo modificatore per garantire che l'elemento sia disponibile per TalkBack e Accesso Col Switch.

Button(onClick = {  },
    modifier = Modifier.semantics {
        // Remove invisibleToUser() to make this element accessible
        invisibleToUser()
    }
) {
    Text("Click here")
}


FloatingActionButton(onClick = {  }) {
    Image(
        painter = painterResource(id = R.drawable.floating_button),
        contentDescription = "floating button",
        Modifier.semantics { 
            // Remove invisibleToUser() to make this element accessible
            invisibleToUser() 
        }
    )
}

React Native

Questo problema è raro per i controlli standard touchable o pressable in React Native, ma può verificarsi con elementi interattivi personalizzati o quando importantForAccessibility è esplicitamente impostato su 'no' o 'no-hide-descendants' su un elemento interattivo.

Opzione 1: Permettere alla vista genitore di gestire il focus

Imposta importantForAccessibility della vista contenente su 'yes' e assegna i accessibilityRole e accessibilityLabel appropriati. Imposta importantForAccessibility su 'no-hide-descendants' su eventuali elementi figli decorativi in modo che TalkBack non li metta a fuoco separatamente:

<View
  importantForAccessibility='yes'
  accessibilityRole='button'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
>
  <Image 
    source={DequeLogo}
    importantForAccessibility='no-hide-descendants'
    style={{ width: 100, height: 100 }} 
  />
</View>

Opzione 2: Permettere all'elemento stesso di gestire il focus

Imposta importantForAccessibility='yes' e accessibilityRole direttamente sul controllo:

<Image
  source={DequeLogo}
  importantForAccessibility='yes'
  accessibilityRole='imagebutton'
  accessibilityLabel='Learn more about Deque'
  onTouchStart={openLink}
  style={{ width: 100, height: 100 }}
/>

Flutter

I widget Material di Flutter (ElevatedButton, IconButton, ecc.) espongono automaticamente le azioni di tocco al lettore di schermo. Quando si costruiscono elementi interattivi personalizzati con GestureDetector, avvolgili in MergeSemantics con un widget Semantics per garantire che il lettore di schermo possa scoprire e attivare l'elemento in una sola fermata di focus.

MergeSemantics(
  child: Semantics(
    button: true,
    label: 'Archive item',
    child: GestureDetector(
      onTap: () {},
      child: Container(
        padding: const EdgeInsets.all(12.0),
        color: Colors.green.shade100,
        child: const Text('Archive item'),
      ),
    ),
  ),
)

Posso Ignorare Questa Regola?

L'Azione Inaccessibile ha un impatto critico per gli utenti e raccomandiamo fortemente di risolvere questi problemi. Poiché questa è una regola sperimentale, dovresti verificare i risultati manualmente. Se hai confermato che l'elemento può essere attivato da TalkBack, potrebbe essere accettabile ignorare il rilevamento. Scopri di più su ignorare regole.

Risorse

Pagine dei corsi di Deque University

• 2.1.1 Tastiera (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, Raccomandazione W3C
  • Criterio di successo 2.1.1 - Tastiera
• Documenti di comprensione WCAG 2.1
  • Comprensione 2.1.1 A - Tastiera