‘Bypass Blocks’ requires you to provide a way for users to skip repeated blocks of content.
Websites often have the same, or very similar, content at the top of each page (for example the navigation menu, header and certain graphics). Some users with visual, motor or cognitive impairments who navigate sequentially through elements can struggle to get past this repetitive content.
- screen readers often announce all of the elements on the page to the user in order;
- users who navigate by keyboard might have to key past each link in a menu; and
- users who browse with a lot of zoom can get lost on a page.
To help these users navigate your website, provide a way for them to bypass the repetitive parts of each page.
How to Pass ‘Bypass Blocks’
- Add a visible ‘Skip to Content’ link to all pages on your website that sends users to the start of the main content on each page; or
- Add a link at the start of any repeated content to skip it; or
- Add links at the start of a page to each area of content.
‘Bypass Blocks’ Tips
While a ‘Skip to Content’ link will pass this guideline, there is a little more you can do. A standard in HTML5 allows you to label your navigation menu as a <nav> element. Some screen readers can use the <nav> element and provide a way for users to skip menus.
As I understand it, most screen readers don’t support nav tag for now, but they do support ARIA’s role=”navigation”. I think best thing would be to use both for now.
That’s my experience too Igor. I’m not a big fan of ARIA, I much prefer
what the semantics of HTML5 brings. That said it’s about building for
what technology currently does so if you know how to do it
role=”navigation” would help pass this guideline.
That’s my experience too Igor. I’m not a big fan of ARIA, I much prefer what the semantics of HTML5 brings. That said it’s about building for what technology currently does so if you know how to do it role=”navigation” would help pass this guideline.