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
Tab / Shift-Tab keyboard keys to move between top items
Escape keyboard key when on top item exit the nav menu
Bottom / Up / Right / Left keyboard keys to move between sub links
Enter / Space keyboard keys to open link
Escape keyboard key on sub items give the focus on top item
Role 'menubar' for UL tag aria-orientation 'horizontal' or 'vertical' Role 'none' for LI tags Role' menuitem' for the links aria-haspopup true
aria-expanded to indicate whether the top or the sub menu is expanded or not
aria-label to identify the sub menu name
Maintain image ALT attributes
To do this in WordPress you must enter the ALT field of your images in the media librarie using meaningful text.
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.
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;
}
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.