2.4.1 – Bypass Blocks (Level A)

Provide a ‘Skip to Content’ link

Screen readers announce all of the links on the page to the user, in order. To help your users navigate your website, provide a way for them to bypass parts of each page, such as long navigation links, links in your header and other repetitive content.

You can help your users bypass these blocks by adding a ‘Skip to Content’ link to your website’s header. This link moves the user from the top of the page (above your header) down to the start of the page’s content. This means users with screen readers can skip the repetitive content and get a better experience of your website.

The same goes for users who browse your website with a lot of zoom in order to understand it. They need extra help navigating to what’s important. Allowing them to skip your menu helps.

What to do

Add a ‘Skip to Content’ link to all pages on your website. It’s best if you make the link visible.

The easiest way to add a ‘Skip to Content’ link to your website is to use of a great piece of code from the guys on the PayPal Accessibility Team. They produced something called ‘SkipTo’, which adds a link for you. Best of all if you’re using WordPress or Drupal, there are plugins you can use.

See also

Free Developer Resources

Join over 2,000 accessibility fans and get free developer resources like WCAG 2.0 Checklists and a sample from my book.

Powered by ConvertKit

Over 250 people just like you have learned more about WCAG 2.0 with my guidebook.

Learn more >

  • 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.