First, I will start by saying that this is not code that I wrote. This code is from Mike Hayden at Intelliwolf. I was searching for how to make accordions in Divi accessible and found his post. Please go to Hayden’s post to learn more about the code. He goes through each line item to clarify what the code is actually doing.
If you’re visiting this page, I assume you have an idea of what Divi is and are hoping to make your content more accessible. If not, to be brief, Divi is a theme builder used in WordPress. At the current state of Divi, while writing this, there is an issue with accessibility when trying to use the Accordion widget. When a user has a screen reader and/or is using a keyboard to navigate the page, the accordion is not recognized. Any information within the accordion will not be read by the screen reader or identified by the keyboard. All that information will be skipped over. So, how do we fix this (until Divi fixes it)?
If you already know how to add code to a Divi module, here is Hayden’s code:
<script type=“text/javascript” async>
jQuery(document).ready(function($) {
$(“.et_pb_toggle”).each(function(i) {
var toggleID = “et_pb_toggle_” + i;
$(this).attr(“tabindex”,”0″);
$(this).children(“.et_pb_toggle_content”).attr({
“id”: toggleID,
“aria-labelledby”: toggleID + “-title”,
“role”: “region”
});
var toggleText = $(this).children(“.et_pb_toggle_title”).text();
$(this).children(“.et_pb_toggle_title”).html(
“<span role=’button’ id='” + toggleID + “-title’ aria-controls='” + toggleID + “‘>” + toggleText + “</span>”
);
});
update_toggle_aria();
$(“.et_pb_toggle”).on(“click”, “.et_pb_toggle_title”, function() {
setTimeout(update_toggle_aria, 1500);
});
function update_toggle_aria() {
$(“.et_pb_toggle_open .et_pb_toggle_title span”).attr(“aria-expanded”, “true”);
$(“.et_pb_toggle_close .et_pb_toggle_title span”).attr(“aria-expanded”, “false”);
}
$(document).on(‘keyup’, function(e) {
if (e.which === 13 || e.which === 32) {
$(‘.et_pb_toggle:focus .et_pb_toggle_title’).trigger(‘click’);
}
});
});
</script>
If you’re new to adding code to a Divi module, Hayden’s post takes you through step by step via images on his post. If you prefer a video to walk you through the steps, watch the video below and I will take you through the steps during a screen share.
One thing to note, the code used was for the “toggle” widget in Divi. Hayden has a post for the “accordion” widget however, in some cases, like mine, the coding for the accordion widget was actually labeled “toggle”. If it was labeled “accordion”, I would have used the code found on this post.