The compliance of a site to make it accessible has multiple advantages. Not only can you reach a larger audience, but you also boost your visibility on Google. In this article, we suggest you understand what web accessibility is, the best practices to implement, how to check the accessibility of your site and discover the SEO benefits that result from its implementation.
What is web accessibility?
The principle of web accessibility implies that tools and technologies are developed in such a way that people with disabilities can use them.
Definition of accessibility
An accessible website is a site whose content is accessible to all: able-bodied, senior citizens and people with disabilities. Hearing and visual impairment, cognitive impairment or mobility, so many disabilities that today affect nearly 18% of the population who, without specific consideration, are deprived of optimal access to the web.
An accessible site must therefore be:
- noticeable: accentuate the differentiation of elements between them (texts / images / buttons) and provide a textual alternative to images;
- usable : the content must be accessible both with a mouse or similar (trackpad for example) but also with the keyboard via tab navigation;
- understandable: the texts must be legible at all times;
- robust : the content must be accessible regardless of the medium on which it is consulted.
Who are the people targeted by digital accessibility?
It should be borne in mind that accessibility is not only a story of disability: accessibility concerns all impairments, whether temporary or not, also concerns cognitive and neurological disabilities, but also valid in some cases. uses (mobile, laptop without a mouse, reduced visibility, etc.)
International standards for web accessibility
The W3C set up a think tank (the Web Accessibility Initiative or WAI) which laid the foundations of web accessibility and the first recommendations:
WCAG: Web Content Accessibility Guidelines (https://www.w3.org/Translations/WCAG20-en/The Web Content Accessibility Guidelines (WCAG) are developed through W3C in cooperation with individuals and organizations around the world. The goal is to provide a single, shared standard for web content accessibility that meets the needs of individuals, organizations and governments at an international level.
WCAG documents explain how to make web content more accessible to people with disabilities. Web “content” generally refers to information on a web page or web application, including natural information such as text, images and sounds but also code or markup that defines structure, presentation, and so on.
WAI ARIA: Accessible Rich Internet Applications (https://www.w3.org/TR/wai-aria/). WAI-ARIA is a technical specification that provides a framework for improving the accessibility and interoperability of web content and applications. This document is primarily intended for developers who create custom widgets and other web application components.
The objectives of this specification are:
- Expand the accessibility information that can be provided by the author;
- require full keyboard support that can be implemented independently of the device, for example, by phones, portable devices, e-book readers and televisions;
- improve the accessibility of dynamic content generated by scripts; and ensure interoperability with assistive technologies.
HTML5-ARIA accessibility criteria : http://www.accessiweb.org/
Why make your site accessible?
“Making the web accessible is a benefit for Internet users, businesses and society. International web standards define what is necessary for accessibility. ”
Enabling an inclusive web
By working on the subject, we improve the accessibility of several handicaps simultaneously. For example, allowing keyboard navigation helps the blind, people with motor disabilities preventing or limiting the use of a mouse, etc. But it also makes navigation easier for laptop computer users. The goal is to improve the overall user experience (“Hello Core Web vitals”): for example, PDF seems to be a practical format, but which remains inaccessible to text-to-speech software. Integrating the content of a PDF in html (while keeping it accessible for download) ultimately makes it accessible to everyone and on all media.
- Provide alternative text for all visual elements (images, videos etc …) and all audio content
- Enter the alt tag on all img tags
- Allow keyboard navigation
- Use a sans serif font, easier to read for dyslexics for example
- Allow increasing text size
- Use a strong contrast with the text and favor dark text on a light background
- Do not use justified text which increases spaces and decreases readability
- Paradoxically, the bolding limits accessibility by bringing the letters closer together
- Make sure that the rendering is optimal on all platforms (mobile, pc, reader etc …)
- Suggest a label on the form fields
- Respect the Hn markings
- Respect the HTML5 structure markup (header, footer, nav, article etc …)
- Use tags for what they are: HTML is used for the structure and CSS for the form (and not the other way around as we often see
How to assess the accessibility of your site?
Difficult to be exhaustive on the subject, but here are some tools that will allow you to perform the first accessibility tests of your site.
Accessibility testing tools
For an overview:
Super fast to give you an overview of your site and its level of compliance
Check readability by comparing background and foreground colors
Verify compliance with WCAG regulations
A web developer tools to simulate visual impairments
A WordPress plugin that allows you to control accessibility elements yourself
Accessibility and SEO
A priori perceived as incompatible or even a brake on SEO, it turns out that implementing actions aimed at the accessibility of a site can improve your SEO
The benefits for your SEO
Provide a clean HTML code, respect the Hn structure, fill in its alt tags…. Are we in full SEO recommendation or in brief to make our site accessible? The 2 my captain! The 2 approaches overlap closely …
A visually impaired screen reader unwinds the HTML code and interprets it; just like an indexing robot. Google is more and more efficient in its interpretation of content but despite everything, it remains:
- partly blind
- deaf (except on his video platform)
- does not perceive colors
- needs help understanding the pictures
- and hassle with CSS and JS
In short, he has the handicaps that justify making his job easier. Making your site accessible ultimately comes down to optimizing your SEO! But is this really still the case?
The differences between accessibility and SEO
SEO is not just about technical optimization and it is on the semantic part that accessibility and SEO will diverge slightly.
By aiming for high accessibility, a writer will tend, for example, to go straight to the point in his Hn titles since the theme of the page is implicit. We will therefore find titles on this model:
Differences with the laser printer
Conversely, an SEO-focused copywriter is more likely to provide this kind of title:
Inkjet printer: What’s the point?
Differences Between Inkjet Printer and Laser Printer
Images and alt tags
With a view to accessibility and simplicity, a succession of similar images (landscapes, product photos taken from different angles, etc.) will have only one alt tag entered for the first image.
For SEO an alt tag might look like “Inkjet or laser printer [Marque]”
Conversely, an SEO will tend to see each image as an additional opportunity to place keywords and fill each alt tag with micro variations.
whereas for web accessibility, an alt tag would look like “comparative image of laser and inkjet printer”.
“Bridges but no amalgamation”
An “accessible” page must logically be well indexed and benefit from positive indicators in the eyes of Google; however, it will certainly not have exactly the level of optimization from an SEO point of view to position itself well.
Conversely, a page optimized for SEO may be a little too long, with a redundant character in the use of keywords, being less “straight to the point” for a user.
The objective is of course not to choose between one or the other since the two are complementary: the 1st facilitates the indexing of a page and brushes the robots in the direction of the grain (it is to all the more true with the inclusion of core web vitals), when the other favors its position in the search results.