Use Elementor to Make Your Website Accessible

To make your website more accessible to people with visual impairments, you can use the features of Elementor and the tips in this tutorial to update your site with ease! 

While website accessibility has been an important part of design for years, clear information about what truly constitutes accessibility has been notoriously difficult to understand, and the changes themselves have been historically difficult to implement. Nowadays, improvements in web design tools make visual impairment accessibility easier, but there can still be roadblocks with certain site builders, plugins, and problematic sections of code. 

Fortunately, Elementor can help! In fact, this tutorial will provide several step by step examples that you can implement on your own site right away. 

Font Family and Size

First, let’s take a look at the font size and font family of your site. Using your overall theme settings is a great place to start, but you can also change the typography of specific page elements on any Elementor-designed pages. In the theme preferences, you can set default fonts and sizes that will display across the site. Some design elements, however, may also include smaller font sizes that need to be enlarged for easier readability. 

When editing with Elementor, go to the widget’s Style > Typography settings to adjust the size of a particular section of text. When you open the settings, select REM (as opposed to PX or EM). Choosing to adjust the font size with REM settings will make the font size scale with the default settings of the browser. Most browsers use 16px as a font size default, but those with visual impairments may use browsers with default settings set much higher. 

For this example, we’re setting our font size to .9REM, which can be adjusted with the slider in the widget. This will display the font element at 90% of the default, making it smaller than other fonts, but still readable. If you want an element of typography to display much larger, you can set it, for example, to 2REM (which would display at 32px if the default setting is set to 16px).

For accessibility, REM settings allow users to be in control of how fonts display by way of their browser settings, and if they want fonts to be displayed larger than other people, the REM setting will allow fonts to scale accordingly. 

Color and Contrast

The color of text (and its relationship to the color of the background image) also impact readability. To improve accessibility, first make sure your text’s opacity is set to full (1). In the Background Overlay widget, you can also darken the background image to make your text stand out even further. 

ALT Attributes

To ensure that your website is accessible to those with visual impairments, especially those using screen readers, all images need to have ALT attributes (sometimes called ALT tags). This can be defined in the WordPress media library, accessible through the WordPress Dashboard or right in the Elementor widget.

Click on your image in the section’s Style tab, and you’ll see where you can enter ALT attributes (as well as an image title, caption, etc.). ALT attributes should be descriptive enough for a visually impaired person using a screen reader to understand what’s in the image without seeing it. 

Not only do ALT attributes help make your site more accessible, they’re also good for SEO! 

ARIA-Labels

If your Elementor-designed page has buttons, ARIA-labels are another way you can make the site more accessible for visually impaired visitors. The ARIA-label provides context to the button by attaching additional information in the code that describes the purpose of the button. 

For example, if you have a “Read More” button that takes visitors to page of subscription options, you could add “aria-label|Read more about ABC Company’s subscription programs.”

With Elementor Pro’s Custom Attributes feature, you simply edit the buttons Advanced > Attributes field and add your ARIA-label.

Forms

To make sure any forms on your site are as accessible as primary copy, hero images, etc., take the same steps to set fonts to scale with REM sizing, adjust color and contrast for readability, and add ARIA-labels for buttons.

Since many visually impaired users are navigating the site with a keyboard (instead of a mouse or trackpad), it’s also good to make sure that they can use the “tab” key to move through form fields. Elementor Pro’s Form Widget handles this by default!

HTML Tags

With Elementor, you can easily label sections of a page with HTML5 semantic elements. Find the “HTML Tag” option in Section > Layout or Column > Layout and add HTML tags from the dropdown menu. This helps screen readers identify sections of the site, and helps visually impaired users know which part of the page they’re interacting with. 

Further Accessibility

These are only a few of the ways you can use Elementor to improve your website’s accessibility. Of course every site is different, and that means the specific actions you can take to improve accessibility will vary. Fortunately, Elementor’s easy-to-navigate settings give you plenty of control! Take the time to consider how your site could be updated to make it easier for everyone to use, implement a plan, and update each page of the site accordingly. 

Accessibility Plugins

Last but certainly not least, the One Click Accessibility plugin from Elementor and Pojo adds a fantastic toolbar that gives you users control over numerous accessibility features right on the page! 

Features of the One Click Accessibility plugin include:

• Change background colors
• Resize fonts
• Link to sitemap
• Change contrast
• Underline links
• “Skip to Content”
• Change to “Readable Font”
• Add outline focus to focusable elements
• And more! 

In the plugin’s settings, each feature is easily enabled or disabled, including customization options for universal settings and the toolbar itself. 

Accessibility is critically important, but remains elusive and complex. There’s no way to encompass every way a site can be made more accessible (both for the visually impaired and individuals with other disabilities), but these tips are a great place to start!