Focustekst

Ontdek hoe we kunstmatige intelligentie gebruiken voor deze regel!

Waar We Op Controleren

Alle elementen met tekst moeten focusbaar zijn voor ondersteunende technologieën zoals VoiceOver. Tekstelementen moeten als toegankelijkheidselementen worden gemarkeerd, zodat VoiceOver-gebruikers naar en op het scherm weergegeven tekst kunnen navigeren en lezen.

Mislukt Voorbeeld ❌

De price and description text are not marked as accessibility elements

VoiceOver springt van „Premium Hoofdtelefoon“ direct naar „Toevoegen aan Winkelwagen“ -
de prijs en beschrijving worden nooit aangekondigd

Schermlezers gebruikers missen cruciale productinformatie die op het scherm wordt weergegeven

Geslaagd Voorbeeld ✅

Alle textelementen zijn marked as accessibility elements en bereikbaar met VoiceOver

VoiceOver navigeert door alle vier de elementen in volgorde: kop, prijs, beschrijving en knop

Schermlezers gebruikers ontvangen de volledige productinformatie in een logische leesvolgorde

In Een Oogopslag

• Deze regel heeft een kritieke impact op gebruikers
• Tekstelementen moeten als toegankelijkheidselementen worden gemarkeerd zodat VoiceOver ze kan lezen
• In UIKit, stel isAccessibilityElement = true in op het textelement om het focusbaar te maken
• In SwiftUI en React Native zijn tekstelementen standaard toegankelijk — verberg ze niet voor ondersteunende technologie

Impact op Gebruikers

Mensen met blindheid of slechtziendheid worden het meest getroffen. Wanneer een tekstelement niet als een toegankelijkheidselement is gemarkeerd, kan VoiceOver er niet op focussen. Als gevolg hiervan missen schermlezers informatie die op het scherm wordt weergegeven volledig, wat tot verwarring kan leiden of gebruikers kan verhinderen belangrijke inhoud te benaderen.

Controleer Focustekstprobleem

1. Schakel VoiceOver in
2. Probeer te focussen op het tekstelement
3. Een van de volgende zal gebeuren:
   • Niet toegankelijk: Tekstelement zal niet focusbaar zijn door VoiceOver
   • Toegankelijk: Tekstelement wordt gefocust en gelezen door VoiceOver

Problemen Oplossen

Om een focustekstprobleem op te lossen, zorg ervoor dat het tekstelement als een toegankelijkheidselement is gemarkeerd zodat VoiceOver het kan bereiken en aankondigen. Als de tekst deel uitmaakt van een focusbaar ouder-element (zoals een knop of gelabelde bediening), moet de toegankelijke naam van het ouder-element de tekst bevatten. In dat geval hoeft het tekstelement zelf niet individueel focusbaar te zijn.

UIKit

Om te repareren in Storyboard:

1. Navigeer naar het tekstelement.
2. Zorg ervoor dat het Inspector-paneel zichtbaar is.
3. Selecteer de Identiteitinspector.
4. Onder Toegankelijkheid, selecteer het vakje „Ingeschakeld“.

Om in code te repareren, maak het tekstelement focusbaar door VoiceOver:

label.isAccessibilityElement = true

SwiftUI

In SwiftUI zijn tekstelementen standaard toegankelijk. Zorg ervoor dat de tekst betekenisvol is en context biedt, en verberg het niet door de view modifier accessibility hidden te gebruiken.

React Native

In React Native zijn textelementen standaard toegankelijk. Bevestig dat de tekst betekenisvol is en context biedt. Schakel de toegankelijkheid niet uit door de accessible={false}-eigenschap direct op het Tekstelement te gebruiken of de accessibilityElementsHidden=true-eigenschap op een ouder element.

Flutter

In Flutter worden Text-elementen standaard opgenomen in de toegankelijkheidsstructuur. Bevestig dat de tekst betekenisvol is en context biedt. Sluit zichtbare tekst niet uit van de toegankelijkheidsstructuur door het in ExcludeSemantics of Semantics(excludeSemantics: true) te wikkelen.

Kan Ik Deze Regel Negeren?

Focusbare tekst heeft een kritieke impact voor gebruikers, en we raden sterk aan deze problemen op te lossen. In gevallen waar de tekst zich binnen een ouder element bevindt dat al focusbaar is door VoiceOver en de tekst al in zijn toegankelijke naam bevat - zoals een knoplabel of de beschrijvende tekst van een controle - kan het acceptabel zijn om het textelement zelf niet-focusbaar te laten. Meer informatie over regels negeren.

Middelen

Deque University Cursuspagina's

• 1.3.2 Betekenisvolle Volgorde (A)

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

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling
  • Succescriterium 1.3.2 - Betekenisvolle Volgorde
• WCAG 2.0 Begrijpendocumenten
  • Inzicht in 1.3.2 A - Betekenisvolle Volgorde