Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Examining the Accessibility of Popular WordPress Page Builders

390 visualizaciones

Publicado el

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

Publicado en: Internet
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Examining the Accessibility of Popular WordPress Page Builders

  1. 1. Examining the Accessibility of Popular WordPress Page Builders Claire Brotherton A Bright Clear Web WordCamp Glasgow 2020
  2. 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. 3. Perceivable Operable Understandable Robust
  4. 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. 5. Testing Content
  6. 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. 7. About Me 2 template Modules: 1. Heading 2. Text Editor 3. Photo 4. Number counter 5. Testimonials
  8. 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. 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. 10. Social Icons: Beaver Builder Module: Icon Group Template: Landing Page - Subscribe
  11. 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. 12. Social Icons: Elementor Widget: Social Icons Template: Landing Page - Stylist
  13. 13. Social Icons: Elementor Good Problems Screen reader text No link destinations Links open in new tabs
  14. 14. Subscribe Form: Beaver Builder Module: Subscribe Form Template: Landing Page - Subscribe
  15. 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. 16. Subscribe Form: Elementor Widget: Form Template: Maintenance Mode 4
  17. 17. Subscribe Form: Elementor Problems Form label hidden Placeholder text Email field not marked as required
  18. 18. Contact Form: Beaver Builder Module: Contact Form Template: Landing Page - Subscribe
  19. 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. 20. Contact Form: Elementor Widget: Form Template: Digital Agency – Contact
  21. 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. 22. Image Slider: Beaver Builder Module: Slideshow Template: Landing Page - Biz
  23. 23. Image Slider: Beaver Builder Problems Autoplay Can't pause it Navigation arrows not keyboard accessible
  24. 24. Image Slider: Elementor Widget: Image Carousel Template: Digital Agency – Home Page
  25. 25. Image Slider: Elementor Problems Autoplay Can't pause it Bad alternative text
  26. 26. Testimonials: Beaver Builder Module: Testimonial Carousel Template: Landing Page - Biz
  27. 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. 28. Testimonials: Elementor Widget: Testimonial Carousel Template: Digital Agency – Home Page
  29. 29. Testimonials: Elementor Problems Autoplay Can't pause it with the keyboard No controls
  30. 30. Should I Use a Carousel?
  31. 31. Accordion/Toggle: Beaver Builder Module: Accordion Template: Content Page Template - FAQs
  32. 32. Accordion/Toggle: Beaver Builder Problems 3 focusable elements to open the content Too many & incorrect ARIA attributes
  33. 33. Accordion/Toggle: Elementor Module: Toggle Template: Digital Agency – Services
  34. 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. 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. 36. Key Takeaways Sliders & carousels Accordions & toggles Hard to make accessible. Do you really need them? Better coded examples exist - ask for improvements.
  37. 37. Links Links to templates Posts
  38. 38. Videos Beaver Builder: Social Icons Beaver Builder: Subscribe Form Beaver Builder: Testimonials Beaver Builder: Accordion Elementor: Social Icons Elementor: Contact Form Elementor: Image Carousel Elementor: Accordion
  39. 39. Thank you for listening! Claire Brotherton @abrightclearweb