Hiding Divi Icons From Screen Readers
Helpful Links
Transcript
Do you want to know one of my biggest pet peeves with Divi websites? It’s probably not what you think.
Hi, I’m Renee from Elevage Digital, web developer and accessibility specialist. Today, I’m going to show you how to hide decorative icons from being announced by screen readers. This will help improve your user experience and will help you conform with website content accessibility guidelines.
In Divi, the icons for certain modules are created using icon fonts and applied using the CSS content property in rules that use the :before and :after pseudo elements.
Button Icons
Let’s look at the button module for example, which really actually creates links that are styled to look like buttons. For more information about the difference between links and buttons, you can check out this blog post on my website at elevagedigital.com/links.
When you create a button-styled link and include the default right angle icon as part of your design, the CSS for this icon is included as part of the standard Divi CSS. If we look at the CSS for this element, the class .et_pb_button:after has a content property value of \35. If you select something other than the default icon for your button-styled link,
a data icon attribute is added to the link element which contains the symbol name of the icon. In this case, the CSS content property value is the value of the data icon attribute.
In both instances, what is announced by the screen reader is the symbol name of the corresponding font icon hex code. So in the case of these two links, the screen reader user will hear “Our Services 5” and “Our Services A”. For a screen reader user, they may question the purpose of these links. Does this mean that this company has five services? Are their services divided into tiers A, B, etc.? Should there be a Services B link? This can be very confusing.
Also, that these decorative icons are announced by the screen readers represents a failure for WCAG Success Criteria 1.1.1 Non-text Content “due to not marking up decorative images in HTML in a way that allows assist of technology to ignore them”.
Accessible Name
So, why are these icons announced? If we inspect the two links again and look at the accessibility tab, we can see the accessible name for the first link is “Our Services 5” and for the second link it’s “Our Services A”. The accessible name is what a screen reader will announce to identify an element. It is based on any aria-label or aria-labelledby attributes associated with the element, the element’s visual text and any content applied to the element using the CSS :before and :after pseudo elements.
The Solution: Content Property Alt Text
So what can be done? The answer is to apply alt text to these icons using the same CSS content property that is used to create them. Within the value of the content property, the first parameter is the normal version of the content. To add an alternative version, add a forward slash after the first parameter and then a second parameter. In this case, just empty quotes to signify that nothing should be announced.
So now if we inspect these links again, we can see that the accessible name does not include the icons, so they will not be announced by screen readers.
Conclusion
Let me know if you found this video helpful and follow this channel for more videos on improving WCAG conformance for Divi websites. If you need help auditing or remediating your Divi website for WCAG conformance, contact me at elevagedigital.com.