Geneste Element Namen

Waar We Op Controleren

Een focusbaar element moet alle zichtbare tekst binnen zijn toegankelijke naam beschikbaar hebben voor hulpmiddelen zoals VoiceOver en Voice Control.

In Één Oogopslag

• Deze regel heeft een kritieke impact voor gebruikers
• Alle zichtbare tekst binnen een focusbare container moet beschikbaar zijn voor VoiceOver en Voice Control
• In UIKit, stel expliciet accessibilityLabel in op de container om alle geneste tekst op te nemen
• In SwiftUI, gebruik .accessibilityElement(children: .combine) om ervoor te zorgen dat alle kindertekst wordt aangekondigd
• In React Native, vermijd het instellen van accessibilityElementsHidden op true voor zichtbare textelementen

Impact op Gebruikers

Mensen die VoiceOver gebruiken worden het meest getroffen door Geneste Element Namen-problemen. Wanneer meerdere elementen samen in een container zijn gegroepeerd, kan VoiceOver niet alle tekst binnen de container lezen, vooral niet als afzonderlijke textelementen verborgen zijn voor hulpmiddelen. Dit betekent dat mensen die op VoiceOver vertrouwen zich niet bewust kunnen zijn van belangrijke inhoud op het scherm die beschikbaar is voor ziende gebruikers.

Bevestig Geneste Element Namen Probleem

1. Zet VoiceOver aan
2. Richt je op het toegankelijkheidselement dat de tekst bevat
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: VoiceOver zal niet alle zichtbare tekst binnen het focusgebied lezen
   • Toegankelijk: VoiceOver zal alle tekst binnen het focusgebied lezen

Problemen Oplossen

Om Geneste Element Namen-problemen op te lossen, zorg ervoor dat alle zichtbare tekst binnen een focusbare container beschikbaar is voor hulpmiddelen. Vermijd het expliciet verbergen van textelementen voor VoiceOver of Voice Control wanneer ze inhoud bevatten die ziende gebruikers kunnen waarnemen.

UIKit

Een probleem dat door deze regel wordt gevonden, wordt veroorzaakt door het gebruik van de standaard accessibilityLabel voor een toegankelijkheidselement dat meerdere textelementen bevat.

Om te herstellen, stel expliciet de accessibilityLabel van de container in om alle zichtbare tekst op te nemen:

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

Een probleem gevonden door deze regel binnen SwiftUI duidt op verkeerd gebruik van de accessibilityElement modifier naast de accessibilityElement(children:..) modifier.

Gebruik deze modifiers op een groepsweergave in plaats van op individuele elementen. Let op de volgorde en AccessibilityChildBehavior zoals hieronder gespecificeerd.

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

Een probleem gevonden door deze regel in apps gebouwd met React Native duidt op verkeerd gebruik van de accessible eigenschap en/of accessibilityElementsHidden eigenschap. Als je deze eigenschappen expliciet instelt, zorg ervoor dat ze NIET zijn geconfigureerd op een manier die zichtbare tekst verbergt voor hulpmiddelen.

Flutter

Wanneer een container meerdere stukken tekst groepeert, zorg ervoor dat alle zichtbare tekst toegankelijk is voor de schermlezer. Gebruik MergeSemantics om kindertekstknopen te combineren tot een enkele toegankelijke naam.

// 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'),
    ],
  ),
)

Kan Ik Deze Regel Negeren?

Geneste Element Namen heeft een Kritieke impact voor gebruikers, en we raden sterk aan stappen te ondernemen om dit probleem op te lossen. In zeldzame gevallen kan een deel van de tekst binnen een container opzettelijk decoratief of overbodig zijn — maar dit zou de uitzondering moeten zijn, niet de standaard. Lees meer over regels negeren.

Hulpmiddelen

Deque University Cursus Pagina's

• Succescriterium 1.3.2 - Betekenisvolle Volgorde (A)

Opmerking: Volledige toegang tot Deque University-bronnen vereist een abonnement.

Andere bronnen

• Richtlijnen voor Toegankelijkheid van Webinhoud (WCAG) 2.0, W3C-aanbeveling
  • Succescriterium 1.3.2 - Betekenisvolle Volgorde
• WCAG 2.0 Begrijpendocumenten
  • Begrijpen van 1.3.2 A - Betekenisvolle Volgorde