Understanding HTML Landmarks for Improved Web Accessibility

HTML landmarks are a crucial aspect of web accessibility, allowing screen readers to navigate a website's structure and provide users with a better browsing experience.

HTML landmarks are essentially semantic elements that define the purpose of a section on a webpage. They help screen readers and other assistive technologies understand the content and organization of a website.

Using HTML landmarks can significantly improve a website's accessibility, making it easier for users with disabilities to find and interact with the content they need.

For example, the `main` landmark is used to define the main content of a webpage, while the `nav` landmark is used for navigation menus.

Assigning landmark roles to each area of your page is crucial, so do it based on the type of content in the area.

For instance, banner, main, complementary, and contentinfo landmarks should be top-level landmarks. This means they should be at the highest level of your page structure.

You can nest landmark roles to identify parent/child relationships of the information being presented. This is especially useful when you have a lot of content on your page.

Note that wrapping the content of a modal dialog in a landmark region is unnecessary, as it's not perceivable unless the modal is open.

Here are some guidelines for assigning landmark roles:

If a specific landmark role is used more than once on a page, provide each instance with a unique label. This will help screen readers distinguish between them.

For example, if you have two sets of identical pagination controls on a large search results table, you can use the same label for both, but it's not necessary to add extra information to distinguish between them.

If a landmark is only used once on the page, it may not require a label. However, if it does require a label and doesn't have a heading element, you can use the aria-label attribute to provide one.

Remember, do not use the landmark role as part of the label. This will help screen readers announce the landmark correctly.

HTML landmarks are an essential part of making your website more accessible. You can define a banner landmark by using the role="banner" attribute.

If you're not using the HTML header element technique, this is a good alternative. I've seen this work well in practice.

A complementary landmark can be defined using the role="complementary" attribute, especially when the HTML aside element technique is not being used. This is a great way to provide additional context to users.

The role="complementary" attribute is a key part of defining a complementary landmark. It helps users navigate your website more easily.

Using a role attribute to define a landmark is a simple and effective way to improve accessibility. It's a technique that has been around for a while and is widely supported.

To define a banner landmark, you can use the HTML header element, but only if its context is the body element. This technique is straightforward and easy to implement.

The HTML header element is not suitable for defining a banner landmark if it's a descendant of certain elements, such as nav, main, or section. This is an important consideration to keep in mind when structuring your HTML.

If the HTML header element technique isn't being used, you can define a banner landmark by adding a role="banner" attribute to the element. This is a useful alternative when the HTML technique isn't feasible.

To define a complementary landmark, you can use the HTML aside element. This is a simple and effective way to provide additional context to your users.

Alternatively, if you're not using the HTML aside element, you can define a complementary landmark by adding a role="complementary" attribute to the element. This is a useful fallback when the HTML technique isn't being used.

Here are the key techniques for defining HTML landmarks:

To build a website that's easy to navigate, observe other websites and take note of their landmark structures. Look at news sites, social media platforms like Twitter, and web apps like GitHub to see how they're organized.

Landmarks can be viewed, highlighted, and navigated using browser extensions like Landmarks and Accessibility Insights. The latter also has automated checks for WCAG's AA.

Consistency is key, and you'll find that some websites are better than others at using landmarks. This will give you a bar to meet when building your own website.

Using multiple landmarks on a page is not uncommon, especially when you have different types of navigation.

A rule of thumb is to only use one main landmark per page, but if you have multiple landmarks, you need to label each one.

Each landmark should have a unique label, like aria-label, to help screen reader users navigate the page.

The White House website has three nav elements in its footer, each with its own aria-label, such as aria-label="social navigation".

Using the word "navigation" in the label might seem redundant, but it's not wrong.