illustration of person working on laptop with cog wheels above them

Divi5 Accessibility: Links and Buttons

ByRenee Dunn Reading Time: 2 minutes

It’s clear that Divi5 will not include fixes for any of its inherent accessibility issues.  Based on a recent article, their recommended solution is to use the Divi-Modules plugins for accessibility, which I reviewed last year.  While these plugins have significantly improved since their initial launch, there are still some fundamental issues with the default settings that exacerbate the fact that Elegant Themes developers do not understand the difference between links and buttons.

Links v. Buttons

Links and buttons serve different purposes:

  • Links take users to a new location when clicked or activated with a keyboard. They are created using an <a> tag with an href attribute pointing to the destination.
  • Buttons trigger an action, such as submitting a form, opening a popup, or advancing a slider. They are created with the <button> tag or <input type="button">.

Divi often calls <a> elements styled with the .et_pb_button class “buttons.” Despite looking like buttons, these are still links in HTML and should be treated as such.

Using ARIA role=button in Divi5

Elegant Themes incorrectly advises adding role="button" to every .et_pb_button element. This ARIA role tells assistive technology that an element behaves like a button, even when it isn’t coded as one.

In Divi-Modules’ Accessibility Attributes plugin (as of version 2.0), this is the default behavior for all .et_pb_button elements. But if something is a link, it should never have role="button", regardless of how it looks.

If you want your Divi5 site to be accessible, remove .et_pb_button from the plugin’s default role settings by going to Accessibility > Attributes > Elements > ARIA Button. Only add role="button" manually in the Advanced settings of individual modules when the element truly functions as a button.

Adding role=button does not automatically make an element keyboard operable.  You will still need to write custom JavaScript to define what happens when a user presses different keys on that element.  Depending on the purpose of the element, your JavaScript should include support for tab, enter, spacebar, arrows, esc, home, and end keys. 

Key Takeaways

Make sure you are using the correct terms and HTML code to distinguish links and buttons.  Even with the Divi-Modules Accessibility plugins, you will need to do a significant amount of work to make a Divi5 website accessible and keyboard operable.  Simply having the tools will not be enough. You need to fully understand WCAG and ARIA in order to use these tools correctly.  And, as always, conduct extensive testing with keyboards, screen readers, and other assistive technology.