Skip to content

Instantly share code, notes, and snippets.

@Bovelett

Bovelett/Elementor Accessible Global Button

Created December 27, 2021 17:37
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Bovelett/f022762749679b1384e66cd521c83eae to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Bovelett/f022762749679b1384e66cd521c83eae to your computer and use it in GitHub Desktop.
Download ZIP
Link styled as a button. This is the HTML for the Elementor Button, which makes it "listen" to the settings in your Global Site Settings. Add this with the HTML widget. You can then add in your link manually. This way your link is styled as a button, but it will appear in the link list of screen readers.
Raw
Elementor Accessible Global Button
<div class="elementor-button-wrapper">
<a href="your_full_link_here" class="elementor-button-link elementor-button elementor-size-sm">
<span class="elementor-button-content-wrapper">
<span class="elementor-button-text">This is your button text</span>
</span>
</a>
</div>
@Bovelett

Bovelett commented Dec 27, 2021

Copy link
Copy Markdown
Author

The reason I share this, is because when you use the button widget in Elementor only as a visually glorified link, that link will not show up in the link list from screen readers. The reason is that in the native Elementor widget, a piece of code is added, that we users cannot remove. That piece is role="button".

Rule of thumb: buttons should DO something, i.e. trigger an action. Links only GO somewhere.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment