Fixing common accessibility issues

Accessible websites allow more people to find, understand and use information, including people who use screen readers, keyboards, magnification or other assistive technologies.

Elementor provides tools for building accessible pages, but the choices you make when adding content and configuring elements still matter. The issues below are common on Elementor pages and can often be corrected without custom code.

Images missing alternative text

• The issue: An informative image has no alternative text, contains its file name as alternative text or has a description that does not communicate its purpose.
• How to fix it: Add alternative text that communicates what a user would miss if the image were unavailable.
• Resource: How to make sure your web page is accessible

Text has insufficient contrast

• The issue: Text, links or buttons are difficult to distinguish from their background.
• How to fix it: Use approved global colours whenever possible and check custom colour combinations for sufficient contrast.
• Resource: How to make sure your web page is accessible

Headings do not reflect the page structure

• The issue: Heading levels are chosen for their appearance, heading levels are skipped or ordinary text is styled to look like a heading.
• How to fix it: Use headings to create a logical page structure and use approved styles to control their appearance. Check that headings describe the content they introduce and remain in a logical order throughout the page.
• Resource: How to use headings, lists and plain language for readability

Links and buttons are unclear

• The issue: Links or buttons use vague labels such as “click here”, “learn more” or “read more”, or an icon-only link does not have an accessible name.
• How to fix it: Use concise text that describes the destination or action.
• Resource: How to make sure your web page is accessible

Interactive content cannot be used with a keyboard

• The issue: A menu, accordion, tab, popup, carousel, form or other element works with a mouse but cannot be reached or operated using a keyboard.
• How to fix it: Preview the page and test all interactive content without using a mouse.
• Resource: Making headings and page structure that supports screen readers

Motion or autoplay is difficult to control

• The issue: Carousels advance automatically, media plays without user input or animation makes content difficult to read or follow.
• How to fix it: Use animation and motion sparingly.
  • Turn off unnecessary autoplay
  • Provide controls for moving content
  • Do not autoplay audio
  • Provide captions for video and equivalent text for important audio content
  • Avoid flashing or rapid movement
  • Do not make essential information dependent on a moving carousel or animation that users may miss

The visual and reading order do not match

• The issue: Content appears in one order visually but is arranged differently in the underlying page structure.
• How to fix it: Arrange containers and widgets in the order the content should be read.
• Resource: Making headings and page structure that support screen readers

Formatting is used instead of meaningful structure

• The issue: Spaces, line breaks, empty widgets, manually typed bullets or other visual formatting are used to organize content.
• How to fix it: Use the appropriate element or Text Editor controls for the type of content.
  • Use headings for sections
  • Use bulleted or numbered lists for related items
  • Use containers, gaps and padding for layout and spacing
  • Use tables only for information with meaningful row and column relationships
  • Avoid images of text

Linked files and media are not accessible

• The issue: A page links to an inaccessible PDF or document, a video without captions or audio without an accessible text equivalent.
• How to fix it: Make important information available as accessible web content whenever practical and check linked resources before publishing them.
  • Use descriptive file links that identify the document type when useful
  • Check documents for accessible headings, reading order, alternative text and tables
  • Do not use a scanned image as the only version of a document
  • Provide accurate captions for video
  • Provide an appropriate text alternative for important audio content