What components does this change affect?
This change affects implementations of the page layout from the Design System.
Implementation note
This change requires a manual update to the application HTML/layout and is not automatically applied through the Turas Design System NuGet or NPM packages.
HTML structure changes:
- A header landmark with role="banner" has been added around the Universal Navigation and application navigation
Header landmark in the UI
The header landmark should be added directly after the opening <div class="wrapper"> and surrounds the Header (global) and Navigation (application) components .
The following screenshot highlights the area covered by the header landmark:
Before
<body class="">
<turas-skip-to-main-content></turas-skip-to-main-content>
<div class="wrapper">
<partial name="_universalNavigation" />
<partial name="_mainNavigation" />After
<body class="">
<turas-skip-to-main-content></turas-skip-to-main-content>
<div class="wrapper">
<header role="banner">
<partial name="_universalNavigation" />
<partial name="_mainNavigation" />
</header>Why this change was made
This change adds a semantic banner landmark to identify the site's header and navigation area to assistive technologies.
The header element with role="banner" provides a recognised landmark that allows users of assistive technologies to identify and navigate directly to the site's header.
Benefits include:
- improved navigation for users of assistive technologies
- clearer semantic structure for the page
- improved ability to identify and navigate to the site's header and navigation area
Recommended checks for consuming teams
After making the HTML change, we recommend reviewing the page structure in your application.
Areas worth checking:
- Universal Navigation displays correctly
- application navigation displays correctly
- existing navigation behaviour is unchanged
- keyboard navigation continues to work as expected
- no application-specific CSS or JavaScript relies on the previous markup structure
- the banner landmark is present when inspecting the page structure
Summary
This change adds a header element with role="banner" around the Universal Navigation and application navigation, providing a clear semantic landmark for assistive technologies.
The change requires a manual update to consuming applications and is not automatically applied through the Design System packages.
Internal reference
Design System internal reference: 102007