A look at the accessibility of content produced by Beaver Builder and Elementor templates in WordPress. Presented at WordCamp Glasgow, February 8 2020.

1. Examining the Accessibility of
Popular WordPress Page Builders
Claire Brotherton
A Bright Clear Web
WordCamp Glasgow 2020

2. What you will learn
1. Accessiblity needs and
requirements
2. Introduction to the Beaver
Builder and Elementor page
builders
3. Templates, modules and
widgets - what accessibility
issues do they have?
4. What could the page builders
do better?

3. Perceivable Operable Understandable Robust

4. What issues was I looking for?
Non-text content
Contrast
Keyboard operation
Are images or icons appropriately labelled for users with sight loss?
Are they ignored if they convey no meaning?
Is colour contrast on each part of the page enough to clearly make out the text?
Can all controls be operated by the keyboard?
Is a keyboard-only user able to see where they are on the page when they navigate [visible focus]?
Can the user pause, stop or hide moving content with the keyboard only?

5. Testing Content

6. Beaver Builder
Free version has over 400,000 active installs
6 modules in Beaver Builder Lite, 29 more in premium version
Premium version has more than 30 landing page templates and 25 content page templates

7. About Me 2 template
Modules:
1. Heading
2. Text Editor
3. Photo
4. Number counter
5. Testimonials

8. Elementor
Free version has over 4m active installs
30 widgets in Elementor free, 52 more in Elementor Pro
42 free templates and over 300 Pro templates

9. Creative Agency -
Homepage template
Widgets:
1. Heading
2. Text Editor
3. Button
4. Media Carousel
5. Image
6. Icon List
7. Form
8. Social Icons

10. Social Icons: Beaver Builder
Module: Icon Group
Template: Landing Page - Subscribe

11. Social Icons: Beaver Builder
Good
Problems
aria-hidden="true" on icons
aria-label for link text
"link to" read out
URLs read out

12. Social Icons: Elementor
Widget: Social Icons
Template: Landing Page - Stylist

13. Social Icons: Elementor
Good
Problems
Screen reader text
No link destinations
Links open in new tabs

14. Subscribe Form: Beaver Builder
Module: Subscribe Form
Template: Landing Page - Subscribe

15. Subscribe Form: Beaver Builder
Problems
No visible labels
Placeholder text
Required fields unmarked
Invisible button focus
Error messages not read out/disappear
Sign up! button isn't a <button>

16. Subscribe Form: Elementor
Widget: Form
Template: Maintenance Mode 4

17. Subscribe Form: Elementor
Problems
Form label hidden
Placeholder text
Email field not marked as required

18. Contact Form: Beaver Builder
Module: Contact Form
Template: Landing Page - Subscribe

19. Contact Form: Beaver Builder
Good
Visible labels associated with form fields
Problems
Placeholder text
Required fields unmarked
Error messages inadequate
Send button isn't a <button>

20. Contact Form: Elementor
Widget: Form
Template: Digital Agency – Contact

21. Contact Form: Elementor
Good
Problems
Labels associated with controls
Labels hidden
Placeholder text
Colour contrast on button
Error messages inadequate for SR users
Colour alone for errors

22. Image Slider: Beaver Builder
Module: Slideshow
Template: Landing Page - Biz

23. Image Slider: Beaver Builder
Problems
Autoplay
Can't pause it
Navigation arrows not keyboard accessible

24. Image Slider: Elementor
Widget: Image Carousel
Template: Digital Agency – Home Page

25. Image Slider: Elementor
Problems
Autoplay
Can't pause it
Bad alternative text

26. Testimonials: Beaver Builder
Module: Testimonial Carousel
Template: Landing Page - Biz

27. Testimonials: Beaver Builder
Problems
Autoplay
Can't pause it with the keyboard
No visible keyboard focus on arrows
Next arrow focusable before previous
aria-pressed on a link
Read twice by NVDA

28. Testimonials: Elementor
Widget: Testimonial Carousel
Template: Digital Agency – Home Page

29. Testimonials: Elementor
Problems
Autoplay
Can't pause it with the keyboard
No controls

30. Should I Use a Carousel?
shouldiuseacarousel.com

31. Accordion/Toggle: Beaver Builder
Module: Accordion
Template: Content Page Template - FAQs

32. Accordion/Toggle: Beaver Builder
Problems
3 focusable elements to open the content
Too many & incorrect ARIA attributes

33. Accordion/Toggle: Elementor
Module: Toggle
Template: Digital Agency – Services

34. Accordion/Toggle: Elementor
Good
Problems
Can see focus on the toggle title
ARIA role="tablist" incorrect
Screen reader user not informed if
hidden content is expanded or
collapsed

35. Key Takeaways
Default settings
Social media
icons
Forms
They are not all accessible. Check them!
Watch links opening in a new window.
Ask Beaver Builder to improve their icon labels.
Form plugins may be better.

36. Key Takeaways
Sliders &
carousels
Accordions &
toggles
Hard to make accessible.
Do you really need them?
Better coded examples exist -
ask for improvements.

37. Links
Links to templates
Posts
https://www.wpbeaverbuilder.com/wordpress-templates/
https://library.elementor.com/
https://www.abrightclearweb.com/beaver-builder-accessibility/
https://www.abrightclearweb.com/elementor-accessibility/

38. Videos
Beaver Builder: Social Icons https://www.youtube.com/watch?v=PKrpvAfledA
Beaver Builder: Subscribe Form https://www.youtube.com/watch?v=6vDYgz2Aa68
Beaver Builder: Testimonials https://www.youtube.com/watch?v=4xvHsSt4uUI
Beaver Builder: Accordion https://www.youtube.com/watch?v=r29Q1qZ4bO4
Elementor: Social Icons https://www.youtube.com/watch?v=P6a1ui-URVE
Elementor: Contact Form https://www.youtube.com/watch?v=fimcKOc21I8
Elementor: Image Carousel https://www.youtube.com/watch?v=74VyI_sd2oo
Elementor: Accordion https://www.youtube.com/watch?v=FBrzk9sen2Y

39. Thank you
for listening!
Claire Brotherton
www.abrightclearweb.com
claire@abrightclearweb.com
@abrightclearweb