<\/figure><\/div>\n\n\n\nNow everything should be working properly.<\/p>\n\n\n\n
I'll go through the sections of the code in a minute, but we have one final thing to do, if you haven't already implemented it.<\/p>\n\n\n\n
Add a focus outline in CSS<\/h2>\n\n\n\n Divi doesn't automatically add a focus outline. This is important for keyboard navigation, because it lets the user know where they are on the page.<\/p>\n\n\n\n
Go to either the Theme Customizer -> Advanced CSS<\/em> or into Divi -> Theme Options<\/em> and scroll to the bottom.<\/p>\n\n\n\n <\/figure><\/div>\n\n\n\nAdd this code:<\/p>\n\n\n\n
*:focus {\n outline: 1px dotted #000;\n}<\/code><\/pre>\n\n\n\nYou can customize the outline to suit your site.<\/p>\n\n\n\n
1px refers to the width of the outline. Dotted will make it a dotted line. You could also use solid or dashed. #000 will make the line black. You can put any other hex color value there, but try to make it have enough contrast with the rest of your design.<\/p>\n\n\n\n
What does the code do?<\/h2>\n\n\n\n Let's have a look at the code that makes the Divi Toggle module web accessible.<\/p>\n\n\n\n
<script type=\"text\/javascript\" async>\njQuery(document).ready(function($) {\n\n[...]\n\n});\n<\/script><\/code><\/pre>\n\n\n\nThis part sets up the script as jQuery. Think of it like the wrapper to tell the browser how to interpret the rest of the code.<\/p>\n\n\n\n
Add code to each toggle<\/h3>\n\n\n\n$(\".et_pb_toggle\").each(function(i) {\n var toggleID = \"et_pb_toggle_\" + i;\n $(this).attr(\"tabindex\",\"0\");\n $(this).children(\".et_pb_toggle_content\").attr({\n \"id\": toggleID,\n \"aria-labelledby\": toggleID + \"-title\",\n \"role\": \"region\"\n });\n var toggleText = $(this).children(\".et_pb_toggle_title\").text();\n $(this).children(\".et_pb_toggle_title\").html(\n \"<span role='button' id='\" + toggleID + \"-title' aria-controls='\" + toggleID + \"'>\" + toggleText + \"<\/span>\"\n );\n});<\/code><\/pre>\n\n\n\nUsing each<\/em>, we go through each toggle, in case there are multiple toggles on the page.<\/p>\n\n\n\nThe i<\/em> in function(i)<\/em> is a counter starting at zero. Divi automatically creates a unique toggle number as a class for each toggle on a page, starting at zero. We can use the counter to do the same thing and avoid having to pull the unique number out using more complicated methods.<\/p>\n\n\n\nWe add tabindex=\"0\"<\/em> to each toggle to add it to the list of elements the keyboard will tab through.<\/p>\n\n\n\nNext we add an ID to the toggle content, so the title can connect to it. We then tell the browser the ID of the title that connects to the content and set the role to \"region\".<\/p>\n\n\n\n
In the next line, we grab the title text for use in the next step.<\/p>\n\n\n\n
We wrap the title in a span to make it behave like a button. We give it an ID and tell the browser which content area this title controls.<\/p>\n\n\n\n
Set the aria-expanded state<\/h3>\n\n\n\nupdate_toggle_aria();\n$(\".et_pb_toggle\").on(\"click\", \".et_pb_toggle_title\", function() {\n setTimeout(update_toggle_aria, 1500);\n});\n\nfunction update_toggle_aria() {\n $(\".et_pb_toggle_open .et_pb_toggle_title span\").attr(\"aria-expanded\", \"true\");\n $(\".et_pb_toggle_close .et_pb_toggle_title span\").attr(\"aria-expanded\", \"false\");\n}<\/code><\/pre>\n\n\n\nThe first line tells the browser to run the update_toggle_aria()<\/em> function. This adds the correct aria-expanded<\/em> attribute to the toggle titles, base on whether the toggle is open or closed.<\/p>\n\n\n\nThe $(\".et_pb_toggle\").on(\"click\"<\/em> etc line listens for a click on the toggle, waits for 1500 milliseconds and updates the state of aria-expanded<\/em> on all the toggles.<\/p>\n\n\n\nWe wait for that period because Divi takes a few milliseconds to open or close the toggle, before adding the CSS that our code is looking for to tell us whether it's open or closed.<\/p>\n\n\n\n
Simulate mouse clicks with the keyboard<\/h3>\n\n\n\n$(document).on('keyup', function(e) {\n if (e.which === 13 || e.which === 32) {\n $('.et_pb_toggle:focus .et_pb_toggle_title').trigger('click');\n }\n});<\/code><\/pre>\n\n\n\nThe last piece of code listens for the Enter key (13) or Space bar (32) being pressed. If the toggle is in focus, it will simulate a mouse click on the toggle.<\/p>\n\n\n\n
That does it for today, let me know in the comments how you go.<\/p>\n","protected":false},"excerpt":{"rendered":"
Following on from the post on making the Divi Accordion module web accessible, today we’ll tackle the Divi Toggle module. The functionality of the Toggle module is similar to the Accordion module. The main difference is each Toggle element stands alone. Because of that, I think the Toggle module should follow the WAI-ARIA Disclosure Design<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8],"tags":[16],"yoast_head":"\n
How To Make Divi Toggle Module Web Accessible<\/title>\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\t \n\t \n\t \n