Making Elementor Accordion Accessible

At TestPros, we use WordPress as the content management system for our website. In particular, we use Elementor and in order to assist with designing our pages. However, many times, WordPress plugins are developed with accessibility as an afterthought. Elementor, in general, has some really great accessibility features baked in and I applaud them for that. However, one of the features of Elementor Essential Addons we use is an Accordion widget (an example can be seen on our frequently asked questions page), which had a few key issues preventing it from being accessible. The purpose of this article is to describe the limitations of the Accordion widget, as well as provide a solution for making it Web Content Accessibility Guideline 2.0 compliant.

For some background, when conducting the initial accessibility testing of our website, we discovered that this plugin had two key accessibility issues related to WCAG 2.1.1 – Keyboard. First, the accordion elements do not receive focus. Second, even if the elements did receive focus, the JQuery click event handler for showing/collapsing the accordion contents cannot be triggered via keypress (e.g., enter key or space bar).

The reason the accordion elements do not receive focus is due to the <div> wrapper for the accordion lacking the tabindex attribute. Strangely enough, the actual accordion elements do have a tabindex, but without the wrapper having one, the keyboard will not tab to the elements. The solution for this is pretty straightforward.

1. Replace /wp-content/plugins/essential-addons-elementor-lite/includes/elements/Adv_Accordion.php, line 1024 with:

echo '<div class="eael-accordion-list" tabindex="0"> 

Small note, the closing ‘ for the line was intentional since it is closed on the following line. Otherwise, that’s it! After making that change the Accordion wrapper will receive focus using keyboard and be partially compliant with WCAG 2.1.1.

The second issue identified was the accordion element’s click handler not being triggered via pressing “enter” or the space bar after receiving focus. The reason for this, was due to the use of the JQuery “.click()” handler. This handler does pretty much what it implies: it adds and event listener that is triggered by a mouse-click on the referenced element. However, the .click() handler does not detect keypresses, for example, via pressing the space bar or “enter” buttons on a keyboard.

The fix here is a little more complicated, but still pretty straightforward. Our goal here, is to add a new event listener to the Accordion elements that, 1) detects the appropriate keypresses, and 2) triggers the existing .click() event listener already present in /wp-content/plugins/essential-addons-for-elementor-lite/assets/front-end/js/view/advanced-accordion.js.

1. Create an external .js file, or appending to an existing one, and add the following code:

jQuery(document).ready(function($){
    $(".eael-accordion-header").on('keypress', function(e) {
        e.preventDefault();
                var id = $(this).attr('id');

        if(e.which == 13 || e.which == 32) {
            $('#'+id).trigger("click");
        }
    })
});

A couple of things going on here, which I will explain.

1. JQuery(document).ready() is used in order to detect whether the DOM is loaded and ready. You cannot use $(document).ready() or the short-hand “$(function()”. WordPress requires you append “jQuery” to the beginning of the function invocation.
2. We have used the .on(‘keypress’) instead of the .click() handler. This handler allows for more versatile detection of events.
3. Next, we retrieve the “id” of the element that has been clicked on and store it within a variable. The reason for this will become more clear in the subsequent steps.
4. We then have to detect the correct keypress. For this, we use “e.which” and use a conditional statement to ensure the returned event is for the keycodes “13” (enter key) or “32” (space bar).
5. Assuming the “enter” or “space” keys are clicked, we use the element id stored in the variable mentioned in step 3 to invoke the .trigger() function. Doing this will invoke the existing .click() listener on the element(s).

That’s it! The Accordion elements will now receive focus, can be triggered via pressing the “enter” or “space” keys, and is now compliant with WCAG 2.1.1. The best part is, we did not have to alter any code related to the existing .click() handler to make it work.

However, there are some shortcomings with this solution, including but not limited to:

1. We added a second event listener to the elements, which is redundant at best, and/or detrimental to site performance at worst.
2. The solution uses an external “.js” file, which can potentially add to page load time.

For a more elegant solution that addresses the shortcomings listed above, stay tuned for Part 2! In the meantime, check out our accessibility services or contact us.