Succescriterium 2.4.2 - Niveau A

Paginatitel

Zorg dat elk scherm een duidelijke titel heeft. De titel vertelt gebruikers op welk scherm ze zich bevinden en wat ze kunnen doen. Voor alle gebruikers is deze informatie handig om te weten. En is extra belangrijk voor mensen met een cognitieve beperking.

Impact

• Voor gebruikers van de schermlezer geeft de paginatitel direct duidelijkheid waar ze zich bevinden.

• Voor gebruikers met een cognitieve beperking of mensen met beperkte aandacht verbetert de paginatitel hun gebruik.

Controleren

“Heeft elk scherm een duidelijke titel?“

Dit kan getest worden zonder hulpmiddelen.

Let op: dit succescriterium is uitgesloten voor apps in de EN 301 549.

Oplossing

Titel instellen

Android

Screen title - Android

On Android, we recommend using a Toolbar with an appropriate title on each screen.

Kotlin

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.appt)

    val toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)
    title = "Appt homescreen"
}

Bijdragen

Jetpack Compose

Screen title - Jetpack Compose

In Jetpack Compose, we recommend using a Scaffold with an appropriate TopAppBar on each screen.

Kotlin

Scaffold(
    topBar = {
        TopAppBar(title = {
            Text("Appt homescreen")
        })
    }
) { innerPadding ->
    // Scaffold content ...
}

Bijdragen

iOS

Screen title - iOS

On iOS, we recommend using a UINavigationController with an appropriate title on each screen.

Swift

override func viewDidLoad() {
    super.viewDidLoad()
    title = "Appt homescreen"
}

Bijdragen

SwiftUI

Screen title - SwiftUI

In SwiftUI, we recommend embedding your views in a NavigationStack with an appropriate navigationTitle on each screen.

Swift

NavigationStack {
    VStack {
        Text("Welcome to the Appt homescreen")
    }
    .navigationTitle("Appt homescreen")
}

Bijdragen

Flutter

Screen title - Flutter

In Flutter, we recommend using an AppBar with an appropriate title on each screen.

Dart

Scaffold(
  appBar: AppBar(
    title: const Text('Appt homescreen'),
  ),
  body: ...
);

Bijdragen

React Native

Screen title - React Native

In React Native, we recommend using React Navigation with an appropriate title on each screen.

JSX

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{ title: 'Appt homescreen' }}
      />
    </Stack.Navigator>
  );
}

Bijdragen

.NET MAUI

Screen title - .NET MAUI

In MAUI, we recommend setting an appropriate Title for each ContentPage.

XML

<ContentPage
    x:Class="NewPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="Appt homescreen">
</ContentPage>

Bijdragen

C#

public NewPage()
{
    Title = "Appt homescreen";
}

Bijdragen

Xamarin

Screen title - Xamarin

With Xamarin Forms, we recommend setting an appropriate Title for each ContentPage.

XML

<ContentPage
    x:Class="NewPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    Title="{Binding PageTitle}">
    <ContentView>
        ...
    </ContentView>
</ContentPage>

Bijdragen

C#

public NewPage()
{
    SetBinding(Page.TitleProperty, new Binding("Appt homescreen")); 
}

Bijdragen

Bronnen

• WCAG 2.2 - Succescriterium 2.4.2 - Paginatitel