Nome Elemento Annidato

Scopri come stiamo utilizzando l'intelligenza artificiale per questa regola!

Cosa Controlliamo

Un elemento focalizzabile dovrebbe avere tutto il testo visibile nel suo nome accessibile disponibile per tecnologie assistive come TalkBack e Voice Access.

Esempio Errato ❌

La scheda è focalizzabile, ma gli elementi di testo figli sono hidden from assistive technology

TalkBack annuncia solo "Group" - nessuno del testo visibile (titolo, autori, data, ecc.) viene letto ad alta voce

Gli utenti di lettori di schermo non hanno accesso ai contenuti che gli utenti vedenti possono leggere

Esempio Corretto ✅

Tutto il testo visibile all'interno della scheda è available to assistive technology

TalkBack annuncia il contenuto completo: titolo, autori, data di pubblicazione, conteggio delle pagine, formato e ISBN

Gli utenti dei lettori di schermo ricevono le stesse informazioni degli utenti vedenti

Panoramica

• Questa regola ha un impatto critico per gli utenti
• Tutto il testo visibile all'interno di un contenitore focalizzabile deve essere disponibile a TalkBack e Voice Access
• Evita di impostare importantForAccessibility="no" sugli elementi di testo che gli utenti vedenti possono percepire
• In Compose, evita di usare invisibleToUser() sugli elementi di testo visibili sullo schermo
• In React Native, evita di impostare importantForAccessibility su no-hide-descendants su testo visibile

Impatto sugli Utenti

Le persone che utilizzano TalkBack sono le più colpite dai problemi di Nome Elemento Annidato. Quando più elementi sono raggruppati insieme all'interno di un contenitore, TalkBack potrebbe non leggere tutto il testo all'interno del contenitore - soprattutto se gli elementi di testo individuali sono nascosti dalla tecnologia assistiva. Ciò significa che le persone che si affidano a TalkBack potrebbero non essere consapevoli dei contenuti importanti sullo schermo disponibili per gli utenti vedenti.

Conferma Problema Nome Elemento Annidato

1. Attiva TalkBack
2. Concentrati sull'elemento di accessibilità contenente il testo
3. Si verificherà una delle seguenti condizioni:
   • Inaccessibile: TalkBack non leggerà tutto il testo visibile all'interno dell'area di messa a fuoco
   • Accessibile: TalkBack leggerà tutto il testo contenuto all'interno dell'area di messa a fuoco

Risolvi i Problemi

Per risolvere i problemi di Nome Elemento Annidato, assicurati che tutto il testo visibile all'interno di un contenitore focalizzabile sia disponibile per la tecnologia assistiva. Evita di nascondere esplicitamente gli elementi di testo a TalkBack o Voice Access quando contengono contenuti che gli utenti vedenti possono percepire.

XML

Evita di impostare la proprietà importantForAccessibility sulle visualizzazioni di testo su no. Tutti gli utenti dovrebbero avere lo stesso accesso al testo sullo schermo, indipendentemente dal fatto che utilizzino o meno tecnologie assistive.

Compose

Evita di contrassegnare gli elementi di testo di Compose come invisibleToUser. Tutti gli utenti dovrebbero avere lo stesso accesso al testo sullo schermo, indipendentemente dal fatto che utilizzino o meno tecnologie assistive.

Nell'esempio seguente, rimuovi invisibleToUser per assicurarti che le visualizzazioni siano disponibili per le persone che utilizzano tecnologie assistive.

Row {
    Text("Welcome to Deque")
    Text("I am a text element.", modifier = Modifier.semantics {
        // Omit the API below to make your Text elements accessible
        invisibleToUser()
    })
}

React Native

Un problema trovato da questa regola nelle app sviluppate con React Native indica un uso improprio della proprietà importantForAccessibility. Se si utilizza la proprietà, assicurati che NON sia impostata su no-hide-descendants.

Flutter

Quando un contenitore raggruppa più pezzi di testo, assicurati che tutto il testo visibile sia esposto al lettore di schermo. Usa MergeSemantics per combinare i nodi di testo figli in un unico nome accessibile.

// Failing — ExcludeSemantics hides visible text from the screen reader
Semantics(
  label: 'Item name: Widget',
  child: Column(
    children: [
      const Text('Item name: Widget'),
      ExcludeSemantics(child: const Text('Price: \$9.99')),
      ExcludeSemantics(child: const Text('In stock')),
    ],
  ),
)

// Passing — MergeSemantics combines all child text into one node
// Screen reader announces "Item name: Widget, Price: $9.99, In stock"
MergeSemantics(
  child: Column(
    children: [
      const Text('Item name: Widget'),
      const Text('Price: \$9.99'),
      const Text('In stock'),
    ],
  ),
)

Posso Ignorare Questa Regola?

Nome Elemento Annidato ha un impatto critico per gli utenti, e raccomandiamo fortemente di intraprendere azioni per risolvere questo problema. In rari casi, alcuni testi all'interno di un contenitore possono essere intenzionalmente decorativi o ridondanti — ma questa dovrebbe essere l'eccezione, non la norma. Scopri di più su ignorando le regole.

Risorse

Pagine del Corso di Deque University

• Criterio di Successo 1.3.2 - Sequenza Significativa (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.0, Raccomandazione del W3C
  • Criterio di successo 1.3.2 - Sequenza significativa
• Documentazione di comprensione delle WCAG 2.0
  • Comprendere 1.3.2 A - Sequenza significativa