What is Structure Tab?
This section displays a webpage’s landmarks and headings helping you understand how the page is structured. Landmarks such as (banner, main, navigation and contentinfo) define the major regions of the page, while headings (H1-H6) represent the content hierarchy, making it easier to navigate the page’s accessibility.
How the Structure Tab Works
A well-structured page improves navigation for users and ensures that semantic elements are correctly implemented. The structure interprets the page’s accessibility structure using native HTML elements and hybrid roles.
For Headings
| Source | Displayed As |
|---|---|
Native <h1> - <h6> | h1 – h6 |
role="heading" + aria-level="1-6" | h1 – h6 |
This displayed heading level always corresponds to the value of aria-level attribute.
For Landmarks
| HTML Element/ARIA Role | Displayed As |
|---|---|
<header> tag,or role="banner" | banner |
<nav> tag,or role="navigation" | navigation |
<aside> tag,or role="complementary" | complementary |
<footer> tag,or role="main" | main |
role="region" | region |
<seach> tag or role="search" | search |
This ensures that native HTML element and ARIA implementations are represented consistently.
Benefits of Structure Tab
The structure view helps you:
- Visualize the structure of a webpage.
- Verifying that landmarks are correctly defined.
- Verify the headings follow a logical hierarchy.
- Identify accessibility issues related to page structure.
- Validate the use of semantic HTML and ARIA roles.