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.
- Guideline 1.3.2 – Meaningful Sequence
- Guideline 2.4.2 – Page Titled
- Guideline 3.2.3 – Consistent Navigation
- Understanding Success Criterion 2.4.1 (W3C)
Free Developer Resources
Join over 3,500 subscribers on my weekly web accessibility email and get free developer resources like WCAG 2.1 Checklists and special offers.
Over 600 developers like you have learned more about the Web Content Accessibility Guidelines with my guidebook.