How to Make Your WordPress Site More Accessible With Skip Links

Does your WordPress website have skip links? This is an easy-to-add accessibility feature that can make a big difference for screen readers and keyboard-only users. Not sure how to check for skip links or add them in WordPress? Read on for our complete guide to skip links for WordPress websites.

What are skip links?

A skip link is a type of hyperlink placed at the top of a webpage that allows users to skip directly to the page’s main content, bypassing repetitive navigation menus or other elements.

Skip links are particularly useful for individuals who use screen readers or keyboard navigation to browse the web, as skip links help them quickly access essential content without having to tab through irrelevant sections repeatedly. Working skip links on your WordPress site are especially important if you have a large navigation menu – you don’t want to make keyboard-only users hit tab many times before they can engage with the content on the page.

In WordPress, skip links are typically added to your website by your theme.

Are skip links required?

Your website is required by law to have skip links if it falls under any law that requires websites to conform to Web Content Accessibility Guidelines (WCAG). This includes:

• Section 508 in the United States
• The Americans with Disabilities Act (ADA)
• The Accessibility for Ontarians with Disabilities Act (AODA)
• The Accessibility for Manitobans Act
• The European Accessibility Act
• Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations in the UK
• … and more.

WCAG and Skip Links

Web Content Accessibility Guidelines 2.0 (current version is 2.2) introduced a success criterion for measuring accessibility, 2.4.1 Bypass Blocks, which requires that websites have

A mechanism is available to bypass blocks of content that are repeated on multiple Web pages.

This is a Level A success criterion, meaning it is a baseline expectation for all websites to pass a WCAG accessibility audit.

Navigation is specifically listed as an example of “repeated content” across multiple websites in the understanding docs for Bypass Blocks, and skip links are listed as an example of sufficient techniques for passing this criterion.

Article continued below.

Stay on top of web accessibility news and best practices.

Join our email list to get notified of changes to website accessibility laws, WordPress accessibility resources, and accessibility webinar invitations in your inbox.

Email(Required)

Name

First Last

Subscribe Consent(Required)

I opt-in to receive emails from Equalize Digital and have read the privacy policy.(Required)

Equalize Digital uses Zoho Campaigns. By entering your contact details, you acknowledge that your information will be transferred to Zoho for processing. Learn more about Zoho’s privacy practices.

Email

This field is for validation purposes and should be left unchanged.

Find Out if You Have Skip Links on Your Website

Skip links are (usually) hidden links that only become visible when they receive keyboard focus. To know if your website passes the Bypass Blocks success criterion, you need to test your website for the presence of skip links and also test to make sure they are functioning.

How to Test For Skip Links

To see if your WordPress site (or any website) has skip links, follow these steps:

1. Log out of WordPress to view your website as a visitor without the wp-admin bar.
2. Go to the front end of the website, like your home page.
3. After the page loads, hit the Tab key on your keyboard.
4. The first thing you should see is a boxed link in the top left corner on the website that says, “Skip to Content” or “Skip to Main Content.”
   

✅ If your website has a “Skip to Content” or “Skip to Main Content” link that appears when you hit tab, that means you have a skip link on that page.

❌ If you do not see a link like in the screenshot above, then your website either does not have a skip to content link on that page, or it may be in the wrong position.

You can test if your skip link is in the wrong position just by continuing to hit the Tab key and seeing if one eventually pops up. If you get past the navigation menu and one doesn’t appear, you assume your WordPress theme is not correctly adding skip links.

How to Test if Your Skip Link is Broken

Just because your website has a skip-to-content link does not mean it works. Unfortunately, when we audit WordPress websites for accessibility, we frequently find broken skip links on pages.

Skip links can be broken if the element they target is absent from the page. This is a very common problem. They can also be broken if they visually scroll the page, but fail to move keyboard focus.

You can easily test for broken skip links using our Accessibility Checker WordPress plugin. Here’s how to do it:

1. Install the free or paid version of Accessibility Checker.
2. Go to any page in the WordPress admin and click the “update” button to trigger a scan. – Or – run a full site scan in Accessibility Checker Pro.
3. Check the details tab to see if a Broken Skip or Anchor Link error occurs. – Or – review your Open Issues page in Accessibility Checker Pro.

A Broken Skip or Anchor Link error will look like this in Accessibility Checker:

Accessibility Checker will flag this error on your website anytime there is an anchor link (a link that goes to #some-id) if there is no element on the page with that ID.

In this instance, the skip link is linked to an element with the ID of content on the page, but there is no element with that ID on the page, so this skip link is broken.

❌ If Accessibility Checker flags a Broken Skip or Anchor Link error for your skip link, your skip link does not work.

How to Test if Your Skip Link Moves Keyboard Focus

After testing if your skip link is present and correctly linked, you need to make sure it moves focus appropriately. Here’s how to test if the skip link correctly moves keyboard focus:

1. Open the web page you want to test.
2. Hit the Tab key to focus on the “Skip to content” link.
3. Press the return key.
4. After hitting return, you should see the website scroll or jump to the top of the content area, immediately below its header.
5. Hit the Tab key 1 more time, and confirm that the keyboard focus is no longer in the header, but is now on the first focusable element on the page, which may be a button, link, or form field.

For example, on the website pictured below, the first time you hit Tab, the skip link appears. Then you hit Return (Enter) to move below the header into the content area. The second time you hit Tab, it takes you to the Get Started button in the hero section.

✅ If your skip link visually scores you down and moves your keyboard focus, then it works!

Here is a video that shows a skip link that is broken. It visually scrolls the user down, but does not actually move the keyboard focus. When this happens, hitting Tab after triggering the skip links reveals the focus outline is still in the header.

❌ If the keyboard focus does not move down when the website scrolls, your skip link does not work.

How to Add Skip Links to Your WordPress Site

If your WordPress website does not have skip links, they can be added in two ways – either with a plugin or with code in your theme.

How to Add Skip Links with a Plugin

If you’re not a developer, you can use the free WP Accessibility plugin to add skip links to your website.

Here’s how to do it:

1. Log into your WordPress website and go to Plugins > Add New.
2. Search “WP Accessibility” in the admin and install the WP Accessibility plugin.
   
3. Click the Activate button for the plugin.
4. After activating WP Accessibility, go to the plugin settings page. This will be located near the bottom of your WordPress admin menu.
   
5. At the top of WP Accessibility settings, check the box to Enable Skiplinks. Don’t hit save yet.
   
6. In a new tab or window, open the front-end of your website.
7. Right-click anywhere on your website and click inspect in the menu that appears. This will open the browser’s dev tools panel. Alternatively, you can open dev tools with a keyboard by pressing Command+Option+I on a Mac or Control+Shift+I on Windows.
   
8. When the dev tools panel opens, you can look at the HTML of the page. You want to find the container that wraps around all of your main content. This may be a <main> tag, or it may be something else like a <div>.
   
   Once you find that tag, you can see what ID it has. In this example, the container for all the content is a div with the ID of main-content. In the code, it looks like <div id="main-content" class="...">.
   
   If you have difficulty with this step or you can’t find an ID, ask for help in the WordPress Accessibility Facebook group.
9. Go back to the tab where you have WP Accessibility setting open, and type the ID for your content container in the “Skip to Content link target” field, starting with a hashtag.
   
   For the website shown above, I would type #main-content in that field.
   
10. Optionally, add the ID for the Skip to Navigation link target.
11. Click the “Update Skiplink Settings” button to save your changes.
12. Go back to the front end of your website and test your new Skip to Content link.

Important Note About IDs

For this “skip to content” link to work, you must have the same container ID on all main contact containers across your site. If your theme does not use the same ID on all pages and post templates, you may not be able to use the WP Accessibility plugin to add skip links and must ensure a consistent ID is present on all pages first.

How to Code Skip Links

If you are a developer or want to code skip links in your theme, here is how to do so.

Step 1: Ensure your main content container has an ID

In order to create an anchor link, you need to have an ID on the container that holds your main content after the website’s header. Typically this is a <main> tag, but in some themes, it may be a <div>.

Look for this container to identify what the ID is or to add one if there is not already an ID. Here’s an example:

<main id="content"> [content here] </main>

Note: If you don’t have a <main> tag on your website and only have a div, while adding an ID, you should also add role="main" to the div to indicate its the main content area for screen readers. For example:

<div id="content" role="main"> [content here] </div>

Step 2: Add a link

After identifying the link ID, add a link as the first element on the page, either right above or immediately inside the <header> tag. In a WordPress theme, you typically add a skip link in your header.php file.

Here is how the skip link should look:

<a class="screen-reader-text skip-link" href="#content">Skip to content</a>

In this link, we’re doing the following:

• Giving it two classes: the .screen-reader-text class that hides it from sighted people and the .skip-link class in case we want to be able to style it uniquely.
• Linking it to #content, which is the ID on our main content container.
• Providing clear link text “skip to content” that describes the purpose.

In many themes, this is all you have to do as most WordPress themes have support for the .screen-reader-text class will automatically hide the link until it received keyboard focus.

If your skip link is not hidden, but is visible on the page you might try using .sr-only instead, the screen reader text class that is common in Bootstrap-based themes.

If neither class works to hide your skip link, then you will need to add some CSS to your theme.

Step 3: Add CSS style for screen reader text (if needed)

If your WordPress theme does not already have styles to hide and reveal screen reader text, you can add the following to your style.css file to add support for screen reader text.

/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Allows screen reader text to come into view when focused with the keyboard. */
.screen-reader-text:focus {
  background-color: #eee;
  clip: auto !important;
  clip-path: none;
  color: #444;
  display: block;
  font-size: 1em;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar. */
}

Putting it all together

Here is a CodePen example that shows how this works.

Fixing Missing Skip Links in Full Site Editing Themes

If you are using a WordPress Full Site Editing theme like Twenty Twenty-Four or any other full site editing or block-based theme from WordPress.org, your website should have skip links already configured.

In block themes, WordPress adds the skip link automatically if the page contains a <main> element. In many cases, this means that you don’t have to worry about skip links because your full site editing theme will already have them.

However, there are instances where skip links are missing in full site editing themes on specific pages or templates.

For example, I encountered missing skip links when creating our swag shop. The site was built with Twenty Twenty-Four and had working skip links on the main pages but did not have them on the shop and product pages created by WooCommerce. Upon investigation, I realized that the skip links were broken on these WooCommerce page templates because the developer failed to use a <main> tag for the content container.

Luckily, this is an easy fix.

If you are missing skip links in a block-based or full site editing theme, here is how to fix it:

1. Open the site editor and go to the template that is missing skip links.
2. Click on the group, column, or container block containing all the template’s content.
3. In the block settings panel, under Advanced, check to see what HTML element is being used.
   
4. If the HTML element is set to a <div>, as shown above, use the dropdown to select a <main> tag instead.
   
5. Save your template.

Note: If all of the content on the template is not contained in a single group or other block, do not add the <main> tag just to the first container. In this case, you’ll need first to put all of the content into a group block and then add the <main> tag to that new container.

How to Fix Broken Skip Links on Your Website

As described above, if you’re seeing a Broken Skip or Anchor Link error in Accessibility Checker, that appears on your site because the skip link is present on the site, but there is not an element on the page with an ID matching the link target.

To fix this, you need to add the ID from your skip link to the main content container on the page. Here are some ways that we have fixed this on various websites.

JavaScript: Fixing Skip Links on The Events Calendar Pages in Genesis

Our current website is built with a custom child theme using the Genesis Framework. The Genesis Framework has skip links built in that target an ID of #genesis-content.

<a href="#genesis-content" class="screen-reader-shortcut"> Skip to main content</a>

This works great on all the main pages, however when we installed The Event Calendar plugin to manage our webinars and events, we noticed that the skip links were broken on our event archive and event single. This is because The Event Calendar templates override the theme and replace the main content container; doing so removed the container the Genesis skip link was targeting.

To fix this, we added some simple JavaScript to a file in our theme. This JavaScript looks for elements with a specific The Events Calendar class and adds a <div> wrapper around it with the correct ID for the skip link target.

/**
* The Events Calender: add wrapper that allows skip links to work properly
*/
	if($('.tribe-common').length || $('.tribe-events-pg-template').length){
		$('.tribe-common').wrap( '<div id="genesis-content"></div>' );
	}

This is sort of hacky, but it results in a working skip link on The Events Calendar pages.

In a Page Builder’s Settings: Elementor

We recently remedied a website built with Elementor and the Hello Elementor theme. The website had broken skip link errors flagged by Accessibility Checker on every page.

The solution to these broken skip links was an easy, non-developer fix, and it could be fixed in two ways (both work).

Either, (A) go into the page editor and change the page from using the “Elementor Full Width” page template to the “Default” page template (test on a non-live page first to make sure your design does not get messed up).

Or, (B) go into the Elementor editor and add the ID of content to the top section on the page.

You can similarly add the missing ID to the place you want your skip link to land in any page builder or in the WordPress core editor.

Once you add the ID to the page and update the post, you should see the Broken Skip or Anchor Link error go away in Accessibility Checker and can re-test your skip link on the front end of your website.

After Fixing: Notify Plugin and Theme Developers

After fixing missing or broken skip links on your own WordPress site, consider opening a support request with the developer of the plugin or theme that caused the issue. You can educate them on why it’s important to have a skip link and <main> tag on every page for accessibility.

Many WordPress theme and plugin developers have good intentions and don’t realize they are causing accessibility problems.

If you tell them problems exist and provide resources on how to fix them (such as this article!), you may find that the developer is happy to release an accessibility patch.

Taking a few extra minutes to notify developers tells them that accessibility is important and allows them to roll out a fix to every website using their theme or plugin.

The few extra minutes you take to report an accessibility problem has the potential to make many, many websites around the world more accessible.

For example, I flagged missing skip links and main tags for WooCommerce, and they recently announced this will be corrected in WooCommerce 9.0, scheduled for release on June 11th, 2024, which could fix 5 million+ websites using WooCommerce. 🎉

The beauty of free and open-source software like WordPress is we all have the opportunity to make it better.

Need more help?

Still have questions about testing or fixing your website? We’d love to help! Our accessibility audit and remediation plans give you direct access to a team of specialists who understand not just accessibility but also WordPress. Let us help you make your WordPress site accessible.