Fokussierbarer Text

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

Was wir überprüfen

Alle Elemente, die Text enthalten, sollten für unterstützende Technologien wie VoiceOver fokussierbar sein. Textelemente sollten als Barrierefreiheitselemente markiert werden, damit VoiceOver-Nutzer zum On-Screen-Text navigieren und ihn lesen können.

Negativbeispiel ❌

VoiceOver überspringt von „Premium-Kopfhörer“ direkt zu „In den Warenkorb“ – price and description text are not marked as accessibility elements

der Preis und die Beschreibung werden nie angesagt
Bildschirmleser-Nutzer verpassen wichtige Produktinformationen, die auf dem Bildschirm angezeigt werden

Positivbeispiel ✅

Alle Textelemente sind

und erreichbar mit VoiceOver marked as accessibility elements VoiceOver navigiert durch alle vier Elemente in der Reihenfolge: Überschrift, Preis, Beschreibung und Schaltfläche

Bildschirmleser-Nutzer erhalten die vollständigen Produktinformationen in einer logischen Lesereihenfolge

Auf einen Blick

Diese Regel hat einen entscheidenden Einfluss für die Nutzer

• Textelemente müssen als Barrierefreiheitselemente markiert werden, damit VoiceOver sie lesen kann
• Text elements must be marked as accessibility elements for VoiceOver to read them
• In UIKit, set isAccessibilityElement = true on the text element to make it focusable
• Auswirkungen auf Nutzer

Menschen mit Blindheit oder Sehbehinderungen sind am stärksten betroffen. Wenn ein Textelement nicht als Barrierefreiheitselement markiert ist, kann VoiceOver nicht darauf fokussieren. Als Folge werden Bildschirmleser-Nutzer Informationen, die auf dem Bildschirm angezeigt werden, komplett verpassen, was zu Verwirrung führen kann oder verhindert, dass Nutzer auf wichtige Inhalte zugreifen können.

Fokussierbar-Text-Probleme bestätigen

Schalten Sie VoiceOver ein

1. Versuchen Sie, auf das Textelement zu fokussieren
2. Eines der folgenden Ereignisse tritt ein:
3. Nicht zugänglich: Textelement wird für VoiceOver nicht fokussierbar sein
   • Zugänglich: Textelement wird von VoiceOver fokussiert und gelesen
   • Probleme beheben

Um ein Problem mit fokussierbarem Text zu lösen, stellen Sie sicher, dass das Textelement als Barrierefreiheitselement markiert ist, damit VoiceOver darauf zugreifen und es ansagen kann. Wenn der Text Teil eines fokussierbaren übergeordneten Elements ist (wie einer Schaltfläche oder einer beschrifteten Steuerung), sollte der zugängliche Name des übergeordneten Elements den Text enthalten. In diesem Fall muss das Textelement selbst nicht individuell fokussierbar sein.

UIKit

In Storyboard beheben:

Navigieren Sie zum Textelement.

1. Bestätigen Sie, dass das Inspector-Panel sichtbar ist.
2. Identitätsinspektor
3. Select the Identity Inspector.
4. Under Accessibility, select the "Enabled" checkbox.

SwiftUI

label.isAccessibilityElement = true

In SwiftUI sind Textelemente standardmäßig zugänglich. Überprüfen Sie, dass der Text sinnvoll ist und Kontext bietet, und verstecken Sie ihn nicht, indem Sie den Accessibility Hidden View Modifier verwenden.

React Native

React Native

In React Native, text elements are accessible by default. Confirm the text is meaningful and provides context. Do not turn off accessibility by using the accessible={false} property on the Text element directly, or the accessibilityElementsHidden=true property on a parent element.

Flutter

In Flutter, Text elements are included in the accessibility tree by default. Confirm the text is meaningful and provides context. Do not exclude visible text from the accessibility tree by wrapping it in ExcludeSemantics or Semantics(excludeSemantics: true).

Entscheidender Einfluss

Focusable Text has a Regeln ignorieren for users, and we strongly recommend fixing these issues. In cases where the text is contained within a parent element that is already focusable by VoiceOver and already includes the text in its accessible name - such as a button label or a control's descriptive text - it may be acceptable to leave the text element itself non-focusable. Learn more about ignoring rules.

Resources

Deque University Kursseiten

• 1.3.2 Bedeutende Reihenfolge (A)

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

Weitere Ressourcen

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