Getting your Divi page accessible
Step 1: Evaluation
The first thing we should probably do is get an idea of the state of our page or content. The following evaluate your page for accessibility and performance and there’s even AI help for helping you generate useful Alt text tags.
Websites to test your page on
https://accessibe.com/accessscan?
Accessibility IMpact (AIM) (webaim.org)
Site Improve Accessibility Checker extension for chrome and edge
Wave evaluation tool extension in Chrome
Free AI Image Alt Text Generator (ahrefs.com)
Step 2: Site wide fixes
There’s a few things we can do to make the entire website more accessible. These may require a member of the LEANWI website staff to implement but I will go through them quickly here.
Make a Divi Child theme
Here, we are going to add the ability for you pages to be zoomed up to 500% and we’re also going to ensure that your menu items are tagged with role=”button” which is important for screen readers to be able to inform their users of.
To create a child theme:
https://developer.wordpress.org/themes/advanced-topics/child-themes/
Using WP File manager plugin go to /wp-content/themes and create a Divi-child folder
Create a style.css file with the following contents:
/*
Theme Name: Divi Child
Template: Divi
*/
Create a file functions.php
The below code makes it possible for the website to be zoomed up to 5X and to add a role=”button” attribute to each menu item
The code for functions.php:
<?php
/* —----------------------------------------------------*/
/* Adding 5X zoom */
/* —----------------------------------------------------*/
function remove_my_action() {
remove_action('wp_head', 'et_add_viewport_meta');
}
function custom_et_add_viewport_meta(){
echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />';
}
add_action( 'init', 'remove_my_action');
add_action( 'wp_head', 'custom_et_add_viewport_meta' );
/* —----------------------------------------------------*/
/* Adding attribute role=button to your menu items */
/* —----------------------------------------------------*/
add_filter( 'nav_menu_link_attributes', 'tg_atts', 10, 3 );
function tg_atts( $atts, $item, $args )
{
// inspect $item, then …
$atts['role'] = 'button';
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
return $atts;
}
Go to Appearance > Themes > Activate the new theme
Add code to Custom CSS
The following code needs to be added to the Custom CSS section in the Divi Theme Options. These add an outline around the current item in focus and add a skip link to the top of your page.
/* Add a focus line around the item currently in focus */
*:focus { outline: 1px dotted #000; }
/* Add a skip link to the top of the page */
.skip {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip:focus {
position: static;
width: auto;
height: auto;
}
This code can then be placed in Divi / Theme options / Integration / < head > code
<a href="#main-content" class="skip">Skip to main content</a>
<script>
document.addEventListener('DOMContentLoaded', function () {
var mainContent = document.getElementById('main-content');
if (mainContent) {
mainContent.setAttribute('tabindex', '-1');
var skipLink = document.querySelector('a.skip');
if (skipLink) {
skipLink.addEventListener('click', function (e) {
// Allow default behavior (scroll), but also move focus
mainContent.focus();
});
}
}
});
</script>
Now we are using Divi’s main-content id so we do not need to create our own id anymore at the base of our global header. This method did not work for the NVDA screen reader.
Step 3: Common page design techniques
The most common things we can do as we are building and maintaining our pages are:
Make sure all of our images have descriptive alternative text values
This website: Free AI Image Alt Text Generator (ahrefs.com) can help us here. Having all images with an informative alt text description is good practice not just for accessibility but improves your SEO score too.
Make sure our foreground and background colors have enough contrast
Hopefully a color palette was chosen for your website that enables you to easily choose colors that contrast and pass the WCAG requirements. Use this website WebAIM: Contrast Checker to check if your colors are compliant.
A bonus here too that we have found is that color schemes that pass the WCAG requirements not only help with accessibility but seem to also make a generally better looking website color scheme.
Make sure our header elements are in order
Essentially do not use different heading styles for formatting but remember that the headings are used by screen readers to inform their users of the hierarchy of the page which is very important for the user to be able to understand the content of your page as it is read to them.
Step 4: Extra page tweaks to get that score up
It is also required some times that we:
- Specify the role of an element if it is not obvious (i.e. a text link used as a button)
- Include or exclude an element from the tabbing order
- Adding aria labels for links that open in a new window for example
These all involve adding extra tags to our page elements using the Divi Supreme Pro ‘Custom Attributes Extension’. The plugin needs to be installed on your website by a LEANWI staff member and the ‘Divi Custom Attributes’ Enabled.
This adds a feature to the Advanced tab of all modules called ‘Custom Attributes’. An example for adding role=”button” to an element is shown below. Here you can see that we have:
Set ‘Use Custom Attributes’ to Yes
Generally we add attributes to the Wrapper but if this does not work you can try the other settings
Added a title of ‘role-button’ (I like to name my custom attributes like this for clarity)
Click the link icon to bring up the attribute input fields
Add the attribute name and value. Note that quotes are not needed.
We can add something similar for other common missing attributes such as:
1. Include an element in the tabbing order:
Add to: Wrapper, Title: tabindex-0, Name: tabindex, Value: 0
2. Exclude an element in the tabbing order:
Add to: Wrapper, Title: tabindex-1, Name: tabindex, Value: -1
3. Add an aria-label:
Add to: Wrapper, Title:aria-label, Name: aria-label, Value: Opens on a new page
4. Add a rel attribute:
Add to: Wrapper, Title:rel-noopener, Name: rel, Value: noopener
Step 5: I’m really getting into this, how do I get to 100%
It gets quite a lot trickier from here.
Divi does not appear overly concerned with the Accessibility of its websites and some modules are very difficult to add instructive elements to without having to write CSS code and add that to your page or site-wide custom CSS. Most issues arise using modules that contain multiple elements as the Divi Supreme Pro Custom Attributes Extension can’t then decide the best place to add the tag. A possible solution here is to switch out modules that have multiple elements and replace them with each element module instead, or go hunting on the web for solutions. You’ll likely end up inspecting the page elements to obtain the class id and then adding some CSS or javascript to update the element as it is getting loaded. Have fun!