Testo associato

Cosa Verifichiamo

Un elemento interattivo dovrebbe ottenere il suo nome accessibile da un'etichetta vicina disponibile per tecnologie assistive come VoiceOver e Controllo vocale.

Esempio di Fallimento ❌

Il campo "Indirizzo email" è focalizzato, ma il testo disponibile visivamente è not announced by VoiceOver

VoiceOver annuncia "Text field, blank" - solo il ruolo e il valore, senza nome

Gli utenti non possono sapere quale informazione il campo richiede

Esempio di Successo ✅

L'etichetta visibile "Indirizzo email" corrisponde a ciò che annuncia VoiceOver

VoiceOver annuncia "Email address, text field, blank" - nome, ruolo e valore presenti

Gli utenti sanno esattamente quale informazione il campo richiede

In Sintesi

• Questa regola ha un impatto da Serio a Critico, a seconda che l'etichetta visibile sia focalizzabile
• Gli elementi interattivi devono derivare il loro nome accessibile dall'etichetta visibile che li descrive
• VoiceOver annuncia solo il ruolo e il valore di un elemento se manca il suo nome accessibile

Impatto sugli Utenti

Le persone che usano VoiceOver sono le più colpite. Un elemento interattivo che è visivamente legato a un'etichetta descrittiva deve anche trasmettere quella relazione tramite testo per le tecnologie assistive.

Quando uno slider, un toggle o un altro controllo ha un'etichetta visibile vicina ma non è impostato un nome accessibile che corrisponda a quell'etichetta, gli utenti di VoiceOver sentono solo il ruolo e il valore dell'elemento, non il suo scopo. Anche gli utenti di Controllo vocale potrebbero essere colpiti quando l'etichetta vocale non corrisponde al nome accessibile del controllo.

Conferma Problema di Testo Associato

1. Attiva VoiceOver
2. Concentra l'attenzione sull'elemento interattivo
3. Accadrà una delle seguenti cose:
   • Inaccessibile: VoiceOver non annuncerà l'etichetta associata come nome dell'elemento - solo il suo ruolo e valore, se presenti
   • Accessibile: VoiceOver annuncerà l'etichetta associata come nome dell'elemento

Correggi i Problemi

Per risolvere un problema di Testo Associato, assegna il testo dell'etichetta visibile come nome accessibile dell'elemento interattivo. Questo assicura che VoiceOver annunci il nome corretto e allinei l'esperienza della tecnologia assistiva con ciò che gli utenti vedenti possono percepire. Nascondi l'elemento dell'etichetta autonoma dall'albero dell'accessibilità per evitare che venga annunciato due volte.

UIKit

Imposta il accessibilityLabel sull'elemento interattivo per corrispondere al testo dell'etichetta vicina, quindi nascondi l'etichetta dall'albero dell'accessibilità:

toggle.accessibilityLabel = label.text
label.isAccessibilityElement = false

SwiftUI

Usa il modificatore .accessibilityLabel() sull'elemento interattivo, passando il testo dell'etichetta visibile come nome accessibile:

@State private var payment: CGFloat = 0
private let sliderLabel = "Payment"
var body: some View {
    VStack {
        Text("\(Int(payment)) \(sliderLabel)")
        Slider(value: $payment, in: 0...20).accessibilityLabel(sliderLabel)
    }
}

React Native

Assicurati che il testo visibile che accompagna un elemento interattivo sia incluso nel prop accessibilityLabel del controllo:

<Text style={{ color: 'black', fontSize: 22 }}> Light Level </Text>
<Slider accessibilityLabel='Light Level'/>

Quando il testo visibile e un elemento interattivo sono raggruppati all'interno di un contenitore focalizzabile View, assicurati che il testo visibile sia incluso nel prop accessibilityLabel del contenitore View:

<View
  accessible={true}
  accessibilityElementsHidden={false}
  accessibilityLabel='Light Level'
>
  <Text
    style={{ color: 'black', fontSize: 22 }}
    accessible={false}
  >
    Light Level
  </Text>
  <Slider accessible={false}/>
</View>

Flutter

Avvolgi l'etichetta visibile e l'elemento interattivo in un widget MergeSemantics in modo che entrambi siano esposti alla tecnologia assistiva come un singolo nodo focalizzabile. VoiceOver annuncerà l'etichetta visibile come parte del nome accessibile dell'elemento:

  MergeSemantics(
    child: Row(
      children: [
        const Text('The Lights'),
        Switch(
          value: _value,
          onChanged: (v) => setState(() => _value = v),
        ),
      ],
    ),
  )

Posso Ignorare Questa Regola?

Il Testo Associato ha un impatto da Serio a Critico per gli utenti, e consigliamo vivamente di correggere questo problema. Poiché gli utenti di VoiceOver si affidano interamente al nome accessibile per capire cosa fa un elemento interattivo, una mancata associazione rende questi elementi funzionalmente inutilizzabili per la tecnologia assistiva. Scopri di più su ignorare le regole.

Risorse

Pagine del Corso di Deque University

• Criterio di Successo 4.1.2 - Nome, Ruolo, Valore
• 4.1.2a Nome, Ruolo, Valore

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

Altre Risorse

• Linee guida per l'accessibilità dei contenuti Web (WCAG) 2.0, Raccomandazione W3C
  • Criterio di Successo 4.1.2 - Nome, Ruolo, Valore
• Documenti di Comprensione WCAG 2.0
  • Comprendere 4.1.2 A - Nome, Ruolo, Valore