Logo Geek on Heels

Accessibility – When the link on your button does not show up in the screen reader link list in Elementor

Many use the button widget in Elementor as a glorified link. Please stop doing that. It won't show in a link list. Here's the alternative!

The Issue

The way the Elementor button widget is coded “under the hood” will exclude the link from the link list that people using a screen reader can summon. The technical reason for this, in geek speak: they added role=”button” to the link.

This is fine when the button does something. Like open a pop-up. But not when the button is actually nothing more than a fancy styled link. Most just use a button as a CTA (Call To Action), like I do, on my home page. I would have been blissfully unaware of this issue, if I hadn’t tested my page with a screen reader. In the video (further down on the page) you can see what a screen reader link list looks like, and how it was not displaying my CTA links.

Once you begin to understand that accessibility, just like responsiveness, is not optional anymore, you also realize that there’s no such thing as a 100% no coding solution for site building (yet). Not even Elementor. They are clearly constantly improving in that area, but until all the work is done, there’s some stuff we need to add under the hood by ourselves. No worries though, it’s not complicated!

Steps to solve it

To keep enjoying the styling for your buttons as set in the site settings in Elementor, you need to re-create the button via the HTML widget and add some custom CSS to it, that I will provide you with further down. Once you’re done, you can add the widget as a global Element, and add it to your page, unlink it from being global, and then add the correct link to your button.

  1. Place an HTML widget onto any page.
  2. Paste in the HTML code you see below.
<div class="elementor-button-wrapper cta_included">
<a href="https://thepageyouwanttolink.to" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-content-wrapper"><span class="elementor-button-text">Text on your button</span>
</span>
</a>
</div>

The CSS

Paste the CSS code from below in your preferred custom CSS location.

You can do so in the WordPress Customizer, into your Elementor Site Settings, or install the Code Snippets Pro plugin from the WordPress plugin directory. Of course, you can also paste it in the Advanced Tab of the HTML widget. But I advise against that. If you use these buttons in several locations in your site and want to change the CSS later, you’ll have a hard time finding where you added this particular piece of CSS.

.cta_included {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

Video demo

YouTube

By loading the video, you agree to YouTube's privacy policy.
Learn more

Load video

Would you actually like to know WHY you should do this?​

First, this is about accessibility. Being able to access public content, is a RIGHT. For everybody. That includes all who depend on assistive technology.

Second, the number of users who use link lists is a lot larger than you probably would assume. Since I figured out that this exists, and I started using a screen reader to test my sites, I am one of them. A recurring inflammation in my right arm makes me depend on keyboard navigation and other assistive tech (which has made my online life a lot easier!). Link lists are a great way to quickly see if the info I need is linked to on a page.

Go try for yourself! This article offers an extensive list of free screen readers you can use.

Latest Tutorials & Articles