The web is increasingly democratized around the world. Thus, there are new internet users every day, and they come from all walks of life. At the beginning of 2021, there were just under 5 billion internet users documented. We see that approximately 60% of the global population uses the internet today. The web is universal; this is one of its core principles! Therefore, it is important to strive to include as many people as possible through our sites and content. It is essential to make the web accessible to everyone.
In this article, we will discuss the challenges of web accessibility and show you the steps to make your site compliant so that you can reach the maximum number of internet users.
Digital Accessibility: Why Optimize Your Site?
What is Digital Accessibility?
The accessibility of a site involves simplifying navigation and comprehension for a broader audience. Regardless of a person's disability or difficulty, they should have access to the web on an equal footing with those who are considered "able-bodied."
To make a site accessible, there are four main points to adhere to according to the WCAG (Web Content Accessibility Guidelines), so it should be:
- Perceptible: Users should be able to easily perceive different information and the interface (Colors / Contrast / Text elements for images...)
- Operable: Your pages should be adaptable to all forms of navigation (keyboard, mouse, trackpad) while guiding the internet user (Headings, Links...)
- Understandable: Text content should be readable, and users should be assisted in their input (Error prevention)
- Robust: Content must be reliably interpreted by a vast majority of users (it should be optimized according to the interface)
Web Accessibility: Who Does It Concern?
In essence, everyone is concerned, as the web should be accessible to all. However, for individuals with disabilities, enabling accessibility of their site is of utmost importance.
It is estimated that nearly 1 billion people worldwide have some form of disability (15% of the global population).
There are numerous types of disabilities that can hinder internet navigation:
- Visual impairment
- Hearing problems
- Mobility / motor difficulties
- Cognitive disorders
- etc.
Additionally, the proportion of seniors (65+) globally is about 10%. This figure is increasing each year. Seniors are also affected, as they may encounter more difficulties using the internet as they age. These individuals often need assistance!
Lastly, it is essential to understand that accessibility concerns all types of devices (computer, tablet, mobile…). Hence, a comprehensive approach is necessary in your desire for inclusion.
Why Design an Accessible Site?
Reach a Larger Audience
As mentioned just above, a portion of the global population suffers from some form of disability. If we have the ability to improve navigation and content accessibility on our site, why not do it? Indeed, the more accessible my content is, the more internet users I reach.
For Moral Reasons
Certainly, making pages compliant for all can be “extra work,” but once again, the web is universal. There are no social barriers on the internet; everyone can find what they're looking for. That's why it is our duty to contribute by including as many people as possible.
Improve SEO
When you update your site to make it accessible, you will modify a number of parameters that will enable Google bots to better understand your site. Yes! We must not forget that indexing robots are (in part) blind and deaf.
You will therefore end up providing essential information (video subtitles, alt text for images...) And without realizing it, you will optimize your site for SEO.
Besides providing information to Google, you will enhance the user experience (UX) on your pages. This will involve managing colors, contrasts, button widths, and so on. A better UX for people with disabilities, but also for internet users in general. A very important criterion for being well-ranked on search engines.
Comply with Regulations
Web accessibility is a necessity if your business generates an annual revenue of €250 million.
To learn about compliance modalities, the “Web Accessibility Initiative” (WAI) outlines the rules, procedures, and standards to adhere to in the WCAG 2.0.
To learn more, you can also consult the french General Reference for Improving Accessibility (RGAA).
How to Detect Accessibility Issues on Your Site?
To test your site's accessibility, we have selected three tools that can help you:
Accessibility Score: Lighthouse
With this Chrome extension, you can analyze your site and obtain an accessibility score. Google Lighthouse provides not only your score but also recommendations to improve your pages.
Accessibility Test: Experte
The accessibility test from Experte allows you to get an overview of your domain's accessibility score. Simply enter your domain name on the page, and the site will provide all the accessibility scores for your web pages. The scores are derived from Lighthouse.
Accessibility Test: AChecker
The site AChecker also allows you to test the accessibility of your web pages. Once your URL is entered, you receive a report on known issues and potential problems. This report is based on WCAG 2.0 (Level AA).
Accessibility Test: AccessiBe
Finally, similar to AChecker, AccessiBe offers the possibility to receive a response regarding the compliance of your site with web accessibility legislation.
Three Key Points to Ensure Your Site is Accessible
The tools presented above will help you resolve your various accessibility issues. However, we can already list the areas in which you need to act:
Make Your Site Visually Accessible
Worldwide, 253 million people have a visual impairment. Despite this significant figure, only 10% of websites are accessible to individuals with visual disabilities.
Given these figures, it seems essential to optimize the visual aspect of your site to make it accessible. To achieve this, you can:
- Pay attention to contrasts: users must be able to read each content and text clearly (You can check readability with contrasts using this tool: https://contrastchecker.com/)
- Modify your font type: Some fonts are difficult to read
- Change the size of your font: A slightly larger text will enhance readability
- Enable zoom on your pages: Some elements on your pages may be too small
- Provide “Alt Text” for your images: This allows for precise descriptions of your images using short text
If you want to go further in this endeavor, you can use the ChromeLens extension. Once the extension is installed, just visit a web page, right-click, inspect the page, and go to the ChromeLens tab. You can now simulate visual impairments on your pages to see the rendering. An accessibility test is also available.
Make Your Site Audibly Accessible
Around the world, just under 500 million people have a disabling hearing impairment. This is an area where one should also be vigilant regarding their site.
To include hearing-impaired individuals, you can:
- Add subtitles to your videos/audios
- Transcribe media files into text
- Pay attention to the transcription of text-to-speech (You need to set the language beforehand)
Accessibility in Navigation
For this point, we consider individuals with motor or cognitive disabilities. Indeed, navigating certain sites can be a challenge and exclude some internet users. To address this, we have listed some points to heed:
- Ensure a hierarchy of Headings (for content comprehension)
- Add titles to links
- Provide explicit titles for the various fields in a form
- Implement a “Breadcrumb” (to visualize the path)
- Enlarge clickable buttons/links
- Maintain “simple” animations (no psychedelic animations)
- Use a design and content that are “simple” and easily understandable
- Adjust mouse size and color if needed
- Allow keyboard navigation or alternative (like trackpad)
- Check accessibility on all types of devices
Performing all these tasks may require code modifications. Fortunately, we have a simpler solution for you through Webflow. With this software, you can create an accessible site for individuals with disabilities.
Enhance Your Site's Web Accessibility Easily Using Webflow
Webflow is fully aware of the challenges that come with creating accessible websites. No-code features such as validation and settings directly in your CSS make it much easier to ensure that you have accomplished your accessibility tasks. However, certain options are still only available through low-code, like adding interactive elements for example with accordion-type interactions. But we are fortunate because... Webflow, with its 100% no-code strategy, offers users easily integrable HTML code snippets to help you achieve your fully accessible projects!
Contrast Ratio Text - Visual Accessibility
Choosing a contrasting color between your background and text is a crucial tool for a project to ensure that all its content is easily accessible. Webflow's native audit tool allows you to check if your text adheres to the proper accessibility standards. Indeed, Webflow understands how important it is to ensure that your website conforms to WCAG standards in order to guarantee that individuals with visual impairments can enjoy your site just like everyone else.
Discover this feature in the tutorial below 👇
Preview of Different Visual Impairments - Visual Accessibility
Thanks to the preview tool included in Webflow's designer, you can simulate all the different perspectives that a visual impairment, like color blindness, could generate on your website.
Follow the steps below:
Alt Text Tag Audit - Visual Accessibility
Webflow's native audit shows an error message when you forget to add the ALT attribute.
Best practice is to fill in the alt attributes for your images directly in your media library and use the “Use alt text from resource” function. This allows you to automatically apply the alt tag each time you reuse that visual.
(Upcoming YouTube video 🎥 )
Customizable <A> Attribute in 2 Clicks - Auditory Accessibility
How an element is announced by a screen reader is usually determined by its content. Adding aria-label tags enhances how comprehensible your site is for screen readers. Webflow allows you to easily customize the <a> attributes to improve your site's web accessibility.
Follow the steps below:
Project settings → custom attributes → + → Add Attribute
Ensure Links Have a Minimum Target Size of 44px - Digital Accessibility
It's essential to have a minimum target size of 44px on your link so that it can be easily clicked, even if you suffer from conditions like Parkinson's disease.
Digital Accessibility: Go Further by Following the Webflow Accessibility Checklist
This resource is absolutely fantastic: Webflow Accessibility Checklist
Webflow has made available for free to everyone a checklist covering each point with implementation recommendations (some of which are low-code) but with simple-to-follow tutorials, along with the code to copy/paste as needed.
Additionally, this checklist is shareable within your teams, featuring a task progress bar that allows you to measure your team's progress together!
