Recently, the DubBot app flagged several landmark issues across a few of my blog posts. And so, naturally, I began to investigate.
As some of you may have already surmised, the culprit turned out to be the template. That was a bit confusing, considering the template had been in use for a couple of years without any apparent issues. 🤔
Sometimes, accessibility has a funny way of reminding you that it’s been working fine isn’t quite the same thing as it’s working correctly.
Regardless, the necessary updates were made, the landmark issues were resolved, and all was well again.
As I dug deeper into landmarks and how they were being handled in the template, I realized it’s a topic I haven’t seen covered very often in articles or blog posts. They’re an important part of a well-structured, accessible webpage, but they don’t always get the attention they deserve.
So, one template update later, I had a new topic for the DubBot blog collection: landmarks.
What Are Landmarks?
A landmark is a clearly defined section of a webpage with a specific purpose, such as navigation or main content. Landmarks help people, especially those using screen readers or keyboard-only navigation, quickly understand the page structure and tab directly to the section they need.
Think of landmarks as a webpage’s table of contents. Instead of reading or listening to everything from top to bottom, screen reader and keyboard navigation users can jump directly to key sections like the main content, navigation, or search bar.
Landmarks are an ARIA concept, but semantic HTML gives you elements that map directly to ARIA landmark roles and create those landmarks automatically, so you don't have to use ARIA.
And with the addition of (added to the HTML spec in 2023), all eight ARIA landmark roles now have corresponding native HTML elements.
Just another good reason to use semantic HTML whenever possible.
