Schermtitel

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard
Not for use with personal data

WCAG 2.0 - 2.4.2 Moderate Impact - Moderate

Elk scherm binnen een applicatie moet een titel hebben die door ondersteunende technologie wordt aangekondigd.

Impact

Schermtitels stellen gebruikers met visuele, cognitieve en motorische beperkingen en beperkte korte-termijn geheugen in staat om te bepalen waar ze zich in de applicatie bevinden, om inhoud op een scherm te identificeren aan de hand van de titel en om tussen schermen te navigeren in gevallen waarin de gebruiksmodus van een gebruiker afhankelijk is van audio.

Bevestiging

  1. Ga naar een nieuw scherm in de app
  2. Een van de volgende dingen zal gebeuren:
    • Niet toegankelijk: VoiceOver zal geen schermtitel aankondigen
    • Toegankelijk: VoiceOver zal de schermtitel aankondigen

Hoe te Fixen

Dit probleem doet zich voor wanneer een scherm geen titel heeft.

UIKit

In code:

Vind de ViewController die de regel niet volgt en stel de titelproperty van de Navigatiecontroller in.

navigationController?.title = "Screen Title Here"

U kunt ook de title property direct op de ViewController instellen.

title = "Screen Title Here"

SwiftUI

Voeg een .navigationTitle view modifier toe aan het einde van het laatste element binnen de body-property van de view.

 var body: some View {
        VStack {
            Text("Below is a stepper in SwiftUI")
            StepperView()
        }.navigationTitle("Screen Title")
    }

React Native

Zorg ervoor dat elke Stack.Screen component een beschrijvende naam heeft. Voeg indien nodig options={{title: 'New Screen Title'}} toe om een betere schermtitel te definiëren.

<Stack.Screen
    name="ScreenTitleExample"
    component={ScreenTitleExample}
    options={{title: 'Screen Title'}}
/>

Aangepaste Navigatiebalken

Wat we hebben ontdekt in applicaties gebouwd met React Native is dat voor een echt toegankelijke ervaring de navigatieheader moet worden ingesteld met <Stack.Navigator> met opties voor titel. Een aangepaste navigatiebalk kan niet programmatisch gecodeerd worden om aan te geven dat het een correct navigatie-element is en geen gewone view. Dit verandert hoe ondersteunende technologie het element aankondigt en ermee omgaat. Houd er rekening mee dat het instellen van een headerattribuut, zoals vaak wordt aanbevolen, niet voldoet aan de criteria voor Schermtitel.