5 accessibility errors that affect 90% of websites
Accessibility errors prevent some Internet users from accessing certain elements of the web. Find out more about our solutions.
In 2023, a WebAIM study revealed that almost 97% of the most popular sites had at least one accessibility error, illustrating the lack of compliance with current standards. In France, compliance with the Référentiel Général d'Accessibilité pour les Administrations (RGAA), which stems from Law 2005-102, requires public websites to meet the requirements set by the World Wide Web Consortium (W3C) and specified in the Web Content Accessibility Guidelines (WCAG).
However, many developers and designers overlook these accessibility standards, in the mistaken belief that these adjustments offer few benefits. However, by integrating accessibility at the design stage, they are also optimising the user experience and improving the reach of their site. In this article, we will look at the 5 most common accessibility mistakes and provide you with practical solutions to make your website more accessible to everyone.
Insufficient colour contrast is one of the most widespread accessibility errors and represents an obstacle for users with visual impairments (visual impairment, colour blindness).
When the colour of the text is too close to that of the background, the content becomes difficult to read or even illegible for some users.
To check the contrast of your typography, you can use online tools that allow you to check the contrast ratio between the colour of the text and that of the background.
We recommend the Color Contrast Checker online tool. Many design editors, such as Figma and Adobe XD, offer plugins (like Stark) for checking the contrast in mock-ups.
If the contrast is low, it is advisable to modify the colours to achieve the recommended ratios:
Test the legibility of your content on different screens (computer, smartphone, tablet) and in different lighting conditions.
Alternative text (or "alt") is an attribute used to make images accessible to blind or partially-sighted people using screen readers. When properly filled in, it provides a brief description of the image.
Without alternative text, these users have no way of understanding what an image represents. This can hinder their browsing experience and their access to information.
There are 2 methods of identifying images without alt text:
The writing of alternative texts should not be haphazard. For each informative image, write an alt attribute with a concise description of what it represents. For example, for an image of a team meeting, an alt text such as "Team meeting around a table".
If an image is purely decorative and provides no additional information, the alt attribute should be present but empty (alt="").
Does your site comply with accessibility rules? Get a diagnosis and identify your UX UI optimisation options.
Form fields, links and buttons are key interactive elements of a website. Each of them requires labels or descriptions to be accessible to all users.
When a form field has no label, or when a link or button has no descriptive title, screen reader users can find themselves stuck without understanding the function or purpose of these elements.
Browser extensions such as WAVE or axe DevTools can analyse your web pages and flag up fields, links and buttons with missing labels or headings. The Screaming Frog crawl tool can also be configured to identify certain interactive elements without text or ARIA attributes.
To associate each field with a label, use the <label> element for each field by associating the for attribute of the label with the id attribute of the corresponding field. For example:
For forms requiring invisible labels (such as a search bar with a magnifying glass icon), add an aria-label attribute to provide an accessible label without displaying visible text. Example:
Each link and button should include a text describing its function or destination. For example, instead of a "Find out more" link, choose "Find out more about our services". For interactive elements represented solely by icons (such as social networking buttons), add an aria-label attribute describing their function.
Placeholders, although accepted by certain accessibility tools, are not a sufficient label. They disappear as soon as the user starts entering information, creating confusion, especially in complex forms. Always use a persistent label for each field.
A content structure with a clear title hierarchy improves accessibility for screen reader users and those who navigate using the keyboard.
When a site has disorganised title tags, navigation and understanding of the information on the page leads to a loss of reference points (for example, an <h2> used before an <h1>). This is detrimental to the user experience and, more generally, to natural referencing.
Browser extensions such as Website SEO Checker or Web Developer can be used to identify structural errors in your title tags. These tools flag up missing titles, incorrect order of title levels and misused title tags. If you want a global analysis of all the URLs on a site, we recommend using the Screaming Frog crawler.
Title tags should be used logically. The content must be organised in an orderly hierarchy.
Request a personalised quote for the creation of your website now and get a detailed cost estimate.
Keyboard navigation allows users to move around a site using the Tab key to reach interactive elements (links, buttons, forms) and the Enter key to activate these elements.
Some users cannot use a mouse and navigate using the keyboard. If an element is not accessible via the keyboard, it becomes difficult, if not impossible, for some users to use it.
