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.

Falen Voorbeeld ❌

De kaart is focusbaar, maar kinderen tekst elementen zijn not included in the container's accessible name

VoiceOver kondigt alleen "Group" aan — geen van de zichtbare tekst (titel, auteurs, datum, enz.) wordt hardop voorgelezen

Schermlezersgebruikers hebben geen toegang tot de inhoud die ziende gebruikers kunnen lezen

Geslaagd Voorbeeld ✅

Alle zichtbare tekst binnen de kaart is included in the container's accessible name

VoiceOver kondigt de volledige inhoud aan: titel, auteurs, publicatiedatum, paginacount, formaat en ISBN

Schermlezersgebruikers ontvangen dezelfde informatie als ziende gebruikers

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
• Stel in UIKit expliciet accessibilityLabel in op de container om alle geneste tekst op te nemen
• Gebruik in SwiftUI .accessibilityElement(children: .combine) om ervoor te zorgen dat alle kindtekst wordt aangekondigd
• Vermijd in React Native het instellen van accessibilityElementsHidden op true bij zichtbare textelementen

Impact op Gebruikers

Mensen die VoiceOver gebruiken, worden het meest getroffen door problemen met de naam van geneste elementen. Wanneer meerdere elementen in een container gegroepeerd zijn, leest VoiceOver mogelijk niet alle tekst binnen de container voor, vooral als individuele textelementen voor ondersteunende technologie verborgen zijn. Dit betekent dat mensen die afhankelijk zijn van VoiceOver 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 corrigeren, 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 dat door deze regel binnen SwiftUI wordt gevonden, geeft misbruik van de accessibilityElement-modifier aan, 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 aangegeven.

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 dat door deze regel in apps gebouwd met React Native wordt gevonden, wijst op misbruik van de accessible-eigenschap en/of accessibilityElementsHidden-eigenschap. Als u deze eigenschappen expliciet instelt, zorg er dan voor dat ze NIET zo geconfigureerd zijn dat zichtbare tekst verborgen wordt voor ondersteunende technologie.

Flutter

Wanneer een container meerdere stukken tekst groepeert, zorg ervoor dat alle zichtbare tekst toegankelijk is voor de schermlezer. Gebruik MergeSemantics om kindtekstknopen te combineren tot één 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 Elementen Naam heeft een Kritieke impact voor gebruikers, en we raden ten zeerste aan stappen te ondernemen om dit probleem op te lossen. In zeldzame gevallen kan enige tekst binnen een container opzettelijk decoratief of overbodig zijn - maar dit zou de uitzondering moeten zijn, niet de standaard. Leer 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 1.3.2 A - Betekenisvolle Volgorde