In recent years, web accessibility has become an increasingly prominent issue for website developers and operators, due to increased awareness and the introduction of regulations around this topic in various jurisdictions. In today’s post, we will be looking at a few ways in which you can improve the accessibility of your Divi powered websites. While these tips are not intended to form a comprehensive accessibility solution or to make your site comply with any specific regulation or accessibility standards, they represent some practical steps you can take towards improving Divi accessibility and making your site provide an optimal user experience for all of its visitors, whether you are optimizing accessibility on an existing site or looking to create a new site with accessibility in mind.
1. Provide alternatives for images and icons
Perhaps one of the most well-known ways to improve the accessibility of visual content on the web is the alt attribute of the <img> tag, or, in less technical terms, the “alt” or “alternative” text that can be provided with an image to describe it. This text can be used by assistive technologies to present a non-visual representation of the image. Like most modern web authoring platforms, both WordPress and the Divi builder support setting alt text on images that are inserted into content. This is implemented in a few different ways.
The first way to set an image’s alt text for use in Divi content is to do so in the WordPress media library, either when the image is uploaded or at a later time. You can do this either in the Media page that is available in the WordPress admin’s main menu, or in the image upload and selection dialog that is used to choose an image when inserting it into Divi content. The advantage of this approach is that the alt text is saved with the image, so if the same image is used elsewhere in the future, the alt text comes with it. It is important to note, however, that at least some instances where this text is used do not automatically update the text if it is changed in the media library. For example, if you insert an image using the Divi builder’s Image module, the module will use the alt text that is set on the image when it is selected, but it will not update this text if it is changed later (you would need to change the text in the Advanced tab of the Image module settings window).
Another way you can set the alt text for images used with the Divi builder is wherever you use the image. This may be the Image module in the Divi builder, as described earlier, or by editing the <img> tag for an image inserted into WYSIWYG content, such as in a Text module. This may allow you to provide a description that is more relevant to the context in which the image is used.
When it comes to icons, avoid using icons as the only way to convey information, because they may not have accompanying descriptive text by default. Font icons, for example, are usually set using an element with an icon-specific class attribute, which is not a place to put content that needs to be accessible to screen readers that are reading your website. So be sure that you are using text to supplement your icons if they are being used in a way that is more than just decorative and are not implemented as images with alt tags.
In addition to greatly improving the accessibility of your site, alternative text is also good for search engine optimization, as covered in our recent article about Divi SEO. For some more recommendations about how to write alternative text for images, check out this tips and tricks article from the Web Accessibility Initiative.
2. Make it easier to find and follow links
Since its inception, one of the primary features of the web has been interconnected content via links, and links are as important now as ever. But links don’t do any good if they can’t be identified as links, or if they can’t be selected using a particular navigation method. In other words, they need to stand out from the surrounding content, and (from an accessibility perspective) they need to be selectable with keyboard navigation, not just a mouse or touch-based input.
Probably the most effective and traditional way to indicate a link is by underlining it; however, the CSS stylesheet in the Divi theme disables link underlining by default. You can add this back with a tiny bit of custom CSS:
#et-main-area a, #et-main-area a:hover { text-decoration: underline; }
Add this in your WordPress admin under Divi > Theme Customizer > Additional CSS to add underlines to links in the page body on a site-wide basis (don’t forget to consider your page header and footer as well, but whether and how you underline links there may depend on your styling choices).
In addition to (or sometimes, instead of) underlining, it’s normal practice to give links a different color than the surrounding content so that they stand out more. Divi has a built-in setting for this that you can use to choose a link color that fits with your site’s look and feel; see Divi > Theme Customizer > General Settings > Typography > Body Link Color.
For users who are using their keyboards or other non mouse pointer based methods to navigate your site content, you’ll want to make sure that it is clear which link is currently selected. This will allow them to move forward and backward through the links in your content to select the link that they want to follow. You can change the appearance of selected links using the :focus selector in your custom CSS. For example, to add a black highlight to selected links in the page body, you might use CSS like this in the Additional CSS field mentioned above:
#et-main-area a:focus { background: #000; }
So far we’ve mostly referred to links in your text content, but don’t forget that these considerations (particularly regarding the focus state) apply to image links and buttons as well, as well as selectable non-link elements such as form fields. For example, you may want to add a border to a linked image or a form field when it is focused.
3. Consider your colors
When you choose colors for your Divi theme powered site, it is important to think about the contrast between colors that are used together in different contexts, because elements or element states that are colored with insufficient contrast can be difficult to tell apart. For example, this applies to your text color and background color; they need to contrast enough that they don’t pose a problem for your users who are trying to read the text. Add a third color to that: your link color needs to both contrast sufficiently with the background so that the link text is legible, and (ideally) with the surrounding text so that the link stands out instead of blending in. If you are using background images underneath your text, similar rules apply with respect to the colors in the images compared to the overlaid text.
When you choose colors to signify state, such as a color to indicate that a link is selected (in opposition to the default unselected link color), your users also need to be able to tell apart the colors that you use, otherwise the information that they signify isn’t effectively conveyed and navigating your site may be made more difficult.
You can choose the default text and background colors for your Divi site in the General Settings section of the customizer (Divi > Theme Customizer > General Settings). Go to Typography > Body Text Color and Background > Background Color respectively.
For a quantitative assessment of color contrast, check out WebAIM’s Contrast Checker tool to calculate the contrast between two colors that you are thinking about using.
4. Ensure that text is easily readable
The best text copy in the world isn’t of much help to your users if they can’t read it! As part of your Divi accessibility optimizations, make sure you choose text sizes throughout your site that result in text large enough that it can be easily read at a normal (100%) zoom setting. Use fonts that are clear and easy on the eyes; script or cursive fonts in particular can be difficult to decipher sometimes. Set line spacing so that there is enough vertical spacing between lines of text (and make sure that modules containing text have sufficient spacing from other text). To get started, check out the settings in Divi > Theme Customizer > General Settings > Typography.
5. Add a skip to content link
If your website visitors use a screen reader to access your website, they may want an easy way to skip over your header and menu navigation and go directly to the page body, rather than having the screen reader read the header content on each page that they visit, especially since this content can be quite lengthy on sites with large multi-level dropdown menus. Providing a skip link (also known as an anchor link or jump link) to the page body is a great way to improve the user experience for these visitors, and the link doesn’t even need to be visible on your site as long as it is focusable. One way to implement this easy Divi accessibility improvement without any additional plugins is by following our free tutorial on how to create a Skip to Content link with the Divi Theme Builder!
More Resources
For more information on website accessibility generally and accessibility for Divi generated content specifically, check out these links!
Code worked well. Can anything be added to exclude home page titles? Or maybe they should be underlined. Thank you…