...

How to Make Your Website Accessible to Visually Impaired User

Created: Apr 13, 2017

Updated: June 4, 2024

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.

Website Accessible to Visually Impaired User | Go-Globe

Making your website accessible to visually impaired users is crucial for ensuring inclusivity and providing equal access to information. Here are some key factors to consider:

  1. Screen Reader Compatibility: Ensure that your website is compatible with screen readers by using semantic HTML, providing alternative text for images, and structuring content logically.
  2. Keyboard Navigation: Make sure that all interactive elements, such as links and forms, can be accessed and operated using a keyboard alone, without requiring a mouse.
  3. Color Contrast: Use sufficient color contrast between text and background colors to make content readable for users with low vision or color blindness.
  4. Font Size and Style: Use legible fonts and provide options for users to adjust the font size to meet their needs.
  5. Alternative Text for Images: Provide descriptive alternative text for all images to convey their content and purpose to users who cannot see them.
  6. Accessible Forms: Ensure that forms are well-labeled and easy to navigate, with clear instructions and error messages.
  7. Video Accessibility: Provide captions for videos to make them accessible to users who are deaf or hard of hearing.
  8. Responsive Design: Ensure that your website is responsive and adapts to different screen sizes, including mobile devices, to accommodate users with varying needs.
  9. Accessible Navigation: Use clear and consistent navigation menus that are easy to understand and navigate using assistive technologies.
  10. Testing with Assistive Technologies: Regularly test your website with screen readers and other assistive technologies to identify and fix accessibility issues.
  11. Accessibility Guidelines: Follow accessibility guidelines such as the Web Content Accessibility Guidelines (WCAG) to ensure that your website meets the needs of visually impaired users.

 

 

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.

Blog Partners

© 2005 - 2024 GO-Globe ™ | CUSTOM DEVELOPMENT. All rights reserved.
This site is protected by reCAPTCHA and the Google
Int'l. Web Design
Int'l. Logo Design
Int'l. SEO
Int'l. Ecommerce