8 Sept. 2023 · 4 min de Lecture
How can I make my website accessible to blind and visually impaired people?
Are you committed to accessibility and inclusion? This is a particularly crucial issue in today's digital age, as access to online information has become essential. However, it is regrettable to note that many people, particularly those with visual impairments, the visually impaired or blind, as well as those with cognitive disabilities, often find themselves excluded from the online experience. If you want to promote the independence and inclusion of these groups, you've come to the right place.
Here are our tips for making your websites accessible to the visually impaired:
Alternative texts
Alternative text is a short text description associated with an image, illustrationor any other visual element in a document, website, application, etc.
It is very easy to integrate alternative text when creating your content - an accessibility tab or ALT is often provided.
This will enable visually impaired people to participate fully in your exchanges and communications
A clear structure
Navigating a website can be particularly difficult for people with visual impairments. That's why, when designing your site, it's essential to put in place a hierarchical content structure, with clearly defined headings and sub-headings.
This approach will considerably improve navigation for these users by giving them a solid reference point for accessing information quickly.
In the code of your website, semantic HTML tags will enable you to make your content understandable and accessible. These tags carry specific meanings and describe the content they contain. This has a dual purpose: to help search browsers interpret the content correctly, and to help screen readers (used by blind or partially-sighted people) interpret the content correctly.
You will find the following tags in particular:
• <header>: This tag is used to define the header of a page or section. It generally contains the main title of the page or section, the site logo, navigation menus, etc.
• <nav> : Used to define a navigation section, often in the form of a menu, allowing users to move quickly to different parts of the site.
• <main> : Indicates the main section of content on a web page. There should only be one <main> element per page.
• <footer>: Used for the header or footer of a web page, where you can place information such as contact details, social media links, legal notices, etc.
Tags allow screen readers to understand not only the structure but also the meaning of the content. For example, when a screen reader encounters the <nav> tag, it informs the user that this is a navigation section, making it easier to navigate the site.
Similarly, when users reach the <header> tag, they know that they are in the page header. To find out more, take a look at ReferenSEO et Pierre Giraud.
High colour contrast
To ensure optimum legibility, make sure the text has a high contrast with the background. For example: white writing on a blue background can work very well.
To ensure that colours are suitable for the visually impaired, we recommend that you follow the contrast guidelines set out in the Web Content Accessibility Guidelines (a set of international standards for making web content accessible).
We recommend a contrast for normal text (body text) of at least 4.5:1 in relation to the background colour. You can test contrasts on the following websites:
For headings, which are generally written in a larger font, the recommended contrast ratio is at least 3:1 in relation to the background colour.
There are no contrast guidelines for icons or buttons, but we recommend that you follow the contrast for body text, and ensure that these elements are easily distinguishable from the rest of the page.
Appropriate typography
The use of appropriate typography plays an essential role in improving the accessibility of your website. We recommend avoiding the use of serif typefaces such as Times New Roman.
As far as font size is concerned, it is advisable to choose a minimum of 16 to 18 points. This ensures better legibility for all visitors, including those with specific visual accessibility needs.
Carry out tests
This stage is essential: it's important to put yourself in the shoes of a visually impaired person and try out opening your site in their conditions.
Sometimes, details that we don't think about can make it very difficult to access information!
Constant updates
Following on from the previous point, it is necessary to offer regular updates to ensure that your website remains compliant with standards and that it remains compatible with the new accessibility tools that are emerging.
In conclusion, digital accessibility is a crucial step towards including everyone in communications. By making your websites accessible to visually impaired people, you are promoting the autonomy of these individuals, as well as equality of opportunity.
By following these simple but important tips, you are helping to build a more accessible and welcoming web for everyone, while promoting accessibility for visually impaired and blind people, so that they can live independently.
If you would like to improve the accessibility of your company for visually impaired people, here is an article with tools that can help: The 5 mobile apps for blind or low vision individuals