The internet has become a part of our life. Some might even consider it as one of the basic necessities of life. It is so integrated in our life that we first search symtops for any health issue on Google before consulting any doctor. The point is, everyone now rely on internet to get most of the things done, this also include people with disabilities, like visual impairment.
“285 million people are estimated to be visually impaired worldwide: 39 million are blind and 246 have low vision.”
Source: World Health Organization
Considering that people with visual impairment also browse websites, there is a great need for designing websites that are accessible to them. This is a challenge for website designers as there are more than one type of visual impairment. Some might be blind, while others might have color blindness. Designing websites that is accessible for these type of users as well is a challenge as well as responsibility of designers and developers.
This is how a colorblind person perceives colors.
The Principles of Accessible Website
According to W3C WCAG 2.0 Guidelines, a website must be perceivable, operable, understandable and robust to be accessible for disabled users (including visually impaired users).
Perceivable: Content of a website must be presented in a way that users can perceive. For example, people with blindness or severe visual impairment might not be able to see an image. For this, alt tag can be used on the image that describes what is in that image.
Operable: UI and navigation should be easily operable by everyone. For example, such users should be able to use keyboard to navigate a website. For this, the necessary functionality should be available using keyboard.
Understandable: The content and elements of UI must be understand to everyone. For example, the text must be legible, readable and understandable.
Robust: Content must robust enough to be interpreted by available browsers. For example, the HTML on the form should be using proper tags and values so it will be displayed properly on browsers.
These principles are the most important ingredients of creating an accessible website. Let’s see how you can apply these principles in creating a website that visually impaired users can easily access.
Give Users Control Over the Text Size
For the text to be readable by such users, the font size must be large enough. However, some users might not need 2x large fonts, while some might even need fonts larger than that. For catering to the need of these people, you can provide a button that users can use to enlarge the text as much as they want.
Embraceme.org provides three text size options so user can enlarge the text size if current size is too small to read for them.
The text size becomes more important when it comes to CTA buttons. If a CTA has “Contact Us” text that is not clearly visible to such users, it is unlikely that they will click on it. This mean you can forget that such users would do business with you.
Don’t Left Color Blind Users Out
Color and contrast are the most basic as well as the most important parts of a design. Using right color scheme can affect the mood of users and using right contrast will get their attention.
However, not everyone sees colors the same way. There are people who cannot perceive certain colors right. Designing for visually impaired users, especially users with color blindness, is a great challenge for designers. More so because there is not one but three types of color blindness.
The key to designing for color blind users is to ensure high contrast between foreground and background elements and not relying entirely on colors.You must also make sure that the text content on the page is easily readable on grey scale (black text on white background or opposite of that).
Facebook uses warning icons and popup messages to show errors or invalid requests, instead of solely relying on red color.
The color and contrast also becomes important when it comes CTA. For example a green color CTA on red color theme might not stand out much for color-blind users. This issue can be tackled by using bigger CTA button and with large text on it so it is clearly visible for even a color blind user.
Making Everything Accessible Over a Press of Keys
One of the biggest hurdle for blind users could be using the navigation menu, especially if it has dropdowns and submenus. Blind users use screen readers, so they can tell what labels are there in the navigation menu. However, it might be difficult for them to click on the Home button, for example.
To solve this issue, most browsers have built-in function of keyboard focus. This means users can, for example, press Tab key to jump to links on a page. The screen reader will read the label of the link and user can press Enter key to visit the desired link.
To make it even easier, you can provide a list of keyboard shortcuts on your page so users know how they can navigate using keyboard only.
Jacksonchurch provides a short list of Access Keys on their website to make their website accessible and “as user friendly as possible”.
To ensure keyboard navigation, avoid using certain keyboard traps. For example, some designers disable keyboard focus on their website thinking that it doesn’t look good on it. This make it difficult for users who are using keyboard to navigate a website.
Conclusion
The content on the Internet should not be out of the limit for disabled people. After all, the Internet is an open place for everyone. Making your website accessible to such users is your responsibility, whether you are a designer or a business owner. Ensuring accessibility will improve the overall user experience of your website, which in turn will improve the key performance indicators, like bounce rate, average session duration and conversion. Now, make your website accessible for your users.
