Is your website is missing skip links? This article explains how to easily add skip to content and skip to navigation links to your WordPress site for improved accessibility.
How to Add Skip Links in WordPress
If your website is missing skip links, this can be easily fixed without writing code using the WordPress Accessibility Checker plugin.
Step 1
Click into the Accessibility Checker plugin settings in your WordPress dashboard (you must be logged in with an administrator account to access these settings).
Step 2
Go to the “Fixes” tab in the Settings Tabs navigation.
Step 3
Check the box for Enable Skip Link, then configure the appropriate targets for the main content and (if desired) the navigation.
After checking the box labeled “Add a skip link to all site pages, allowing users to skip directly to the main content”, two additional settings will appear. A field for defining the main content targets and a field for navigation target.
Step 4
Fill in the fields for the main content and (if desired) the navigation target.
Main content target
This field is required for your skip-to-content link to work. You can enter multiple IDs separated by commas; the system will cascade through the list to find the appropriate one for each page. This is helpful if you have different IDs for the main content on different post types.
Navigation target
If you fill this field in, Accessibility Checker will also add a skip to navigation link after the skip to content link on your site. This is useful if your main navigation contains actions that most site visitors would want to take, such as login or search features, or if your header has many elements before the main navigation.
Only enter one ID in this field.
How to find the ID for your targets
Here is how you can find the ID for your main content and navigation targets.
- 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.
- 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 or via plugin support.
Not seeing the fix?
The Enable Skip Link accessibility fix should start working immediately; however, if you don’t see the fix, it could be because you’re seeing a cached version of your website. Try clearing the cache in any caching plugins and on your hosting account, then look at your site in an incognito window to confirm the fix worked.
Note: Turning on a fix will not instantly remove related issues from Accessibility Checker reports. After turning on a fix, you can clear issues from reports by running a full site scan in Accessibility Checker Pro or by saving any individual post/page to trigger a rescan of that post/page only.
What the Fix Does
When enabled, the Enable Skip Link fix checks if a page already has skip links. If Accessibility Checker cannot detect an existing skip link pointing to a valid anchor, it generates one based on the IDs you have provided in the settings field.
The fix applies client-side to detect broken anchors or missing skip links appropriately before adding one based on the fix configuration.
Impact on Accessibility
Skip links allow users who rely on keyboard navigation or a screen reader to browse your site quicker and more effectively. They allow users to bypass repetitive sections and get right to the page’s primary content, reducing the need to tab through irrelevant sections on every page.
