How to Make Your Website Accessible With Elementor

Elementor can help you make your site more accessible to people with visual impairments. In this tutorial, we’ll show you a few examples of how easy this can be done.

The importance of website accessibility has been discussed for many years, but the information needed to make a site accessible was often difficult to understand, or difficult to implement. That is changing somewhat, although there is still a fair amount of confusion, and quite a few impediments to implementing code changes into many sites, scripts, and plugins.

Luckily, people are leading the way in helping us understand the importance, and giving us the information we need to make changes to our own sites.

Elementor can help you make your site more accessible. In this tutorial, we’ll show you a few examples of how easy this can be.

We’ll start by creating a couple of design elements on a page, including a hero block and a sign-up form.

Using the advice given on “ Improving Accessibility of Your WordPress Website”, we’ll fine-tune our page using Elementor and Elementor Pro.

Font Size and Font Family

Our Hero Block is the part we’ll begin with. This is what it looks like before we begin our accessibility changes.

We’ll begin by focusing on font family and font size, ensuring the text is always readable. Of course, using your theme’s options via the WordPress customizer is a great first step. Set your default font family and sizes for body text, Hx tags, etc. there, and you’ll have less to worry about once you start designing your pages. But if you need to change the typography on any Elementor-designed page, of course, it is simple to do so.

Our default font size in the customizer is set at a comfortable, easy-to-read 16px, which corresponds to the default size that most browsers use. For the TRAVEL tag, the font size is set to 12px, which can be difficult for many users to read.

Let’s change it to .9 REM so that it is slightly smaller than default, but still very readable. Elementor makes it easy to change the size. Simply go to the widget’s Style > Typography settings, click on REM, and either use the slider or enter .9.

Why use REMs instead of Pixels for font size? Accessibility is the key reason here. As we’ve mentioned, most browsers use 16px as the default text size, but a user can, and often do, change their default browser text size to be something different. If a user sets the default size at 20px, all text should scale upwards accordingly. If we design sites using pixels, we take away the ability for that user to have control over the size of the text, making our sites less accessible. Instead of setting your heading at 32px, set it to 2REM instead. This means the heading will be 2x larger than the base font size (16px normally, or in the case of our user who changed her default size to 20px, our heading would now be the equivalent of 40px). While we might wish for it to be exactly the size we want, it is the user’s right to see our text at a size that is readable to her. Let’s not take that choice away from her.

Tip: There are a number of online calculators to help convert PX to REM. My favorite is OffRoadCode’s REM Calculator. Simply input your base font size in PX (for our example, that’s the 16px we set in Customizer as the default size). Then enter a list of sizes in PX that you’d like to convert to REM, separated by commas (eg, 16,18,20,22,24,27,33,36,65). Click the Calculate button and a list will be generated showing the REM size that is comparable to each of the PX sizes you’ve requested.

Next, change any other fonts to corresponding REM sizes throughout the page, as needed.

Proper Color Contrast

Now we’ll focus on making sure there is sufficient contrast between background and foreground colors. The text within our hero’s description is currently very difficult to read because there is not enough contrast between the text color and the background image colors.

This is primarily because our text was not at full opacity. Merely increasing the opacity to 1 instead of 0.49 brings the contrast level to a PASS grade in accordance with the AA specs.

We can also pass the AAA specs by darkening the background filter slightly.

The final result is now very readable:

Image ALT Attributes

But what about that background image? We need to make sure it has an image ALT attribute, so screen readers can describe the image accurately to our visually impaired readers. Our image didn’t originally have an ALT attribute defined in the media library.

To solve this, simply click the image in the section’s Style tab, and add an ALT attribute in the media window for the image.

ARIA-Labels

Our hero section has a Read More button. Let’s enable our visually impaired users the opportunity to have some context added to that button, by providing an ARIA Label to the link. With Elementor Pro’s Custom Attributes feature, this is easy to do.

Edit the Button’s Advanced > Attributes, and enter something like:

aria-label|Read more about 17 travel inventions we need right now

Notice that we’ve entered our data using the format key|value. The key, in this case, is “aria-label” and the value of that key is “Read more about 17 travel inventions we need right now”.

The result is code that is added to the HTML, like this:

Accessible Forms

Our subscription form needs similar treatment as our Hero block. We’ve adjusted all the text to ensure it has readable fonts, using REM sizes, with proper color contrast.

Forms need to handle TAB Order appropriately. Luckily, Elementor Pro’s Form Widget takes care of this by default. Each successive press of the TAB key brings us to the next field automatically, and then to the Submit button last. Pressing SHIFT-TAB through the fields works backwards as expected as well.

HTML5 Semantic Elements

Elementor also makes it very easy to use HTML5 semantic elements such as <header>, <footer>, <article>, <aside>, <nav>, <main>, and <section> in place of <div>. Just look for the HTML Tag option in either the Section > Layout or Column > Layout, and choose whichever you need.

Making “All The Things” Accessible

Of course, we’ve only shown a small portion of one web page. There are many other elements to consider when making a website accessible, as mentioned in the Improving Accessibility of Your WordPress Website article. Each website is different, so the approach taken to make them accessible may differ. But by implementing a well-thought-out process, making strategic use of your theme’s options, and utilizing Elementor’s ability to have fine-grain control over page elements, you’ll go a long way towards making your site accessible to all users.

Want To Give Users Even More Options?

Elementor has you covered there as well. The Elementor / Pojo team created the popular (and free) One Click Accessibility plugin.

One Click Accessibility plugin adds a number of helpful accessibility features with the minimum amount of setup and without the need for expert knowledge.

Accessibility Toolbar:

A small icon on the left or right side of a page allows a user to click it and open a toolbar that allows the user to:

  • Resize fonts (increase/decrease)
  • Change page to Grayscale
  • Show page with Negative Contrast
  • Show page with High Contrast
  • Show page with a Light Background
  • Change Links to have Underline
  • Change font to a Readable Font
  • Link to Sitemap / Feedback / Help pages

Accessibility Features:

  • Enable Skip to Content
  • Add outline focus for focusable elements
  • Remove the target attribute from links
  • Add landmark roles to all links
  • Customizer for style adjustment

You can enable or disable each of the options and make appropriate setting changes for each. This plugin can be used whether or not you’ve already made changes to your site to make it more accessible.

General Settings

This panel controls the plugin’s main functionalities. For example, the Add Outline Focus, which adds a visible border around an area that is currently in focus.

Toolbar Settings

This set of controls determines which settings will appear in the toolbar.

Customize

This panel sets the position and visibility of the toolbar, as it is seen by the user.

What Does The User See?

As you can see, just by adding the plugin and adjusting a few settings, the user has many accessible options at their fingertips, all with only one click of the Accessibility Toolbar Icon.

Web Accessibility is a complex subject. No short tutorial can cover everything you need to know to make your site accessible, but we hope these instructions help you take the first steps in doing so.

Liked This Article?

We have a lot more where that came from! Join 760,658 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

About the Author

Donna Cavalier
Donna Cavalier
Donna Cavalier is a novelist and WordPress specialist, who has been in the website design and online marketing industries since 2003.

Share on

Share on facebook
Share on google
Share on twitter
Share on linkedin

Comments

21 Responses

  1. Hi Ben.

    This is a little off topic and a total newbie question –

    How do I transfer the entire content/style/format/layout/template of a completed website that is to be created using Astra and Elementor Pro?

    I basically want to ‘duplicate it’ in its entirety for reuse on another domain.…..and then simply swap out the images and content.

      1. Thanks Sean.

        I don’t have a facebook account and don’t plan on ever creating one. Thought this would be the best place to get the answer.

  2. Thank you very much. We’ve been working on adding accessibility through another plugin for WordPress called Voice Dialog Navigation.

    It adds a microphone to the site which enables a smart assistant. It can talk back to the site visitor, navigate them to pages, run site search, and get custom API calls added for brand specific functions the website needs.

    We’d love to partner with Elementor to learn how we can make our plugin appear as a widget. Right now it sticks to the search bar and our upcoming release adds a floating microphone. I think some designers will want more control where having a place able widget in Elementor would be helpful.

  3. We just installed your accessibility plugin and it’s pretty slick! Thanks! However, it is not remembering the settings in a cookie or localStorage. Anyone else having issues with this?

  4. What about accessibility for the backend? I have a new client who’s visually impaired but wants to be able to publish blog posts and make page edits on her own. Is there a plugin to make the Elementor backend accessible?

  5. Hi! I really appreciate Elementor’s prioritizing Web Accessibility.

    I’ve been testing my websites via https://wave.webaim.org/ and I get a contrast error when I use white text over a background similar to the travel example. Someone I met at a WP meetup said that accessibility devices sometimes drop out the photo used and if the fall-back color is not specified, it may default to white, and then the white-on-white would still be in violation of contrast requirements.

    In the WAVE tool, the error comes with: “Does not account for background images, gradients, etc. Ensure fall-back contrast is defined in case images or CSS3 do not display.” For photos, I found that by using Elementor Pro’s custom CSS and setting a darker color for the background-color seems to work for the WAVE tool (although haven’t used other tools to test): selector {background-color: #000000;}

    I use a fair amount of white text over deep shades of gradients for background colors, and it seems that the WAVE tool works the same way (and I assume they would set that up because the accessibility devices would behave the same way), dropping the gradient to a default white (#FFFFFF). However, when I try to change the background color, it doesn’t seem to have the same effect. Is there a way to set the fallback color to a different shade than the background gradients? Thanks!

    I’m wondering if someone might know where we may be able to set the fall-back color for gradient backgrounds? Thanks!

  6. This is GREAT stuff. Much needed for every website design! I used to hang out with a visually impaired person and it was hard for him to interact with a lot of websites. The W3C has some GREAT info on accessibility to look into if you want to dive deeper into it.

  7. Pleased to see your article Donna,
    There sure needs to be more education in this area.
    I have a physical disability and run a small design studio. I use a plugin called USERWAY on my sites and it works well. https://userway.org/
    I offer to install it for every client but only about 20% want it, disappointing.

    Wanted to mention my appreciation to Elementor about the feature to SHOW handles in the settings options. When they initially removed this feature I found it harder to do my work as I type with only 3 fingers and right clicking requires both hands. I wrote to tell them and there was lots of discussion in the FBgroup. In conclusion, they brought it back as optional – I really appreciated that and find using Elementor easy because of that feature. Nice to be heard.

  8. Would love to see more control over the One Click Accessibility plugin which isn’t very accessible itself (small text for example). It’s a great asset but would do with some more work.

  9. Good information, but page is not accessible to keyboard only users or screen readers. No skiplinks, upper nav doesn’t open with keyboard only or screen reader. Form missing field attributes. Several areas of low-contrast and reflow with zooming text doesn’t flow for low vision users.

  10. If elementor can perform the functionality of website accessibility as mentioned above then I’d definitely give it a try and see how it improves the current standards that I have on my wp websites. More control would surely lead to more accessibility.

  11. It is disappointing that a developer must buy elementor pro in order to use advanced attributes to describe buttons and to create tab order in forms.
    I totally understand that it takes money to continue developing. But accessibility for all should be free and if a dev is getting charged for it, then maybe they won’t use it.

  12. right good post. In particular, the color contrasts are underestimated so often, the visitor decides in a split second, whether the site addresses him and does not jump off immediately.

Leave a Reply

Your email address will not be published. Required fields are marked *

Want to learn how to build better websites?

Join 760,658 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.