Examining the Accessibility of Popular WordPress Page Builders
0 likes443 views
The document evaluates the accessibility of popular WordPress page builders, Beaver Builder and Elementor, highlighting issues related to non-text content, color contrast, and keyboard operability. Key problems include inadequate labeling of icons and forms, poor contrast for required fields, and difficulties with autoplay features in sliders. Recommendations for improvement are provided, alongside links to templates and additional resources.
![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?](https://image.slidesharecdn.com/examining-the-accessibility-of-popular-wordpress-page-builders-200209145820/85/Examining-the-Accessibility-of-Popular-WordPress-Page-Builders-4-320.jpg)
Examining the Accessibility of Popular WordPress Page Builders
- 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?
- 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.
- 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