Over the last few years, the WP Shout team have used and reviewed popular WordPress page builders. In our tests, Beaver Builder came out top. It scored well for user-friendliness, reliability and support.
So, it’s not a surprise to learn that the Beaver Builder team also have a commitment to accessibility.
Beaver Builder’s accessibility article lists the benefits of an accessible site as:
- Improved readability
- More searchable
- Greater ease of use
- Bigger audience
- Better SEO
The more accessible a site is, the more people can use it: it’s a win-win all round. So, it’s something that Beaver Builder and other WordPress plugin vendors are keen to improve and become known for.
If you want to brush up on some accessibility basics, check out these WP Shout articles:
Beaver Builder accessibility in a nutshell
If you are in a hurry but want to know how accessible Beaver Builder page builder is, here’s a quick rundown of the modules and how I’d rate them.
Good accessibility
- Audio
- Callout
- HTML
- Heading
- Menu
- Photo
- Search
- Sidebar
- Separator
- Text Editor
- Video
Okay accessibility
- Button
- Call to Action
- Contact Form
- Gallery
- Icon
- Icon Group
- Map
- Posts
- Pricing Table
Not so good accessibility
- Accordion
- Content Slider
- Login Form
- Posts Carousel
- Posts Slider
- Slideshow
- Subscribe Form
- Tabs
- Testimonials
What’s in the Beaver Builder product family?
Beaver Builder is best known as a page builder, but did you know it’s part of a family of products?
As well as the page builder, which comes in two flavours, Beaver Builder Lite (free) and Beaver Builder Pro (paid), the Beaver Builder team make two other products.
Beaver Builder Theme is their own theme designed to work seamlessly with their page builder plugin.
Beaver Themer is an add-on plugin for designing layouts traditionally associated with WordPress themes, like headers, footers, blog pages and 404 pages. Fred used Beaver Themer to create his own templates in his experiment at building a WordPress site without code. You can find out more about how to create post templates in Beaver Themer’s documentation.
Beaver Builder Lite has over 300,000 active installs, so there’s a sizable number of sites built with it as their page builder of choice.
How do you know when a site is accessible?
The aim of having an accessible site is to remove as many barriers as possible to users accessing the content. The more barriers there are, the less accessible the site is.
Some accessibility barriers are:
- Images are not properly labelled with text alternatives.
- Parts of web pages are not accessible via the keyboard only.
- Using the Tab key to navigate, you can’t see where you are on the page.
- Controls are confusing or difficult to use.
How do you test Beaver Builder accessibility?
From a practical standpoint, it’s easiest to check the accessibility of a published page. Most sites aim to pass the WCAG 2.1 accessibility standard at AA level.
A page built with Beaver Builder will be a mix of code from various sources – the templates and modules from the Beaver Builder page builder you use, your theme, and any plugins that affect the front end.
For now, let’s consider only Beaver Builder’s page builder output.
There are several online tools which can check accessibility. Automated checkers can’t test for every issue, but they are a good start.
For example, the WAVE tool checks for a number of accessibility violations.
In this assessment of the WP No Code home page, the page comes out quite well. There are a few contrast errors – white on orange doesn’t have sufficient color contrast to pass the test – but no major accessibility errors, at least the ones that the tool looks at.
The WP No Code site is a simple site, though, which doesn’t use the fancier Beaver Builder templates or modules.
At the end of 2019, I accessibility tested some of the Beaver Builder plugin templates and modules and wrote about the experience on my own blog.
Focus On Beaver Builder Accessibility – Is the End Product Accessible?
I found that content produced by the plugin could fall into one of three camps:
- Sometimes you will be able to use Beaver Builder’s modules to make accessible content by default.
- Other times, you’ll need some know-how to tweak the settings optimally.
- Finally, in other cases, you just might need a different tool for the job.
What’s recently improved in Beaver Builder accessibility?
Since I wrote that post, the Beaver Builder development team have made some accessibility fixes, notably in the Beaver Builder 2.4 release:
- Accessibility: Add screen reader only text option to Icons
- Accessibility: Add for labels to Subscribe Module
- Accessibility: Allow choice of placeholders, labels or both for form elements and allow spacebar and enter to submit the form
- Accessibility: Testimonials Module – flip controls so markup matches display
- Accessibility: Menu Module – Fix accessibility issue with Flyout layout close button
With that in mind, let’s assume you’re going to build your pages using modules rather than templates, and take a look at the state of play of those Beaver Builder modules now.
Beaver Builder module accessibility
Basic modules
The Basic modules are the simplest ones, and they generate fairly accessible content.
Using the Audio module outputs a player that’s accessible by keyboard as well as the mouse. Wisely, Auto Play is set to off. For a screen reader user, having media autoplay when the page loads is a guaranteed way to annoy them!
The Heading module tag defaults to a h2 heading, which makes sense. Pages built with a page builder don’t normally have a heading 1 – you’d normally add that yourself, and the next level heading you’d use is a heading 2. You can of course change this to whatever heading you need.
Believe it or not, the Button module doesn’t create a button. It’s a link styled to look like a button. This is an incredibly common design pattern, but technically it’s not really correct. The reason is that native buttons can be activated by the space bar, whereas links can’t. If you press the space bar on a button-style link, you scroll down the page, unless a Javascript event handler is added to the link.
A couple of things to watch for here accessibility-wise are the button text – “Click Here” gives no idea as to what the button does, and the color contrast between the text and the button background. You can – and should – change both of these.
This combination of white text on a blue background comes up on several modules, so you need to change this on all of them.
The main thing to remember when using the Photo module is to give your image alt text. You can do this when you select it from the Media Library. If you decide to link your image, make your alt text match the link destination.
Use of the Text Editor module shouldn’t pose many accessibility issues. One tip is to prefer bold as opposed to italic text for emphasis.
The Separator module simply generates a separator line through CSS, so it’s good to go.
In the Video module you can add your own video from the Media Library or as an embed. I noticed that it’s easier to see the highlighted controls when you use the keyboard when you use the YouTube player.
The Pause control is highlighted when using the keyboard with a YouTube embed
Again, you want to avoid autoplaying your video, especially if it has sound.
Media modules
The Content Slider shows off It has Auto Play on with the slide changing every 5 seconds by default. While Pause on hover is turned on too, it’s not foolproof, as not everyone can use a mouse!
It’s much better to turn off autoplay altogether and avoid problems caused by the slide movement being too fast or distracting.
Another thing to watch here is color contrast when you have text overlaid on your slides. If the background image is too light, your text won’t be readable.
The Gallery module makes use of WordPress’ native galleries. Images are set to appear in a lightbox by default. If you don’t need a lightbox, you can disable it.
For visitors using the Tab key of the keyboard to navigate, it may be hard for them to select which image to show in the lightbox with some browsers. It’s easier to see the outline of the current image in Chrome (below) than Firefox. You could enhance the outline with some custom CSS.
You will also want to make sure your images have appropriate alt text.
When you use the Icon module or Icon Group module, if your icon has a meaning, you need to let screen reader users know what it’s for.
In version 2.4 Beaver Builder added a Screen Reader Text field which you can use to label your icon.
If your icon is just for decoration, or the meaning is stated in text adjacent to it, you don’t need to do anything – the icon will be hidden for a screen reader user.
The Map module shows a Google Map in an iframe when you input an address. While the map’s accessibility is largely dependent on the Google embed, you can add a title to it in the settings. This is intended to tell anyone using a screen reader understand what the map represents.
If you want to know more about Google Maps and YouTube accessibility, read this post from Vision Australia: Embedded YouTube and Google Maps – are they accessible?
The Slideshow module is another slider variant. By default it autoplays, and the slides change using a Fade transition. Navigation controls (arrows) are on by default.
Unfortunately, the arrow controls can only be accessed by a mouse, so a sighted keyboard user has no control over the slideshow.
You are best turning off Auto Play and enabling the Control Bar Buttons option, as these are keyboard accessible.
It’s best not to put any essential content in your slideshow, as a screen reader user won’t be able to access it at all.
The Testimonials module isn’t that accessible when you add testimonials to it, as it is also set to autoplay initially, with a delay of only 4 seconds. To make the content readable, you should turn the autoplay option off.
Action modules
The Callout module and Call to Action module are very similar.
The Call to Action is most recognizable, with a prepopulated heading, tagline and button. The Callout is blank until you add your own content. That does make it slightly more customizable. You can use a link rather than a button, for example.
As we saw before, watch the color contrast on the button, and the text you use for your button or link.
The Contact Form module, Login Form module and Subscribe Form module all output forms.
Out of the box, these forms aren’t that accessible. One big problem is the placeholder text: it’s a faint gray that’s hard to see on the white background. Using placeholder text only is also suboptimal for people with memory problems, as they can easily forget what the field is for once they start typing in it.
Accessibility enhancements you can make are:
- All three modules: Change the button background and text colors.
- Contact Form module: Show the form labels only or labels plus placeholders. Unfortunately, this option isn’t available for the other forms yet.
There are some further issues with required fields and error messages on the forms, which lead me to recommend using a form plugin for your forms.
You can add a navigation menu in your pages with the Menu module, which is done well. Submenu items are keyboard accessible and users can see which one they have highlighted with the outline. You can also help your users see that there are submenus by enabling a Submenu icon, either an arrow or a plus sign.
The Search module is based on the native WordPress widget, and works okay.
Layout modules
The Accordion module works for keyboard and screen reader users. Its main flaw is the duplication of controls. There are 3 controls that open each accordion item, where there should really be one. This is still awaiting a fix.
The Pricing Table module reads all the content, but the buttons all say the same thing – “Get Started”. While you could edit this to include the plan name, it would make the buttons look kludgy.
It would be nice to have the option to add the plan name as screen reader text to the button text, so that it could be read out as “Get Started with the Silver Plan” and so on.
The Sidebar module outputs your sidebar content, so its accessibility depends on your WordPress widgets rather than Beaver Builder.
Using the Tabs module with a screen reader, a user is correctly told when a tab is expanded, collapsed or selected. The problem seems to be that the content of an expanded tab isn’t reliably read out.
Once the Operable tab is selected, there seems to be no way to read out the text underneath
Info modules
The Countdown module and Number Counter module display information that changes with time, so how is that conveyed to visually impaired users?
The Countdown module can be used to count down to an event.
For a screen reader user, the time remaining is read out, but not any subsequent change to it. If you had a limited-time offer on a site, or an auction that finished at a specific time, someone browsing the site using a screen reader might miss the final deadline.
One way the module could inform screen reader users of the countdown is to use an aria-live region. You can see an example of this on Paul J Adam’s ARIA Countdown Timer demo, where the updated time is read out every minute.
Because it animates fast, a screen reader will only read out the final value of the Number Counter. You can add some text before or after the number for context.
Posts modules
There are 3 modules for showcasing posts.
The Posts module shows posts off in either a masonry grid (the default), columns, a list or gallery. The masonry grid works fine, though technically the alt text for the image links should be the post title, not the image description itself. It would be even better if the featured image and post title were combined into a single link so there aren’t duplicate adjacent links.
Of the Posts module layouts, the least accessible is the Gallery, as the post titles aren’t visible unless you hover over the images with a mouse. Obviously, this doesn’t work on a mobile device either.
For a sighted keyboard user, it means choosing posts to read based on the look of the featured image alone – not easy!
As you might expect, the Posts Carousel module and Posts Slider module both show posts in a carousel. The main problem, yet again, is that with Auto Play on, the slides advance without warning.
A screen reader user will hear the post title and description of the first post read out, then when the carousel advances, they hear the same for the next post, and so on. This makes it difficult for them to focus on the content and select which post to read.
To make the Posts Carousel and Posts Slider more accessible, disable autoplay. You can then choose to have navigation arrows or dots.
Global settings
If you’ve tweaked a module and you want to use your custom settings in all subsequent instances, you can save it to reuse. If you save your module as a Global module, editing one instance of the module will change all instances.
What about the Beaver Builder Theme accessibility?
The Beaver Builder theme has some accessibility features built in. Some of them are:
- A skip to content link, which lets keyboard users skip over the navigation on each page.
- Dropdown menus which are accessible using the keyboard.
- Aria landmarks for elements on the page, which help blind users navigate more easily.
- Aria-labels on thumbnail images, comment count and social icons.
The skip link for the Beaver Builder theme
Q&A with Beaver Builder’s Development Manager
I reached out to Jamie VanRaalte from Beaver Builder and asked some questions about Beaver Builder accessibility.
Here are the questions and answers:
Q1. I did some accessibility testing using the Beaver Builder Pro plugin via your demo site in December 2019. Which version of the Beaver Builder Pro plugin was installed on the demo site at that time?
A1. I unfortunately do not have a way to know for certain but we tend to keep our demo site updated with BB so it would either be 2.2.6.3 or 2.3/2.3.0.1 at that time.
[Note that I tested this time with version 2.4.0.2.]
Q2. I’ve noted the accessibility improvements in version 2.4: have there been any others since then?
A2: Not yet but we have an accessibility fix for the Button Group module (which is a new module in 2.4) to add a group label option so that each group of buttons can have a different name.
Q3. What accessibility issues are you aware of that still exist that you would like to address? Are there any particular modules you’d like to improve?
A3: We have none currently listed (other than the one mentioned above) in our internal tracker but as they come up, they are given priority.
Q4. Have you done any testing with disabled user groups? (If not, have you thought of doing so?)
A4: Not to my knowledge but we’re always interested in ways we can actually see what issues people are experiencing with BB so I definitely would not rule it out.
Q5. Which accessibility issue has been the most challenging one to address?
A5: I don’t think any have been too difficult but one thing we take into consideration is if we need a new option to address an accessibility issue (like the button group module issue) or if we can use an existing option in the module to populate the data.
Q6. Gravity Forms have committed to making forms created by their plugin compliant with WCAG 2.1 AA: the Web Content Accessibility Guidelines, version 2.1, level AA. Would you like for Beaver Builder to meet the same standard?
A6: That’s great to hear about Gravity Forms. Beaver Builder has more moving parts with all of the modules we have and each module having its own settings but we definitely are committed to Accessibility.
Summing up – where does Beaver Builder accessibility need to go?
Beaver Builder accessibility is still a work in progress, though it’s good to know that it has improved over time and that the will is there to enhance it further.
The modules that need the most improvement are the accordion, slider-type modules and forms. These are the most complex modules in terms of user interaction and the most challenging to make accessible.
If you need this kind of interactivity, you might want to use third-party plugins rather than Beaver Builder.
If you find accessibility issues or have feature requests, the best thing to do is to raise them on the Beaver Builder Feature Requests and Roadmap board.
Keep reading the article at WPShout. The article was originally written by Claire Brotherton on 2020-10-22 12:50:51.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.