Verschachtelter Elementname

Erfahren Sie, wie wir künstliche Intelligenz für diese Regel einsetzen!

Was wir überprüfen

Ein fokussierbares Element sollte allen sichtbaren Text in seinem zugänglichen Namen für unterstützende Technologien wie TalkBack und Voice Access verfügbar halten.

Fehlendes Beispiel ❌

Die Karte ist fokussierbar, aber Kindtextelemente sind hidden from assistive technology

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

Screenreader-Benutzer haben keinen Zugang zu den Inhalten, die sehende Benutzer lesen können

Erfolgreiches Beispiel ✅

Alle sichtbaren Texte innerhalb der Karte sind available to assistive technology

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

Screenreader-Benutzer erhalten die gleichen Informationen wie sehende Benutzer

Auf einen Blick

• Diese Regel hat einen kritischen Einfluss für Benutzer
• Alle sichtbaren Texte innerhalb eines fokussierbaren Containers müssen für TalkBack und Voice Access verfügbar sein
• Vermeiden Sie, importantForAccessibility="no" auf Textelemente anzuwenden, die sehende Benutzer wahrnehmen können
• In Compose vermeiden Sie es, invisibleToUser() auf Text-Elemente anzuwenden, die sichtbar sind
• In React Native vermeiden Sie, importantForAccessibility auf no-hide-descendants bei sichtbaren Texten zu setzen

Auswirkungen auf Benutzer

Personen, die TalkBack verwenden, sind am stärksten von Problemen mit dem verschachtelten Elementnamen betroffen. Wenn mehrere Elemente innerhalb eines Containers zusammengefasst sind, liest TalkBack möglicherweise nicht den gesamten Text innerhalb des Containers vor – insbesondere wenn einzelne Textelemente für unterstützende Technologien ausgeblendet sind. Das bedeutet, dass Personen, die auf TalkBack angewiesen sind, möglicherweise wichtige Inhalte auf dem Bildschirm, die für sehende Benutzer verfügbar sind, nicht wahrnehmen.

Problem mit verschachteltem Elementnamen bestätigen

1. Schalten Sie TalkBack ein
2. Fokussieren Sie das Barrierefreiheitselement, das den Text enthält
3. Eines der folgenden wird passieren:
   • Unzugänglich: TalkBack wird nicht den gesamten sichtbaren Text im Fokusbereich vorlesen
   • Zugänglich: TalkBack wird den gesamten Text im Fokusbereich vorlesen

Probleme beheben

Um Probleme mit dem verschachtelten Elementnamen zu beheben, stellen Sie sicher, dass alle sichtbaren Texte innerhalb eines fokussierbaren Containers für unterstützende Technologien verfügbar sind. Vermeiden Sie es, Textelemente explizit vor TalkBack oder Voice Access zu verbergen, wenn sie Inhalte enthalten, die sehende Benutzer wahrnehmen können.

XML

Vermeiden Sie das Setzen der Eigenschaft importantForAccessibility auf Textansichten auf no. Alle Benutzer sollten den gleichen Zugriff auf den Text auf dem Bildschirm haben, unabhängig davon, ob sie unterstützende Technologien verwenden oder nicht.

Compose

Vermeiden Sie es, Compose-Text-Elemente als invisibleToUser zu kennzeichnen. Alle Benutzer sollten den gleichen Zugriff auf den Text auf dem Bildschirm haben, unabhängig davon, ob sie unterstützende Technologien verwenden oder nicht.

Entfernen Sie im unten stehenden Beispiel invisibleToUser, um sicherzustellen, dass Ansichten für Personen, die unterstützende Technologien nutzen, verfügbar sind.

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

Ein von dieser Regel in Apps, die mit React Native erstellt wurden, gefundenes Problem weist auf einen Missbrauch der Eigenschaft importantForAccessibility hin. Wenn Sie die Eigenschaft verwenden, stellen Sie sicher, dass sie NICHT auf no-hide-descendants gesetzt ist.

Flutter

Wenn ein Container mehrere Textstücke gruppiert, stellen Sie sicher, dass alle sichtbaren Texte dem Screenreader zugänglich sind. Verwenden Sie MergeSemantics, um Kindtextknoten in einem einzigen zugänglichen Namen zusammenzufassen.

// 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?

Verschachtelter Elementname hat einen Kritischer Einfluss für Benutzer, 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 - dies sollte jedoch die Ausnahme und nicht die Regel sein. Erfahren Sie mehr über Regeln ignorieren.

Ressourcen

Kursseiten der Deque University

• Erfolgskriterium 1.3.2 - Bedeutungsvolle Reihenfolge (A)

Hinweis: Der volle Zugriff auf die Ressourcen der Deque University erfordert ein Abonnement.

Andere Ressourcen

• Richtlinien für barrierefreie Webinhalte (WCAG) 2.0, W3C-Empfehlung
  • Erfolgskriterium 1.3.2 - Bedeutungsvolle Abfolge
• WCAG 2.0 Verständnisdokumente
  • Verständnis von 1.3.2 A - Bedeutungsvolle Abfolge