A11Y skip-to-content jumps over main navigation —how to navigate, then?
Something I find confusing: if skip-to-main content is the first thing on a page, and it jumps over any navigation bar to go directly to the main content, how is someone using assistive technology ever made aware that the navigation links exist?
6 Replies
a skip to content link only becomes visible on tab. if that link is focussed, you can press enter to follow it to the the main content, or tab again to get to the nav
Right. I meant in the scenario where a blind users use the skip to content link, will there be anything later indicating to them that navigation links were available between the two elements?
Or should I add an extra out of canvas focusable element in the main content, e.g. "go back to main navigation"?
I guess I could label it "Skip navigation links" instead of "Skip to main content". Then it informs them where to find those.
i don't see a way in how it will. so yea, you could do that
If you use the proper elements, the screenreader might be able to focus the nav by voice command, but other than that: convention will tell them that "skip to main" will skip past some kind of navigation
It’s my understanding that the navigation is implied in that’s what you’d be skipping.
Think of a site like amazon with a mega menu, and having to tab through everything in that menu just to get down to the products to be able to buy your cat litter. Especially for sites you visit over and over that the user is already familiar with the nav bar and knows they don’t need to go through that or they’ve just arrived from a different page where they literally just went through the entire navigation and got familiar with the available pages, selected a page to visit and don’t want to go through the exact same navigation again; they want to explore the page.
The Skip link is a convention so most assistive technology users know the default behaviour is to bypass the navigation bar and they can choose whether they want to tab through or go straight to content just like non-AT users can
Thanks for the answers. In the end, I decided not to use conventional above-content navigation as it's not touch-friendly, so I don't have the issue anymore.
My navigation links now appear where it makes sense, e.g. the category link in the header of my articles now points to the list of categories instead of the single category the article is for, or as opportunistic links after the content. Even my theme toggler is now in the article header, next to the reading time.
Nothing above the content, and no interactive element in the top half of the screen.
Let the hamburger menu die.