The question of optimizing your website for visually impaired people is important. However, only 10% of French sites are accessible to the visually impaired. However, they are about 1.7 million in France with visual aid devices for browsing the web.
Why Optimize Your Website for the Visually Impaired? How to improve accessibility by following web recommendations? We tell you everything in this article!
Reasons to make your website visually impaired friendly
Before explaining how to optimize your website for the visually impaired, let’s look at the importance of web accessibility as a whole!
moral reasons
The first reason is ethical, of course. As a business, it is your responsibility to provide equal access to your site to people with disabilities.
Computers and the Internet have become fundamental elements of modern life. To have full access to information, resources, culture and administrative processes, it is necessary to be able to access the web. However, we are not all the same when it comes to seeing and understanding the information displayed. Hence the importance of being friendly to all types of visitors!
legal reasons
In France, there is a decree on digital accessibility. Some players in the public and private sector have a legal obligation to make their websites accessible to the visually impaired, but also to people with disabilities in general.
This liability applies to:
- Legal person under public law.
- A legal person under private law with a mission of public service or common interest.
- Companies in France with a turnover of more than 250 million euros.
Your company is not affected by this decree? Nothing says it will always be like this, so it’s better to guess.
SEO Optimization
Good practices are combined with SEO, mobile friendly design and ergonomics in terms of web accessibility.
For example, adding alt text to images and transcriptions to videos is a powerful technique for accessibility, but also for SEO.
To make your website visually impaired, it needs to be organized and structured in a logical, understandable and clearly visible way, using categories, headings and content. This organization also improves your SEO efforts.
improve your brand image
By making your website accessible to the visually impaired, your company will appear to be socially responsible. You show that you care about others, especially your customers.
This will improve your brand image with your overall audience, which can lead to increased sales.
access to a new market
About 2.9% of the French population has visual impairment. Do you think these consumers will buy from a website that is not accessible and difficult to use? A study conducted in the United Kingdom showed that in 2019, 4 million people abandoned e-commerce due to access difficulties. The result: a net loss of 17.1 billion pounds sterling for these sites (about 20 billion euros).
Keep in mind that people who use assistive devices have purchasing power, too. You can increase your sales by effectively targeting this market.
Also read: Accessibility: The Complete Guide To Improving Your Website
8 Tips to Optimize Your Website’s Accessibility for the Visually Impaired
Now that you better understand the reasons for making your website accessible to the visually impaired, let’s see how to put it together!
1) reduce the number of colors
The more colors you introduce on your website, the more difficult it is for a visually impaired person to quickly identify key content and links, especially for a person of color blindness.
To any other user, too many colors are distracting and confusing. To facilitate navigation for color blind people, limit yourself to a maximum of 3 colors and avoid green and red.
2) Increase Contrast
It’s important to play on contrasts to improve the readability of your content. Here are some best practices to follow:
- Avoid using JavaScript or CSS techniques that prevent highlighting, as many visually impaired people highlight text to enhance contrast.
- Meet WCAG 2.0 AA requirements: a contrast ratio of 4.5:1 for normal text and 3.1 for tall fonts or bold content.
- For charts, add textures or patterns to increase readability and spacing between data.
- Use an opaque, non-transparent background so that the color matches the accessibility setting of the user’s screen reader.
3) Enable manual font size adjustment
One of the major accessibility issues for visually impaired people is font size. To address this, provide the user with the option to manually select the size of the typography. This can be a slider, a drop-down list, or a button, as on the Dialog & Solidarit site:
That said, the default size of your fonts should be fairly large on a base. At least one font 16.
Also, favor fonts without serifs that are more readable, such as Verdana, Arial, Helvetica or Tahoma.
4) Use descriptive headings for each page
This is another great practice to make your website visually impaired friendly! In addition to tags that describe page content, sites should always have titles that describe the subject or purpose of the page.
The Reason? Screen readers announce the page title (the “title” element in HTML markup) when a web page is loaded for the first time. Visually impaired users can thus recover precious minutes spent scanning a page to determine what kind of content it contains.
5) Optimize the form
Some visually impaired people rely solely on keyboards, not mice, to navigate the Internet (the cursor is often difficult to detect). For example, they use the “Tab” button to move forward when filling out a contact form.
To make your forms more accessible, you can:
- Use the “tabindex” attribute to indicate the correct order of fields to follow.
- Allow keyboard shortcuts.
- Configure required fields.
- Group similar fields like “Last Name” and “First Name”.
- Create a visible and understandable alert in case of wrong entry.
Lastly, avoid using CAPTCHA to validate submission. Prefer the checkbox that is more accessible to the visually impaired.
6) Precisely describe the links
People who use screen readers use keyboard shortcuts to list all the links on a page. This helps them navigate more efficiently.
Since this list of links is not surrounded by text, it creates a context-free state. Hence it is imperative to fill in the link details to extract meaning out of context. A “click here” anchor will never take effect.
Here’s an example of a link with a description that allows you to know the topic you click on:
7) Propose Alternative Content
Screen readers can only read text and code. Thus, to allow the visually impaired user to access the information contained in visual content, you should use alternative text for your images, videos, animations and infographics.
Keep this description short and concise. Include only important information. You can use the alt attribute for short descriptions and the “longdesk” tag for longer descriptions.
Be sure to put a period between each letter of an acronym.
8) Reduce the number of ads on your pages
Having too many ads on your website can lead to a poor user experience, especially for the visually impaired. It is sometimes difficult for them to separate this type of content from the rest of your page.
For visual ads, keep in mind the best practices I’ve seen before (contrast level, description, etc.) and remember to put the word “ad” at the beginning of the alternative text. This way, visually impaired people will understand that it is an ad and can decide whether they want to click on it or not.
4 tools to make your website visually impaired
To test and optimize the reach of your website for the visually impaired, you can use these 4 tools:
1. Color Safe
Color Safe analyzes the background color, family, and font size you choose to make recommendations for compliance with AA and AAA standards.
He makes sure that your graphic charter stays in line with your image while guaranteeing readability and accessibility of the content.
2. Color Contrast Analyzer
The Chrome Color Contrast Analyzer extension lets you examine any web page, image or PDF you have open in your browser. The tool identifies content elements that have color contrast problems.
You can choose to test for AA or AAA compliance on all or part of the analyzed page.
3. No Coffee
NoCoffee is a Firefox extension that allows you to view your website like a visually impaired person.
You will be able to better understand the difficulties faced by visually impaired visitors in order to make better decisions in terms of design.
4.Wave
Wave is an assessment tool developed by WebAIM, an American non-profit organization that has been developing web accessibility solutions since 1999.
Wave conducts a live website review to provide a comprehensive list of errors, warnings and fixes to make its website suitable for the visually impaired.
For example, you’ll be able to know if your pages have blank titles or links, but also whether you’re using Flash or plugins that are inappropriate for people with visual disabilities.
Our tips for optimizing your website for the visually impaired
It’s always better to have an outside approach (no pun intended) to analyze the reach of your website. If you want your content to be inclusive, you can hire a professional web designer to make your website visually impaired.
This good practice will positively affect your image, your natural context and your sales. Why don’t you? Post an ad on Codeur.com now to recruit an exclusive Freelance Web Developer!