Does your WordPress theme not underline links by default? This article explains how to quickly improve link accessibility by adding underlines to links in WordPress – without writing any code.
How to Underline Links in WordPress
If your website is missing underlines on links and relying on color alone to denote something is a link, this can be easily fixed 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 Force Link Underline, then scroll to the bottom of the page and click the “Save Changes” button.
Note: Automated accessibility fixes use JavaScript or other methods to modify how your website functions. Occasionally, a WordPress theme or extension may conflict with or prevent our fixes from working as expected. We recommend testing these fixes on a local or staging copy of your website first.
Not seeing the fix?
The Force Link Underline 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 This Fix Does
When enabled, the Force Link Underline fix improves accessibility by ensuring that all links outside your site’s navigation menu are easily distinguishable from plain text by underlining them.
Specifically, it targets all links that are not inside a <nav> tag or an element with the role="navigation" attribute, automatically applying an underline to them with CSS. The underline will be removed on hover.
Additionally, this fix adds a 2px outline to links on keyboard focus.
Impact on Accessibility
Underlining links is a simple yet powerful way to improve your website’s accessibility. Without underlines, users with vision impairments, color blindness, or cognitive disabilities may have difficulty recognizing clickable links, especially if your website relies on color alone to differentiate links from regular text.
By ensuring that all non-navigation links are underlined, this feature makes your site more accessible for all users, particularly those who rely on visual cues. The added focus outline also enhances usability for individuals using keyboards or assistive technology to navigate your site, ensuring that links are easy to spot and interact with.
