Simple Steps to Improve Accessibility in Elementor

About the meetup

At the Elementor UK meetup on 25 September 2024, we talked about web accessibility – why it is important and how to improve it when using Elementor to build websites. Nowadays, websites are an essential part of life. We use them to shop for groceries, manage our banking, book restaurant tables, and buy flight tickets. That’s why it’s important to make sure that everyone can use them, whether they have a disability or not.

Understanding Web Accessibility

Web accessibility means designing websites that everyone can use. In the UK, around 16 million people were reported to have a disability in 2021/22. Of these, about 9 million needed help with accessibility. This includes people with vision impairments, mobility difficulties, learning difficulties or who are deaf or hard of hearing. Worldwide, it’s estimated that 1.3 billion people (1 in 6) have significant disabilities.

The goal of web accessibility is to ensure that all users, regardless of ability, can perceive, understand, navigate, and interact with web content.

Types of disabilities to consider.

1. Visual: Including blindness, low vision, and colour blindness
2. Auditory: Deafness and hard of hearing
3. Motor: Conditions limiting mobility or dexterity
4. Cognitive: Learning disabilities, attention deficit disorders, and dyslexia
5. Seizure and Vestibular Disorders: Such as photosensitive epilepsy

It’s important to remember that not all disabilities are permanent. Some may be temporary. They can affect your senses for a short time. This might happen because of a bad headache, side effects from medication, or an accident.

Other disabilities are situational. They happen when a user is in a situation that impairs their senses. Examples include pushing a stroller or shopping cart, sitting in a noisy cafe, reading a screen in bright sunlight, or being in a moving vehicle.

No matter what industry you are in, your visitors may have disabilities. Even visitors without disabilities visitors might have temporary or situational disabilities sometimes.

The core principles of WCAG

The Web Content Accessibility Guidelines (WCAG) are based on four main principles (shortened to POUR).

Perceivable

Information and user interface (UI) components should be presented in a way that everyone can recognise and perceive, regardless of their disabilities.

Key points:

1. Text Alternatives: Provide text alternatives for non-text content. For example, alt text for images, transcripts for audio, and captions for videos.
2. Time-based Media: Provide alternatives for time-based media.
3. Adaptable: Create content that can be presented in different ways without losing information or structure. For example, responsive design, and proper use of semantic HTML.
4. Distinguishable: Make it easy for users to see and hear content. For example, good colour contrast, the ability to resize text, and clear audio.

Operable

Content should be presented in a way that allows users to navigate and interact with it effectively, regardless of their disabilities.

As a visual user, if I can see a link on a page but can’t click on it, what good is that to me?

Key points:

1. Keyboard Accessible: All functions should be available from a keyboard. For example, navigable dropdown menus and functional form controls.
2. Enough Time: Give users enough time to read and use content. For example: adjustable time limits, and pausable content.
3. Seizures and Physical Reactions: Don’t design content in a way that could cause seizures or physical reactions. For example: avoid rapid flashing effects.
4. Navigable: Provide ways to help users navigate, find content, and understand where they are. For example, clear page titles, descriptive link text, and consistent navigation.
5. Input Modalities: Make it easier for users to operate functions through different inputs besides A keyboard. For example, touch-friendly buttons and voice control compatibility.

Understandable

Content should be presented in a way that is easy to understand, regardless of the user’s cognitive abilities, language, or reading level.

Key points:

1. Readable: Make text content readable and understandable, avoiding complex language or jargon. For example, using clear language, and defining unusual words.
2. Consistent Language and Terminology: Using consistent language and terminology throughout the content helps users understand the context and relationships between different elements.
3. Predictable: Make web pages appear and operate in predictable ways. For example, consistent navigation, and predictable focus order.
4. Meaningful Links: Links should have descriptive text that accurately reflects the content they link to.
5. Input Assistance: Help users avoid and correct mistakes. For example, clear error messages and suggestions for error correction.
6. Cultural Sensitivity: Content should be culturally sensitive and avoid offensive or discriminatory language.

Robust

Content should be presented in a way that is compatible with future technologies, including assistive technologies, and changes in user agents (like browsers).

Key points:

• Compatible: Maximize compatibility with current and future user agents, including assistive technologies. For example, valid HTML, and proper use of ARIA attributes.
• Parsing: Ensure content can be parsed unambiguously. For example, well-formed markup and unique IDs.
• Name, Role, Value: For all user interface components, the name and role can be programmatically determined. For example, proper labelling of form controls, and use of semantic HTML.

Some ways to improve accessibility when building with Elementor

During Global Accessibility Awareness Day (GAAD) 2024, Miriam Schwab, the Head of WordPress Relations at Elementor, reaffirmed Elementor’s commitment to accessibility. With over 16 million websites powered by Elementor, the platform has been working to improve accessibility features over time.

Elementor’s current improvements

Some of the things they’ve done include:

1. Switching to the container feature to improve DOM output and allow for a better responsive design.
2. Introducing nested elements feature with improved HTML semantic element for their Menu, Accordion and Tabs widgets.
3. Providing the ability to add custom attributes to links
4. Introducing the off-canvas widget which is reported to be a more accessible alternative to using popups, and many other improvements.
5. Added skip links to the theme. However, there are some issues with Elementor skip links when you build a template using the Theme Builder.

If you notice any bugs or have any feature requests that can further improve the accessibility of their widgets, please feel free to reach out to Elementor on GitHub

Things you can do to improve accessibility

Here are some simple steps to enhance accessibility in your Elementor websites:

Use proper regions and semantic HTML

Landmark regions provide a powerful way to identify the organisation and structure of a web page. By classifying and labelling sections of a page, they enable structural information that is conveyed visually through layout to be represented programmatically.

Most pages have a visual structure with a block of content (typically logo, navigation, search, etc.) at the top, a main content area, a footer, and sometimes sidebars with related information. Page regions such as <header>, <nav>, <main>, <aside>, and <footer> programmatically define the essential semantic structure of a page. Screen reader users can easily navigate among these major page areas. 

What we can do as web developers using Elementor is to define those landmark regions when creating our templates using the Elementor Theme Builder. By default, elementor sets everything as divs, so make sure you open the template settings.

Use descriptive text for links and buttons

Considering the four principles of WCAG, wherever possible, rather than using generic text like “Click here” for your buttons, consider using a more descriptive text like “read the WebAIM Million Report.” Generally, in a blog loop card, we use the heading as the linked text to provide more meaning. If you have read more text that can’t use more descriptive text, then use an aria-label for example: <a aria-label="read more about WebAIM Million Report">Read more</a>

Maintain proper heading structure

Heading levels should not be chosen based on how big they look but on the logical flow of the page. Ensure that you don’t skip heading levels. Don’t jump from a h1 to a h4. Once you start the h1, it must go in order h2, h3, etc.

Add alt text to images

Visual users can see the image and hopefully extract information about the image, but a visually impaired user may not have that luxury. Provide descriptive alt text for images, so screen readers can convey the image’s meaning to visually impaired users via a screen reader software like NVDA or VoiceOver.

Ensure good colour contrast for all your images

High contrast between text and background helps everyone, not just those with visual impairments. If the text is easy to read, your readers can focus their energy on understanding the content provided, rather than struggling to see.

Useful Accessibility Tools

1. Colour Contrast Checkers: WebAIM Contrast Checker, TPGI Contrast Checker
2. Heading Level Checker: HeadingsMap
3. General Accessibility Checks: Accessibility Checker by EqualizeDigital, AxeDevTools
4. Screen Readers: NVDA, VoiceOver, JAWS, Narrator

Conclusion

Implementing accessibility in your Elementor websites not only ensures compliance with guidelines but also improves the user experience for everyone. By following these simple steps and utilizing the available tools, you can make significant strides in creating more inclusive and accessible websites.

For more information, check out resources like The Admin Bar Accessibility Weekly, Anne-Mieke Bovelett’s Digital Accessibility Whitepaper, and the WCAG 2.2 Guidelines.

Remember, accessibility is an ongoing process. Start with these steps, and continue to learn and improve your websites to make the web a more inclusive place for all users.