Geschachtelte Elementenamen

Was wir überprüfen

Ein fokussierbares Element sollte allen sichtbaren Text innerhalb seines zugänglichen Namens für unterstützende Technologien wie VoiceOver und Sprachsteuerung verfügbar machen.

Fehlerhaftes Beispiel ❌

Die Karte ist fokussierbar, aber enthaltene Textelemente sind not included in the container's accessible name

VoiceOver kündigt nur "Group" an — keiner der sichtbaren Texte (Titel, Autoren, Datum usw.) wird vorgelesen

Bildschirmleser-Nutzer haben keinen Zugriff auf den Inhalt, den sehende Nutzer lesen können

Erfolgreiches Beispiel ✅

Alle sichtbaren Texte innerhalb der Karte sind included in the container's accessible name

VoiceOver kündigt den vollständigen Inhalt an: Titel, Autoren, Veröffentlichungsdatum, Seitenanzahl, Format und ISBN

Bildschirmleser-Nutzer erhalten die gleiche Information wie sehende Nutzer

Auf einen Blick

• Diese Regel hat eine kritische Auswirkung für die Nutzer
• Alle sichtbaren Texte innerhalb eines fokussierbaren Containers müssen für VoiceOver und Sprachsteuerung verfügbar sein
• In UIKit, setzen Sie explizit accessibilityLabel auf den Container, um alle geschachtelten Texte einzubeziehen
• In SwiftUI verwenden Sie .accessibilityElement(children: .combine), um sicherzustellen, dass alle enthaltenen Texte angesagt werden
• In React Native, vermeiden Sie die Einstellung von accessibilityElementsHidden auf true bei sichtbaren Textelementen

Auswirkung auf die Nutzer

Personen, die VoiceOver verwenden, sind am stärksten von Problemen mit geschachtelten Elementennamen betroffen. Wenn mehrere Elemente in einem Container gruppiert sind, liest VoiceOver möglicherweise nicht den gesamten Text im Container—insbesondere wenn einzelne Textelemente vor unterstützender Technologie verborgen sind. Dies bedeutet, dass Personen, die auf VoiceOver angewiesen sind, möglicherweise nicht über wichtige Bildschirminhalte informiert werden, die für sehende Nutzer verfügbar sind.

Bestätigen Sie das Problem mit geschachtelten Elementennamen

1. VoiceOver einschalten
2. Fokussieren Sie auf das Barrierefreiheitselement, das den Text enthält
3. Eines der folgenden Dinge wird passieren:
   • Nicht zugänglich: VoiceOver wird nicht den gesamten sichtbaren Text im Fokusbereich lesen
   • Zugänglich: VoiceOver wird den gesamten Text im Fokusbereich lesen

Probleme beheben

Um Probleme mit geschachtelten Elementennamen zu lösen, stellen Sie sicher, dass aller sichtbare Text innerhalb eines fokussierbaren Containers für unterstützende Technologie verfügbar ist. Vermeiden Sie es, Textelemente explizit vor VoiceOver oder Sprachsteuerung zu verbergen, wenn sie Inhalte enthalten, die sehende Nutzer wahrnehmen können.

UIKit

Ein Problem, das durch diese Regel gefunden wird, wird durch die Verwendung des Standard- accessibilityLabel für ein Barrierefreiheitselement verursacht, das mehrere Textelemente enthält.

Um es zu beheben, setzen Sie explizit das accessibilityLabel des Containers, um alle sichtbaren Texte einzubeziehen:

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

Ein Problem, das durch diese Regel innerhalb SwiftUI gefunden wird, deutet auf einen Missbrauch des accessibilityElement Modifikators zusätzlich zum accessibilityElement(children:..) Modifikator hin.

Verwenden Sie diese Modifikatoren auf einer Gruppierungsansicht und nicht auf einzelnen Elementen. Beachten Sie die Reihenfolge und AccessibilityChildBehavior unten angegeben.

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

Ein Problem, das durch diese Regel in Apps gefunden wird, die mit React Native erstellt wurden, deutet auf einen Missbrauch der accessible- und/oder accessibilityElementsHidden-Eigenschaft hin. Wenn Sie diese Eigenschaften explizit setzen, stellen Sie sicher, dass sie NICHT so konfiguriert sind, dass sichtbarer Text vor unterstützender Technologie verborgen wird.

Flutter

Wenn ein Container mehrere Textteile gruppiert, stellen Sie sicher, dass aller sichtbarer Text dem Bildschirmleser zugänglich ist. Verwenden Sie MergeSemantics, um Kindtextknoten zu einem einzigen zugänglichen Namen zu kombinieren.

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

Kann ich diese Regel ignorieren?

Geschachtelte Elementenamen haben eine Kritische Auswirkung für die Nutzer, und wir empfehlen dringend, Maßnahmen zu ergreifen, um dieses Problem zu beheben. In seltenen Fällen können einige Texte innerhalb eines Containers absichtlich dekorativ oder redundant sein — aber dies sollte die Ausnahme und nicht die Regel sein. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Deque University Kursseiten

• Erfolgskriterium 1.3.2 - Bedeutungsvolle Reihenfolge (A)

Hinweis: Der vollständige Zugriff auf die Deque University-Ressourcen erfordert ein Abonnement.

Weitere Ressourcen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C-Empfehlung
  • Erfolgskriterium 1.3.2 - Bedeutungsvolle Reihenfolge
• WCAG 2.0 Verständnisdokumente
  • Verständnis 1.3.2 A - Bedeutungsvolle Reihenfolge