Make your site more accessible

Make your website more inclusive for all users by applying the rules set out by WCAG and ADA.
Web accessibility or a11y is the practice of ensuring elements of a web page are compatible for interaction and access by people with disabilities.
EAC currently partly implements the best practices guide so that users have access to all of the components of the page with the keyboard or screen reader.

Active the experiment Accessibility Improvements

Elementor has online help you can consult to enable this option.

Font and color contrast

The Elementor team has produced a web page where you will find best practices regarding the implementation of Fonts and color contrast.

Keyboard-only users

Not everyone uses a mouse, trackpad, or touchscreen to interact with sites and to visualize interactions with focusable elements, a focus indicator (outline) surrounds the element accessed by the keyboard.
For users who cannot use a mouse to click on links or other elements, all interactive components can be activated as appropriate with the Enter key.
Space key activation will be implemented gradually in future versions.

Navigation menu

Maintain image ALT attributes

The alt attribute is alternative text that is not displayed only when – for example – your image is corrupted or the path to that image has changed and is no longer available. It’s also important because it contains information for screen readers as well as SEO.

To do this in WordPress you must enter the ALT field of your images in the media librarie using meaningful text.
Wordpress alternative text image
Media library Alternative text field

Clarify context by providing ARIA attributes

Accessible Rich Internet Applications (ARIA) is a set of attributes that define how to make web content and applications accessible.
For sighted people the visual appearance of an element on an HTML page provides enough information to determine the use of that element as a link, button or form…

For certain situations an element may have an ‘aria-label’ attribute to clarify the behavior or actions rendered.
The main difference between buttons and links is that links go somewhere (Page or Section) and a button does something (Ex: submit form).

For example, in an post grid we often find buttons with the label ‘Read more’!! which a priori is not explicit enough to inform a visually impaired person or on the other hand a link which opens the page in another tab which can certainly disorient these same people.
A button which opens a modal box to which we must add the attributes ‘aria-label’ to explain its purpose, ‘aria-expanded’ to indicate whether the modal box is open/closed as well as other attributes which will be read and explained by a screen reader.

These are the essential reasons which will, on the one hand, make your site inclusive and increase your audience.

Post grids and adjacent links

Items should not present more than one link to the same destination next to each other.
Users who navigate through multiple links that have the same destination will have a bad experience.

Now for all grid components you can position the link to the post either on the image, the title or the ‘Read more’ button.
As you can see in the image an outline surrounds the active link (Button) of a grid element.

In addition you can move at any time to the first or last focusable element of the grid for easier navigation with the keyboard TAB key and quick exit from the grid by using Escape key.

Accessibility adjacent links
Only one link for each item grid

In general, it is best not to open links in new windows or tabs because they can be disorienting for people, especially those who have difficulty perceiving visual content.

To comply with this we have removed all link attributes that automatically opened to a new tab.

But if you still want to open the link in a new tab, you need to indicate this to the screen reader by adding an explicit “aria-label” to the link, as shown in the image.

You can also add an ‘External link’ dashicon with this CSS.

/* Ex: for an Elementor title */
selector .elementor-heading-title {
    width: fit-content;
    display: block;
    margin-left: auto;
    margin-right: auto;

selector a[target="_blank"] {
    display: flex;
    align-items: center;

selector a[target="_blank"]::after {
  content: '\f504';
  font-family: 'dashicons';
  display: inline-block;
  margin-left: 0.2em;
  font-size: 1.4rem;
Open link in a new tab using aria-label
Add the aria-label attribute with a link

Use Custom Attributes feature

EAC implements feature to add your own attributes that can, for example, be reused by a piece of Javascript code or add attributes ‘role or aria-label’ for screen readers.

Check if your website is compliant

You can use this Online tool to check your website and this website to help you get started with the tool.

Leave a Comment