Make Your Website Inclusive for Web Accessibility!

The web is becoming more and more democratic in the world. As a result, there are new Internet users of all types every day. At the beginning of 2021, there were just under 5 billion internet users. So we see that about 60% of the world's population uses the internet nowadays. The web is universal, that is one of its credos! It is therefore important through our sites and our content to try to include as many people as possible. It is necessary to make the web accessible to anyone.

In this article, we will discuss the issues ofweb accessibility and show you the steps to make your site compliant in order to reach as many Internet users as possible.

Digital accessibility: Why optimise your website?

What is digital accessibility?

The accessibility of a site consists of simplifying its navigation and understanding for a greater number of people. Whatever the disability or difficulty of a person, he or she must be able to access the web in the same way as so-called "valid" people.

To make your site accessible, there are 4 major points to respect according to the WCAG (Web Content Accessibility Guidelines), so it must be :

• Perceptible: The user must be able to easily perceive the different information and the interface (Colours / Contrast / Text elements for the images...)
• Usable: Your pages must be adapted to any form of navigation (keyboard, mouse, trackpad) while guiding the user (titles, links, etc.)
• Understandable: The textual content must be readable and the user must be assisted in entering it (error prevention)
• Robust: The content must be reliably interpreted by a large majority of users (it must be optimised for the interface)

Web accessibility: Who is it for?

In itself, everyone is concerned, because the web must be accessible to all. However, for people with disabilities, making the site accessible makes sense.

It is estimated that around 1 billion people worldwide have some form of disability (15% of the world's population).

There are many forms of disability that can interfere with surfing the Internet:

• Visual impairment
• Hearing problems
• Mobility/motor disorders
• Cognitive disorders
• etc.

Moreover, the share of senior citizens (+65 years) in the world is about 10%. This figure is increasing every year. Seniors are also concerned, because they may (with age) have more difficulty using the internet. These people often need help!

Finally, it should be noted that accessibility concerns all types of devices (computer, tablet, mobile, etc.). It is therefore necessary to have a global approach in its desire forinclusion.

Why design an accessible website?

Reaching a wider audience

We mentioned it above, but part of the world's population suffers from some form of disability. So if we have the opportunity to improve the navigation and consultation of our site's content, why not do it? Indeed, the more accessible my content is, the more Internet users I reach.

By morality

Of course, it can be "work" in addition to making your pages compliant for everyone, but then again the web is universal. On the internet, there are no social barriers, everyone can find their place. That is why it is also our duty to participate in this by including the maximum number of people.

Improving your referencing

When you update your site to make it accessible, you will change a number of parameters that will allow Google robots to better understand your site. Don't forget that the indexing robots are (partly) blind and deaf.

You will end up giving important information (subtitles for videos, Alt text for images...). And without really realising it, you will optimise your site for SEO.

In addition to the information given to Google, you will improve the user experience (UX) of your pages. This will involve managing the colours, contrasts, width of buttons, etc. A better UX for people with disabilities, but also for Internet users in general. This is a very important criterion for being well referenced on search engines.

Comply with regulations

Web accessibility is a must if your company generates an annual turnover of 250 million euros.

To find out how to comply, the Web Accessibility Initiative (WAI or w3c) describes the rules, procedures and standards to be respected in the WCAG 2.0.

To learn more, you can also consult the General Accessibility Guidelines (GAAR).

How to detect accessibility problems on your site?

To test the accessibility of your website, we have selected 3 tools that can help you:

Accessibility score : Lighthouse

With this chrome extension, you can analyse your website and get an accessibility score. In addition to your score, Google Lighthouse gives you recommendations to improve your pages.

‍

Accessibility test: Expert

TheExperte accessibility test gives you an overview of the accessibility score of your domain. Simply enter your domain name on the page and the site will pull up all the accessibility scores for your web pages. The scores are taken from Lighthouse.

Accessibility test: AChecker

The AChecker site also allows you to test the accessibility of your web pages. Once you have entered your URL, you will receive a report on known and potential problems. This report is based on the WCAG 2.0 (Level AA).

‍

Accessibility test: AccessiBe

Finally, in the same style as AChecker, AccessiBe offers the possibility to have an answer on the conformity of your site or not on the web accessibility legislation.

‍

The 3 points to respect to make your site accessible

The tools presented above will help you to solve your various accessibility problems. However, we can already list the levers that need to be acted upon:

Make your site visually accessible

Worldwide, 253 million people are visually impaired. Despite this impressive figure, only 10% of the world's websites are accessible to people with visual impairments.

In view of these figures, we believe that it is essential to optimise your site visually in order to make it accessible. To achieve this, you can :

• Pay attention to contrasts: users should be able to read each content and text clearly (You can check the readability with contrasts with this tool: https: //contrastchecker.com/)
• Change your font type: Some fonts are difficult to read
• Change the size of your font: A slightly larger text will make it easier to read
• Make it possible to zoom in on your pages: Some elements of your pages may be too small
• Put "Alt Text" to your images: This allows you to describe your image precisely with a short text

If you want to take this further, you can use the ChromeLens extension. Once the extension is installed, simply go to a web page, right click, inspect the page and go to the ChromeLens tab. You now have the ability to simulate visual disabilities on your pages to see how it looks. An accessibility test is also available.

‍

Make your site audibly accessible

Worldwide, just under 500 million people have a hearing impairment. This is also something to watch out for on your website.

To include people with hearing loss, you can :

• Adding subtitles to your videos/audio
• Transcribing media files with text
• Pay attention to the transcription of the voice synthesis (the language must first be set)

Accessibility at the level of navigation

For this point, we take into account people with motor or cognitive disabilities. Indeed, navigation on certain sites can be a real headache and exclude Internet users. For this reason, we have listed a few points for which you should be vigilant:

• Have a hierarchy of headings (for understanding the content)
• Putting titles to links
• Putting explicit titles to the different fields of a form
• Set up a "breadcrumbtrail" (to visualise the path)
• Enlarge the different types of buttons / clickable links
• Have "simple" animations (no psychedelic animations)
• Have a "simple" and easily understandable design and content
• Change mouse size and colour as required
• Enable keyboard or other navigation(trackpad)
• Check accessibility on all types of surfaces

To perform all these operations, you will surely have to modify your code. But fortunately, we have an easier solution for you thanks to Webflow. With this software, you will be able to create an accessible site for disabled people.

Improve the web accessibility of your site easily with Webflow?

Webflow is fully aware of the issues that come with creating accessible websites. No-code features such as checking and setting parameters directly in your CSS make it much easier to ensure that you have accomplished your accessibility tasks. However, some options are still only available when using low-code, such as adding interactive elements to the "accordion" type interaction. But we are lucky because... Webflow, in its 100% no-code strategy, offers users lines of html code that can be easily integrated into your sites and that will help you to achieve your 100% accessible projects!

Contrast ratio text - Visual accessibility

The choice of a contrast colour between your background and your text is a crucial tool for a project to ensure that all content is easily accessible. Webflow's native audit tool allows you to know if your text complies with the right accessibility standards. And yes, Webflow knows how important it is to ensure that your website is WCAG compliant to ensure that people with screen impairments can enjoy your website in the same way as everyone else.

Discover the functionality in this tutorial 👇

Preview of different vision disabilities - Visual accessibility

Thanks to the preview tool included in the Webflow designer, you have the possibility to put your website in conditions of all the different points of view that a visual impairment like colour blindness can generate.

Follow the steps below:

Alt text audit - Visual accessibility

Webflow's native auditing displays an error message when you have forgotten to add the ALT attribute.

The best practice is to fill in the alt attributes of your images directly in your media library and use the "Use resource alt text" function. This allows you to automatically apply the alt tag each time you reuse the visual.

(Youtube video to come 🎥 )

<A> Attribut personnalisable en 2 clics - Accessibilité auditive

La façon dont un élément est annoncé par un lecteur d'écran est généralement déterminée par son contenu. L’ajout des balises aria-label permet d’améliorer la compréhension de votre site par les screen readers. Webflow vous permet de personnaliser facilement les attributs <a> pour améliorer l'accessibilité de votre site web.

Follow the steps below:

Project settings → custom attributes → + → Add Attribute

Make sure you have links with a minimum target size of 44px -Digital accessibility

It is essential to have a minimum target size of 44px on your link so that it can be easily clicked on, even if you suffer from an illness such as Parkinson's.

Digital Accessibility: Go further with the Webflow Accessibility Checklist

This resource is absolutely fantastic: Webflow Accessibilty Check List

Webflow has made a checklist available free of charge to everyone, covering each point with implementation recommendations (some of which are in low-code) but with simple tutorials to follow, and of course, the code to simply copy/paste.

In addition, this checklist can be shared within your team, with a task progress bar that allows you to measure your progress as a group!