Nome degli Elementi Annidati

Cosa Controlliamo

Un elemento focalizzabile dovrebbe avere tutto il testo visibile nel suo nome accessibile disponibile per tecnologie assistive come VoiceOver e Controllo Vocale.

Esempio Errato ❌

La carta è focalizzabile, ma gli elementi di testo figli sono not included in the container's accessible name

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

Gli utenti del lettore di schermo non hanno accesso al contenuto che gli utenti vedenti possono leggere

Esempio Corretto ✅

Tutto il testo visibile all'interno della carta è included in the container's accessible name

VoiceOver annuncia il contenuto completo: titolo, autori, data di pubblicazione, numero di pagine, formato e ISBN

Gli utenti del lettore di schermo ricevono le stesse informazioni degli utenti vedenti

In Breve

• Questa regola ha un impatto critico sugli utenti
• Tutto il testo visibile all'interno di un contenitore focalizzabile deve essere disponibile per VoiceOver e Controllo Vocale
• In UIKit, impostare esplicitamente accessibilityLabel sul contenitore per includere tutto il testo annidato
• In SwiftUI, utilizzare .accessibilityElement(children: .combine) per garantire che tutto il testo figlio venga annunciato
• In React Native, evitare di impostare accessibilityElementsHidden su true sugli elementi di testo visibili

Impatto sugli Utenti

Le persone che utilizzano VoiceOver sono maggiormente impattate da problemi di Nome degli Elementi Annidati. Quando più elementi sono raggruppati all'interno di un contenitore, VoiceOver potrebbe non leggere tutto il testo all'interno del contenitore, specialmente se gli elementi di testo individuali sono nascosti dalla tecnologia assistiva. Ciò significa che le persone che dipendono da VoiceOver potrebbero non essere consapevoli di contenuti importanti sullo schermo disponibili agli utenti vedenti.

Confermare il Problema di Nome degli Elementi Annidati

1. Attivare VoiceOver
2. Focalizzare l'elemento di accessibilità contenente il testo
3. Accadrà una delle seguenti cose:
   • Inaccessibile: VoiceOver non leggerà tutto il testo visibile all'interno dell'area di focus
   • Accessibile: VoiceOver leggerà tutto il testo contenuto all'interno dell'area di focus

Risolvi Problemi

Per risolvere i problemi di Nome degli Elementi Annidati, assicurarsi che tutto il testo visibile all'interno di un contenitore focalizzabile sia disponibile alla tecnologia assistiva. Evitare di nascondere esplicitamente elementi di testo da VoiceOver o Controllo Vocale quando contengono contenuti percepibili dagli utenti vedenti.

UIKit

Un problema trovato da questa regola è causato dall'uso del valore predefinito accessibilityLabel per un elemento di accessibilità contenente più elementi di testo.

Per risolverlo, impostare esplicitamente il accessibilityLabel del contenitore per includere tutto il testo visibile:

let paragraphOne = UILabel()
let paragraphTwo = UILabel()
let accessibilityElement = UIView()

paragraphOne.text = "One paragraph of text about something."
paragraphTwo.text = "A second paragraph of text about something."

accessibilityElement.addSubviews([paragraphOne, paragraphTwo])

// Update the accessibility element's accessibilityLabel, so both paragraphs are read by VoiceOver.
view.accessibilityLabel = "\(paragraphOne.text) \(paragraphTwo.text)"

SwiftUI

Un problema trovato da questa regola in SwiftUI indica l'uso improprio del modificatore accessibilityElement oltre al modificatore accessibilityElement(children:..).

Utilizzare questi modificatori su una vista di raggruppamento piuttosto che su elementi individuali. Si noti l'ordine e il AccessibilityChildBehavior specificato di seguito.

VStack(alignment: .leading) {
    HStack {
      Text("Title:")
      book.title.map({ title in
        Text(title)
      })
    }
    HStack {
      Text("Author:")
      book.author.map({ author in
        Text(author)
      })
    }

    HStack {
      Text("Genre:")
      book.genre.map({ genre in
        Text(genre)
      })
    }
}
.accessibilityElement()
.accessibilityElement(children: .combine)

React Native

Un problema trovato da questa regola nelle app costruite con React Native indica un uso improprio della proprietà accessible e/o proprietà accessibilityElementsHidden. Se si impostano esplicitamente queste proprietà, assicurarsi che NON siano configurate in modo da nascondere il testo visibile dalla tecnologia assistiva.

Flutter

Quando un contenitore raggruppa più pezzi di testo, assicurarsi che tutto il testo visibile sia esposto al lettore di schermo. Utilizzare MergeSemantics per combinare 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 degli Elementi Annidati ha un Impatto critico per gli utenti, e raccomandiamo fortemente di prendere misure 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 regola. Scopri di più su ignorare le regole.

Risorse

Pagine dei Corsi 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 W3C
  • Criterio di Successo 1.3.2 - Sequenza Significativa
• Documenti di comprensione WCAG 2.0
  • Comprensione 1.3.2 A - Sequenza Significativa