Explore behaviors before defining the interface.
Quick guide for designers
When to use
Use to define page structure and distinguish main content from navigation and complementary information.
What to design
Show regions, their order, names when needed, internal controls, and the skip-to-content link.
How it behaves
Regions guide reading and structural navigation. Interaction happens through controls; a region does not receive focus merely because it exists.
What to document in Figma
Define each region’s purpose and boundaries, names for repeated navigation, the skip-link target, and order on small screens.
How to review
In the design, check order, grouping, and content access. In the implementation, verify recognized regions, reading, the skip link, and controls with keyboards and screen readers.
Page header
- Does the header help identify the site and access global options? Do identity, search, and navigation have distinguishable purposes?
- Is an article or card header distinguished from the global page header? Do not assign global landmark purpose to every block that looks like a header.
Main content
- Can people recognize where the main information or task starts? Do the page heading and instructions form an understandable sequence?
- Does Skip to content lead to a useful task starting point without traversing the repeated header? Does its target remain visible with fixed headers?
Navigation and repeated regions
- Do primary navigation, local navigation, and the page index have clear purposes? When several different navigation regions exist, do their names distinguish them?
- Do two navigation regions with identical links and purpose retain a consistent name? Avoid different names solely because one is at the top and another at the bottom.
Complementary content and other regions
- Does complementary content support the main content and remain understandable on its own? A merely visual sidebar does not define that purpose.
- Is the grouping important enough to be located as a landmark? Avoid turning every card or visual block into another region.
Footer and layout adaptation
- Does the footer group recognizable institutional information and supplementary access? If it includes navigation, is its name consistent with its purpose?
- When changing to one column, does visual order remain consistent with reading and focus? Do fixed regions avoid obscuring content and controls under magnification?
Interaction Methods
Mouse and touch
Reading and traversing the page reveals its groupings. Clicking or tapping links and buttons executes those controls’ actions; the background of a structural region performs no action.
Keyboard
Tab and Shift + Tab traverse links, buttons, and fields in page order; they do not traverse every static region as a focus stop.
On reaching Skip to content, Enter moves focus to the main target. The next Tab continues through controls from that point without returning to the repeated header.
Navigating internal controls retains each component’s own commands. There is no universal browser keyboard shortcut for jumping between all regions.
Screen reader on desktop
Using the screen reader’s landmark list or structural navigation commands locates main content, navigation, and other available regions by type and name. Commands depend on the reader and its navigation mode.
Choosing a landmark in that list moves reading to the corresponding group. Reading or control navigation commands then traverse its content; focusing the container with Tab.
Screen reader on mobile
In VoiceOver, choosing landmarks in the rotor, when available, enables navigation between them. In TalkBack, reading controls and structural commands depend on version and settings; use landmark navigation when available.
In standard control exploration mode, swiping traverses content and double tapping activates the focused link or button. Activating Skip to content leads to the main target; traversing a landmark does not turn it into a button.
Gherkin
BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).
Scenario: Given that I am on a page organized into landmarks
Keyboard navigation
- WHEN I use
Tabfrom the start of the page - I SEE the skip-to-content link with visible focus
- THEN, when I press
Enter, I SEE focus reach the main target and the nextTabcontinues navigation from that point
Screen reader on desktop
- WHEN I open the landmark list or use screen reader structural commands
- I HEAR or perceive main content, navigation, and other landmarks by type and name when needed
- THEN, when I choose a landmark, I HEAR or perceive its content and can continue reading without an artificial focus stop on every container
Screen reader on mobile devices
- WHEN I explore the page with a mobile screen reader and use available structural features
- I HEAR or perceive landmarks in an understandable order and identify main content
- THEN, when I use
double tappingto activate Skip to content in standard mode, I HEAR or perceive the target and continue the task without repeating all navigation
Repeated regions
- GIVEN two navigation regions with different purposes
- WHEN I consult the screen reader landmark list
- THEN I identify names distinguishing the purposes; navigation with identical content and purpose retains consistent names
Points to consider
Prefer HTML elements corresponding to purpose: header, main, nav, aside and footer. A generic grouping needs to be an additional landmark only when it helps locate relevant content.
Global headers and footers have a different context from header and footer inside an article or section. Not every internal header or footer is a global page landmark.
Keep one active main content area per document. Embedded documents can have their own structure. Do not create several main landmarks merely to separate visual columns.
Different navigation regions need distinguishing names. Navigation with identical links and purpose may share a name. Avoid repeating the role in the label, such as Main navigation navigation.
A section with an accessible name may be exposed as a landmark. Use aria-labelledby to reference a visible heading when appropriate; do not name every block merely to increase landmark count.
A skip link needs an existing target and browser-verified focus management. When needed, tabindex="-1" permits programmatic focus on the target without adding it to the Tab.
Landmarks and headings offer complementary navigation. Reading order must not contradict visual order, and collapsed content must not leave hidden controls in the focus sequence.
References
Additional references for components of type Page regions.
Important:
Most references are on the course platform alongside the lessons cited in this material.
Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.
W3C WAI — Page Regions (external link, opens in a new tab)
W3C APG — Landmark Regions (external link, opens in a new tab)
W3C — Technique G1: Skip to main content (external link, opens in a new tab)