Schermtitel

Waar We Op Controleren

Elke scherm in een applicatie moet een unieke, beschrijvende titel hebben die door hulpmiddelen kan worden aangekondigd.

Onjuist Voorbeeld ❌

screen title = {alleen appnaam}

TalkBack kondigt alleen de appnaam aan wanneer het scherm opent
"ShopEase"

Correct Voorbeeld ✅

screen title = "ShopEase, Winkelwagen"

TalkBack kondigt de beschrijvende schermtitel aan wanneer het scherm opent
"ShopEase, Winkelwagen"

In Vogelvlucht

• Deze regel heeft een matige impact voor gebruikers
• Elk scherm heeft een unieke, beschrijvende titel nodig — niet alleen de applicatienaam
• Native Android: gebruik Activity.setTitle() om de schermtitel in te stellen
• React Native: voeg options={{title: 'Screen Title'}} toe aan elke Stack.Screen

Impact op Gebruikers

Schermtitels stellen gebruikers met visuele, cognitieve en motorische beperkingen en beperkte kortetermijngeheugen in staat om te bepalen waar ze zich in de applicatie bevinden, inhoud op een scherm te identificeren aan de hand van de titel, en te navigeren tussen schermen wanneer de modus van de gebruiker afhankelijk is van audio.

Wanneer een scherm geen titel heeft, kondigt TalkBack alleen de applicatienaam aan op elk scherm. Dit maakt het voor gebruikers van ondersteunende technologie onmogelijk om onderscheid te maken tussen verschillende schermen zonder de volledige inhoud te verkennen.

Bevestig Schermtitelprobleem

1. Zet TalkBack aan
2. Open de applicatie en navigeer naar het scherm
3. Een van de volgende dingen zal gebeuren:
   • Niet Toegankelijk: TalkBack kondigt alleen de applicatienaam aan
   • Toegankelijk: TalkBack kondigt de specifieke schermtitel aan in plaats van de applicatienaam

Los Problemen Op

Om problemen met Schermtitels op te lossen, stel een unieke, beschrijvende titel in op elk scherm zodat hulpmiddelen deze kunnen aankondigen wanneer het scherm opent. Dit helpt gebruikers zich te oriënteren zonder de volledige inhoud van elk scherm te moeten verkennen.

Native Android

Stel de titel van het scherm in binnen de Activity. De titel moet het doel of de inhoud van het scherm beschrijven.

Activity.this.setTitle("Settings");

React Native

Om problemen met Schermtitels op te lossen, probeer de volgende benaderingen:

1. Stel de schermtitel in de schermopties van React Navigation in. Wanneer je React Navigation gebruikt, zorgt het instellen van de titel in de options prop van het scherm ervoor dat de native header wordt bijgewerkt. Op Android komt dit overeen met de Activiteit/Fragment-titel en triggert een TYPE_WINDOW_STATE_CHANGED toegankelijkheidsevent dat TalkBack automatisch aankondigt. Dit kan statisch of dynamisch worden ingesteld op basis van routeparameters.
2. Gebruik navigation.setOptions() vanuit het scherm als de titel moet worden ingesteld of bijgewerkt nadat het scherm wordt geladen. Het aanroepen van setOptions met een titelwaarde binnen de schermcomponent werkt ook de native kopteksttitel bij en triggert een TalkBack-aankondiging.
3. Gebruik AccessibilityInfo.announceForAccessibility() als de voorgaande benaderingen de aankondiging van TalkBack niet triggeren. Het combineren van announceForAccessibility met de useFocusEffect hook van React Navigation zorgt ervoor dat de aankondiging elke keer wordt uitgevoerd dat de gebruiker naar dat scherm navigeert.
4. Als laatste redmiddel stel de native Activiteitstitel in via een native module. Als de header van React Navigation de aankondiging niet triggert, kunt u met de native Android-laag communiceren en activity.setTitle() direct aanroepen, wat het TYPE_WINDOW_STATE_CHANGED event triggert waar TalkBack naar luistert.

Aangepaste Navigatiebalken

Voor een werkelijk toegankelijke ervaring in applicaties gebouwd met React Native, moet de navigatie-header <Stack.Navigator> met een title optie gebruiken. Een aangepaste navigatiebalk kan niet programmatisch worden gecodeerd om aan te geven dat het een correct navigatie-element is en niet zomaar een gewone weergave. Dit verandert de manier waarop hulpmiddelen het element aankondigen en ermee omgaan. Merk op dat het instellen van een header attribuut, zoals vaak aanbevolen, niet voldoet aan de criteria voor Schermtitel.

<Stack.Navigator>
      <Stack.Screen
          name="CartScreen"
          component={CartScreen}
          options={{title: 'Cart'}}
      />
</Stack.Navigator>

Kan Ik Deze Regel Negeren?

Schermtitel heeft een matige impact voor gebruikers, en we raden aan om op elke scherm een beschrijvende titel in te stellen. Hoewel het de toegang tot inhoud niet blokkeert, vermindert het aanzienlijk de navigatie voor schermlezergebruikers. In zeldzame gevallen - zoals een app met één scherm waar de applicatienaam zelf het scherm duidelijk identificeert - kunt u overwegen de regel te negeren. Lees meer over regels negeren.

Veelgestelde Vragen

Zijn er bekende beperkingen bij deze regel?
Ja. Flutter-apps slagen universeel niet voor de Schermtitelregel omdat Flutter AppBar.title als een koptekelement blootstelt in de semantische boom in plaats van het te koppelen aan de native schermtitel, Activity.setTitle. Dit resulteert in onbehandelbare fouten voor ontwikkelaars.
Schermlezers kondigen de titel nooit automatisch aan tijdens navigatie; gebruikers moeten handmatig de AppBar focussen om het te horen. Dit beïnvloedt alle Flutter-apps en veroorzaakt Schermtitel (WCAG 2.4.2) falen ongeacht of er een beschrijvende AppBar.title aanwezig is.

Bronnen

Deque University Cursuspagina's

• Semantische Structuur en Navigatie (WCAG 2.1) - Videotutorial
• Succescriterium 2.4.2 - Pagina Getiteld
• Vereisten - 2.4.2.a Titels op Pagina's

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

Andere Bronnen

• Web Content Accessibility Guidelines (WCAG) 2.0, W3C Aanbeveling
  • 2.4.2 Pagina Getiteld - Niveau A
• WCAG 2.0 Begrip Documenten
  • Begrip SC 2.4.2 - Pagina Getiteld (Niveau A)