Equalize Digital

Website Accessibility Consulting, Training, and Development

Home / Accessibility Checker / Empty Link

Empty Link

Notice Type: Error
Relevant WCAG Conformance Levels:

Did an “Empty Link” error appear in an Accessibility Checker audit of one of your WordPress posts or pages? Read on below for an explanation of this error, how it impacts your website’s accessibility, and how to fix it.

Table of Contents

Hyperlinks are used on the internet to navigate from one URL to another or to move to a different section on the same page.

In HTML an <a> tag is used to denote that an element is a link. At a minimum, a link should look like this in code:

<a href="https://website.com">this is the link anchor</a>

The href attribute, href="https://website.com" in this example, is what tells the link where to go when clicked and the text “this is the link anchor” is what would be visible on the page to a sighted person or read aloud by a screen reader as an explanation of the link.

In WordPress websites, links are present throughout the site in a variety of ways beyond hyperlinks that you might add inline while drafting content in your content editor. Essentially, anything that takes the user to another page or another section of the same page when clicked is a link, including items in your navigation menu, social media icons that open a sharing dialogue or open your social media profile, and even the “buttons” you may add throughout your content.

Links can be styled in a variety of different ways and it’s important to note that the way they are styled – that is to say their look and appearance – is separate from their functionality which is what defines them as links. Though links can be styled to look like buttons in appearance with a boxed background, from a technical perspective, these are still links.

Colorado State University CO-WY Alliance For Minority Participation Students web page shows three links in the center of the page that are styled to look like buttons
In this screenshot of the CO-WY Alliance For Minority Participation website, there are three links centered in the middle of the page that are styled to look like buttons.

What appears to be buttons in the image above are actually links with code that looks like this:

<a class="wp-block-button__link" href="https://cowyamp.colostate.edu/programs/">CO-WY AMP<br>Programs</a>

The class="wp-block-button__link" attribute adds a CSS selector that can be used to style all links with the same selector (here: .wp-block-button__link) to look a specific way – in this case these links have been made to look like buttons.

You may be surprised to know that in most cases, the “buttons” you’re adding to your WordPress website are actually links.

Links and buttons (that is to say, real buttons using a <button> or <input> tag) have different purposes and behave differently when interacted with by a screen reader. All links and buttons can be tabbed to with a screen reader, but pressing the Space or Enter key will trigger a button, whereas only the Enter key can be used to trigger a link. Additionally, users do not expect buttons to redirect them to a new page or location like a link would.

It’s important to understand the difference between links and buttons both so you can ensure your website is making proper use of the two different HTML elements and also to make it easier to find and fix flagged Empty Link and Empty Button errors.

An Empty Link error means that one of the links present on the web page is empty or contains no text describing where the link will go if clicked or triggered.

There are three types of empty links that we see most commonly in WordPress sites:

  1. Links that contain Webfonts or icon fonts where the image is added via CSS. These are most commonly used to create social media links that visually appear to be a social media icon and link to an organization’s or person’s social media accounts. Webfonts are also frequently used to display shopping cart, map, phone, email and search icons that are linked either on- or off-site.
  2. Links that contain SVGs. SVGs or scalable vector graphics are a type of graphic that can be used to replace PNGs or JPGs and has gained popularity because it can be resized without losing quality and can significantly improve page speed and performance.
  3. Accidentally created empty links in body content. It can be easy when editing text in the WordPress editor to select and delete the the link anchor but not fully remove the entire tag, thus leaving behind an empty link.

While auditing your page or post content, Accessibility Checker will identify all links that are present on the page by looking for <a> tags, then check to see if there is anchor text. If the link contains an SVG or Webfont icon such as Font Awesome, Accessibility Checker will test to see if an aria-label or screen reader text is present. If there is no anchor text and no aria-label or screen reader text, an error will be flagged.

Impact on Accessibility

Link text is important because it informs the user what will happen if they click on a link with their mouse or select a link with their screen reader. If the text describing the functionality is missing, screen reader users will not know where the link will take them and they are less likely to click or trigger it.

Relevant WCAG 2.1 Success Criteria

1.1.1 Non-text Content – Level A

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, with a few exceptions.

2.4.4 Link Purpose (In Context) – Level A

The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

What to do (in short)

To fix an empty link error, you will need to find the link that is being flagged and add descriptive text to it. You will need to either: add text content within an empty <a> element or, if your link contains an SVG or Webfont icon, hide that element with aria-hidden="true" and add an aria-label attribute to the <a> tag or screen reader text. The text or label you add should be descriptive of wherever the link points and not ambiguous.

How to find empty links on your WordPress post or page

First, install the free Accessibility Checker WordPress plugin.

For any pages or posts that have an Empty Link error in the WordPress editor, you can open the details tab in the Accessibility Checker meta box, then expand the Empty Link error to see a list of code that caused the error to be flagged.

In the example error above, you can see the code which has caused 3 empty link errors to appear in Accessibility Checker. The code for these errors looks like this:

<!-- Font Awesome Empty Link Example -->
<a href="https://facebook.com">
   <i class="fa fa-facebook"></i>
</a>

<!-- Accidental Empty Link Example -->
<a href="https://instagram.com">
</a>

<!-- Inline SVG Empty Link Example -->
<a href="https://wordpress.org"> 
   <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>
</a>

Finding the empty links in your post or page content may be challenging particularly if your page is very long or if the icon or SVG within the link is not rendering in the WordPress admin.

It may be easier to find the code that needs to be fixed by switching to the code editor from the visual editor, which can be done by clicking the three dots in the upper right corner of your post or page edit screen, then choosing “Code editor” from the settings menu that opens.

WordPress settings menu showing where to find the setting to turn on the code editor

WordPress.com has instructions on switching editor views that also apply to self-hosted WordPress sites using the Gutenberg block editor.

If you see a link that looks like a standard link just missing anchor text in your main content and looks like <a href="https://instagram.com"> </a>, you can fix this by either adding in descriptive anchor text or removing the link if it’s not needed.

How to make Font Awesome, Webfonts, and SVGs accessible

There are several ways that you can make SVGs, Font Awesome icons, and similar Webfonts accessible.

Add screen reader text

The first way to make a link containing a Webfont or SVG accessible to people using assistive technology such as a screen reader is to hide the icon or SVG for with aria-hidden and add text that can be read by screen readers but is not visible to sighted users. Here is an example of how this can be done in code:

<!-- Inaccessible Empty Link Example -->
<a href="https://facebook.com">
   <i class="fa fa-facebook"></i>
</a>

<!-- Accessible Fixed Link with Screen Reader Text-->
<a href="https://facebook.com">
   <i class="fa fa-facebook" aria-hidden="true"></i>
   <span class="sr-only">Facebook</span>
</a>

In the example above aria-hidden="true" has been added to <i class="fa fa-facebook">; this tells screen readers not to read or announce its presence. Then the word “Facebook” has been added inside the <a> tag, wrapped in a <span> tag with class="sr-only". This .sr-only class can then be used to hide the word “Facebook” from sighted users with CSS code while still keeping it available to screen readers.

Many WordPress themes, those that are based on Bootstrap and others, already include styles to hide items with a .sr-only class, but if this text is not hidden automatically by your theme, you can add the following CSS to your stylesheet or the Customizer’s Additional CSS section. 

.sr-only{
   position:absolute;
   left:-10000px;
   top:auto;
   width:1px;
   height:1px;
   overflow:hidden;
}

Learn more about adding CSS to your site on WP Beginner.

Use aria-label

Another way to make a link containing a Webfont or SVG accessible to people using assistive technology is to hide the icon or SVG for with aria-hidden and to add an aria-label to the <a> tag describing it. Here is an example of how we would fix that same Facebook link, shown above, in this manner:

<!-- Accessible Fixed Link with aria-label Text-->
<a href="https://facebook.com" aria-label="Go to Facebook Page">
   <i class="fa fa-facebook" aria-hidden="true"></i>
</a>

Add a <title> tag to SVGs

If your empty link contains an inline SVG, then you can make it accessible by adding a <title> tag and possibly a <desc> tag and using aria-labelledby to connect them to the SVG. 

<!-- Inaccessible Inline SVG Empty Link Example -->
<a href="https://wordpress.org"> 
   <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>
</a>

<!-- Accessible Fixed Inline SVG Link Example -->
<a href="https://wordpress.org"> 
<title id="wpLogoTitle">WordPress logo linked to WordPress.org</title>
<desc id="wpLogoDesc">A serif font white W in a circle on a blue background</desc>
   <svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="wpLogoTitle wpLogoDesc"><path d="M12.158,12.786L9.46,20.625c0.806,0.237,1.657,0.366,2.54,0.366c1.047,0,2.051-0.181,2.986-0.51 c-0.024-0.038-0.046-0.079-0.065-0.124L12.158,12.786z M3.009,12c0,3.559,2.068,6.634,5.067,8.092L3.788,8.341 C3.289,9.459,3.009,10.696,3.009,12z M18.069,11.546c0-1.112-0.399-1.881-0.741-2.48c-0.456-0.741-0.883-1.368-0.883-2.109 c0-0.826,0.627-1.596,1.51-1.596c0.04,0,0.078,0.005,0.116,0.007C16.472,3.904,14.34,3.009,12,3.009 c-3.141,0-5.904,1.612-7.512,4.052c0.211,0.007,0.41,0.011,0.579,0.011c0.94,0,2.396-0.114,2.396-0.114 C7.947,6.93,8.004,7.642,7.52,7.699c0,0-0.487,0.057-1.029,0.085l3.274,9.739l1.968-5.901l-1.401-3.838 C9.848,7.756,9.389,7.699,9.389,7.699C8.904,7.67,8.961,6.93,9.446,6.958c0,0,1.484,0.114,2.368,0.114 c0.94,0,2.397-0.114,2.397-0.114c0.485-0.028,0.542,0.684,0.057,0.741c0,0-0.488,0.057-1.029,0.085l3.249,9.665l0.897-2.996 C17.841,13.284,18.069,12.316,18.069,11.546z M19.889,7.686c0.039,0.286,0.06,0.593,0.06,0.924c0,0.912-0.171,1.938-0.684,3.22 l-2.746,7.94c2.673-1.558,4.47-4.454,4.47-7.771C20.991,10.436,20.591,8.967,19.889,7.686z M12,22C6.486,22,2,17.514,2,12 C2,6.486,6.486,2,12,2c5.514,0,10,4.486,10,10C22,17.514,17.514,22,12,22z"></path></svg>
</a>

In the above example, you can see that we added <title id="wpLogoTitle">WordPress logo linked to WordPress.org</title> inside the <a> tag and also an example of a longer description using the <desc> tag. A longer description is probably not needed for a social media or other basic icon links, but we’ve added it here to show you how it could be used.

Then, we added aria-labelledby="wpLogoTitle wpLogoDesc" to the <svg> tag where the two attributes (separated by a space) match the ids of the defined title and description. When a screen reader encounters the SVG in this example, it would read out first the title then the description: “WordPress logo linked to WordPress.org. A serif font white W in a circle on a blue background.”

CSS-Tricks has a great article about accessible SVGs if you would like to learn more about this or other techniques for making SVGs accessible in or outside of links.

Depending upon the plugins you’re using on your WordPress website, it is likely that you will encounter empty links that you cannot fix because they’re being created by a third-party plugin. This is especially common within social media linking and sharing plugins and many plugins that use Font Awesome. In that case, you may need to choose a different plugin to use on your website.

If you encounter accessibility errors that are caused by a third-party plugin you cannot control, please reference “What to do if a Plugin You’re Using has Accessibility Errors” for ideas on how to proceed.

Easier, Faster Accessibility Testing

Equalize Digital Accessibility Checker gives you real-time accessibility feedback in the WordPress editor. Learn accessibility and make fixes earlier in the dev and content creation process. Full-site accessibility scanning without the per page fees.

Get Accessibility Checker