Success Criterion 3.2.3 - Level AA

Consistent Navigation

Ensure navigation is always in the same place. For example, place the back button in the top left corner. Consistent navigation is especially useful for users of assistive technologies.

Impact

Anyone can use an app more easily when repeating content is structured in the same way. Especially people with cognitive, intellectual or visual impairments benefit from this.

Check

“Is the way of navigation the same on each screen?“

This can be tested without assistive technologies.

Note: this success criterion is exempt for apps in EN 301 549 and Section 508.

Solution

Use consistent positioning

Android

Element position - Android

On Android, you should place your Toolbar and BottomNavigationView on the same position of each screen.

Kotlin

Not available, contribute!

Contribute

Jetpack Compose

Element position - Jetpack Compose

In Jetpack Compose, you should place your TopAppBar and BottomAppBar in the same position on each screen. You can use Scaffold to place such Composables consistently.

Kotlin

Scaffold(
    topBar = { TopAppBar( /* top app bar config */ ) },
    bottomBar = { BottomAppBar { /* bottom app bar content */ } }
) { paddingValues ->  
    // Scaffold content...
}

Contribute

iOS

Element position - iOS

On iOS, you should place your UINavigationBar and UITabBar on the same position of each screen.

Swift

Not available, contribute!

Contribute

SwiftUI

Element position - SwiftUI

In SwiftUI, you should place frequently used common views, for example NavigationStack and TabView, on the same position of each screen.

In this SwiftUI code sample, we place the commonly used Cancel and Save button elements in logical and consistent locations: the Cancel button on the left and the Save button on the right of the navigation bar.

Swift

var body: some View {
    NavigationView {
        EditProfileView()
            .navigationTitle("Edit Profile")
            .navigationBarItems(
                leading: CancelButton(action: {
                    // Perform cancel action
                }),
                trailing: SaveButton(action: {
                    // Perform save action here
                })
            )
    }
}

Contribute

Flutter

Element position - Flutter

In Flutter, you should place your AppBar on the same position of your Scaffold.

Dart

Not available, contribute!

Contribute

React Native

Element position - React Native

In React Native, you should always place your Headers and Tabs on the same position of each screen. We also recommend using React Navigation to re-use navigation components on all of your screes.

JSX

Not available, contribute!

Contribute

.NET MAUI

Element position - .NET MAUI

In MAUI, the navigation items will be placed at the proper location when using NavigationPage and/or TabbedPage. By using these components, you achieve consistency across the app.

You can set up the TabBar placement by following the TabbedPage toolbar placement guide.

C#

// No code required

Contribute

Xamarin

Element position - Xamarin

In Xamarin, you should always place your Toolbar and TabbedPage on the same position of each screen.

C#

Not available, contribute!

Contribute

Resources

• WCAG 2.2 - Success Criterion 3.2.3 - Consistent Navigation