What Do We Mean by "Navigation"?
We 're using "navigation" in the context of how accessible your website or app is for all users. Specifically, how accessible it is for people who use assistive technologies such as screen readers and input devices other than a mouse, and how easily these people can navigate through your pages.
In other words, "navigation" is all about making sure that all users can consume a page 's content no matter their web browser or any disability they may have.
Making your pages easily and efficiently navigated is imperative to making your website accessible for all users, as barriers to navigation prevent people from fully accessing your content.
It 's important to note here that we are not talking about how your pages are grouped or what links you have in your website 's header, hamburger or other menus. That 's site structure, which we touch on in more detail in our guide to site structure for international SEO.
The Role Site Navigation Plays in SEO
Globally, 15% of people experience some form of disability, with one-fifth of those people (upwards of 190 million people) experience "significant disability". The WHO estimates that 2.2 billion people experience some form of vision impairment.
As we covered when we traced the evolution to using Core Web Vitals in search rankings, Google realizes that its users want it to find and recommend the most relevant and correct information, they expect that information to be available on the best pages.
Because Google 's search rankings amount to recommendations by Google, they care a lot about the usability and accessibility of pages. The line between UX, accessibility and SEO has blurred - almost disappeared.
What Impacts Navigation
When you check your website 's navigation for potential accessibility issues, there are skip main criteria to look at:
- "accesskey" values
- Skip links and landmark sections
- "id" attributes
- HTML headers
- "tabindex" values
"accesskey" Values
Access keys are HTML attributes that you can add to elements on a page. They allow users to quickly and easily "select" (known as focusing or activating) that element on the page by using a keyboard shortcut.
On Windows PCs, this shortcut is typically used by pressing the alt key and accesskey value at the same time. Mac users normally press the alt, ctrl and accesskey value at the same time.
Take this hyperlink code for example: <a href="woorank.com" accesskey="w">WooRank</a>. For this link, the accesskey value is "w". A user can focus on this hyperlink by pressing the alt+w keys (or alt+ctrl+w keys if they 're on a Mac) and then follow the link to the WooRank homepage by hitting the "enter" key or clicking it with their mouse.
The accesskey value also allows users to activate text input fields by using keyboard shortcuts.
Using accesskey="n" on the name field of a form allows users to quickly activate that field and start typing their name without the need for a mouse.
Accesskey values make the web accessible for people who are unable to use a mouse. Without accesskey values, these people wouldn't be able to navigate or engage with content online.
You can run into trouble with accesskey values when two or more elements on a page share the same value.
Duplicate accesskey values cause unexpected or unintended results when people try to access them using the keyboard. For example, if you have a link on your page like this: <a href="woorank.com" accesskey="w">WooRank</a> and another link later like this: <a href="https://www.wikipedia.org/" accesskey="w">Wikipedia</a>, the browser won 't understand which link a user wants to focus on when they press alt+w. This could lead to the browser focussing on the wrong element.
Avoid this issue by ensuring that all of the accesskey values on a page are unique.
Heading, Skip Link and Landmark Region
Skip links and landmark regions are HTML elements that you can add to a page to allow people to quickly navigate to the most important sections of that page.
- Skip links: Skip links are anchor tags that provide an in-page link to the page 's main content. This link is the first element appearing on the page and is typically hidden visually to users. Putting this link at the very beginning of the page 's code (after the <head>) makes it the first element selected by assistive technologies and people pressing the tab key on the keyboard.
- Landmark regions: Landmark regions are HTML elements that define sections of a page 's content relative to each section 's importance on the page. Common landmarks are main for the page 's main content, navigation for the navigation menu, and sidebar for supporting or complementary content. Landmark regions give people the ability to navigate directly to those sections to access the content they 're looking for.
- HTML headers: HTML headers are tags that separate headings and sub-headings from the rest of the page 's content. They give the page content an outline and structure, making it easier to consume and understand. Learn the full details in our guide to HTML headers in SEO.
Skip links, landmark regions and HTML headers can make a big impact on how easily people can navigate the content on a page. Most websites have content (typically navigation menus and headers) that 's repeated across many if not all their pages. While these nav menus can be very helpful to people navigating the web using a mouse, they can make using a page difficult and annoying for people using screen readers or other assistive technologies and input devices.
Skip links, landmark regions and HTML headers give these users the ability to bypass the repetitive content that doesn 't help them and get right to the useful parts of the page.
Just think of it this way: how much more delightful is it to use a recipe website that includes "Skip to recipe" links than one that makes you scroll until you find the list of ingredients?
"id" Attributes
id is an HTML attribute added to an element to assign a label (aka "identification") to that element. CSS and JavaScript use id attributes to perform certain tasks based on the content found in the attribute.
For example, here 's the HTML code for a button:
<button id="button1">Submit</button>
The id="button1" labels this button as button1. Other buttons, such as cancel or back, would possibly be labeled as button2 or button3, respectively.
These id attributes tell browsers to apply specific CSS and/or JavaScripts to these buttons based on the attribute content.
The id attribute is also used by assistive technologies when describing the page content to people using them. When multiple elements have the same id values these tools can 't accurately describe the page or execute user commands.
Using our simple buttons above, if both the "Submit" and "Cancel" buttons use id="button1", telling a screen reader to click "button1" will potentially cause unexpected and unwanted results because the browser doesn 't know which button you mean. In other words, trying to click the "Cancel" button very well could end up with someone submitting instead.
It 's not hard to imagine how this could cause serious issues for users.
Duplicate id values on a page will also cause user experience issues for people who aren 't using any assistive technologies. Because CSS and JavaScript can rely on ids to work correctly, non-unique values can make it so the page doesn 't look or work as intended.
Like with accesskey values, avoid any accessibility issues by ensuring that all id attributes are unique and that there are no duplicates.
Heading order
As we quickly noted above, headers are HTML elements that specify the headings and sub-heads for the page content. They provide structure to the content so it 's easier to read and understand.
HTML headers should maintain a logical descending numerical order of 1-6, with 1 being the most important and 6 being the least important. When HTML headers aren 't in order, it breaks the outline of the content.
This broken order will make it harder for people using screen readers to get an accurate picture of the structure of the content. They could also have issues with navigating from section to section because the headers don 't accurately reflect which sub-heads should be associate with which headers.
Again, for full details on HTML headers check out our guide to HTML headers.
"tabindex" values
The tabindex value is an HTML attribute you can add to an element to specify where that element falls in the sequential order of focusable elements when someone is navigating the page using a keyboard input (usually the tab key). So an element with tabindex="1" will be focused on before an element withtabindex="2".
However, specifying a tabindex value greater than 0 can cause navigability and accessibility issues for users.
Specifying a value greater than 0 tells assistive technology to focus on that element before it focuses on anything with a tabindex="0" or any element lacking the tabindex attribute. So in order to focus on those elements, the user has to navigate through everything with a higher tabindex value before they 're able to access the other elements.
However, and this important to note, once an element has been focused on, it 's removed from the tabindex navigation. So if a user goes all the way through the elements with a tabindex greater than 0 and then needs to go back to access something with tabindex="10", they 'll have to go through tabindex="1" through tabindex="9" before doing so.
This behavior becomes much more than an annoyance when the visual order of a page doesn't match the tab order of the page. This situation will cause users to bounce around the page in unexpected and unhelpful ways, leading to confusion and errors when trying to input information.
And because pages are almost never published and left alone forever, specifying a tab order will require you to constantly babysit the page 's code to maintain the correct tab order. This task is just not worth the time, effort and resources required.
Finally, specifying a tab order prevents users from navigating and interacting with a page in the way they want. The specified tab order may or may not be best for what they are trying to accomplish on the page.
To avoid these problems, it 's best not to specify a tabindex value greater than 0. Or any tabindex value at all.
The SEO and Accessibility Overlap
It 's important to understand that even though SEO and accessibility are actually very different areas of focus with very different goals, there is a large amount of overlap when it comes to optimization.
Focusing time and effort to make sure all users can easily navigate your pages to access and engage with content should be considered a foundational pillar when optimizing your site for Google.
After all, the line between what we traditionally think of as "user experience" and "search engine optimization" is being progressively reduced by Google as it seeks to provide its searchers with the best possible experience online.
Auditing your content 's navigation will ensure anyone can access your content online.