Schermtitel

Waar We Op Controleren

Elk scherm binnen een applicatie moet een unieke, beschrijvende titel hebben die door hulpmiddelen wordt aangekondigd.

Fout Voorbeeld ❌

screen title = {alleen app-naam}

VoiceOver kondigt alleen de app-naam aan wanneer het scherm opent
"ShopEase"

Correct Voorbeeld ✅

screen title = "ShopEase, Winkelwagen"

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

In Een Oogopslag

• Deze regel heeft een matige impact voor gebruikers
• Elk scherm heeft een unieke, beschrijvende titel nodig — niet alleen de applicatienaam
• UIKit: stel navigationController?.title of de title-eigenschap in op de ViewController
• SwiftUI: voeg een .navigationTitle()-modifier toe aan het body van de view
• React Native: voeg options={{title: 'Screen Title'}} toe aan elke Stack.Screen

Impact voor 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 tussen schermen te navigeren wanneer de gebruikswijze van een gebruiker afhankelijk is van audio.

Wanneer een scherm geen titel heeft, zal VoiceOver geen schermtitel aankondigen bij het navigeren naar dat scherm. Dit maakt het onmogelijk voor hulpmiddelengebruikers om een scherm van het andere te onderscheiden zonder de volledige inhoud te verkennen.

Bevestig Schermtitelprobleem

1. Zet VoiceOver aan
2. Navigeer naar het scherm in de app
3. Een van de volgende dingen zal gebeuren:
   • Niet toegankelijk: VoiceOver zal geen schermtitel aankondigen
   • Toegankelijk: VoiceOver zal de schermtitel aankondigen

Los Problemen Op

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

UIKit

Vind de ViewController die de regel niet haalt, en stel de title-eigenschap van de navigationController in.

navigationController?.title = "Screen Title Here"

Als alternatief kun je de title-eigenschap 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-eigenschap 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 options={{title: 'Screen Title'}} toe om een betekenisvolle schermtitel te definiëren.

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

Aangepaste Navigatiebalken

Voor een echt toegankelijke ervaring in applicaties gebouwd met React Native, moet de navigatieheader <Stack.Navigator> gebruiken met een title-optie. Een aangepaste navigatiebalk kan niet op een programmatische manier worden gecodeerd om aan te geven dat het een juiste navigatie-element is en niet alleen een gewone view. Dit verandert hoe hulpmiddelen de interactie met en aankondigingen van het element ervaren. Merk op dat het instellen van een header-attribuut, zoals vaak wordt 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 een beschrijvende titel op elk scherm in te stellen. In zeldzame gevallen — zoals een app met één scherm waarbij de naam van de applicatie zelf het scherm duidelijk identificeert — kun je overwegen de regel te negeren. Lees meer over regels negeren.

Veelgestelde Vragen

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

Bronnen

Deque University Cursus Pagina's

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

Opmerking: Volledige toegang tot Deque University-voorzieningen 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)