Best Practices to Follow to Assist the Visually Impaired Website Experience

Websites are designed to be aesthetically pleasing.

A Website is created with an idea and comes alive with color and content. Websites are planned, from the font to footer, navigation, links, and images. The content pulls everything together, followed by search engine optimization. SEO collects website analytics and can be used to determine who visited, from where and when. You hope all your website visitors enjoy the colors, images, and content that took many hours to create. But alas, not everyone will have the same experience. Some visitors will be visually impaired in one form or another, which may limit their enjoyment of visiting your site. How then, can you develop a website that is appealing to everyone? Is easy to navigate and considers the physical impairments that some web visitors may have?

Design for the worst-case scenario.

We all realize not everyone is blessed with good eyesight. Even with the aid of glasses, contacts, and surgery. With different degrees of eyesight affliction, it may be difficult to consider all of them. Therefore we will consider the most common low vision.

Low Vision:

as defined by medicineweb  “A visual impairment, not corrected by standard glasses, contact lenses, medicine, or surgery, that interferes with the ability to perform everyday activities.” The nature of low vision may change the way your website is perceived because of different visual acuities. People with low vision will have a more comfortable time on your website if you consider:

1. The Contrast ration, as defined by Wikipedia as the ratio of the luminance of the brightest color (white) to that of the darkest color (black) that the system is capable of producing. Accordingly, a good contrast ratio is 4:5:1. When the background color and letters vary its best to select solid colored letters. Gradients with the top being lighter than the bottom. Is difficult for the reader to see unless a thin black outline is placed to keep the contrast between the letter and the background color.
2. The scale of text. Consider using bigger sized letters without going off the scale of the screen at 100%
3. Link color for people with low vision or colorblind uses a link symbol (or underline) to indicate a link.

Other visual issues which may affect your website visitors experience;

1. Tunnel Vision. Only certain elements are visible to the visitor, as their peripheral vision is limited.
2. Blurred Vision, images and text will be fuzzy.

Keeping the visually impaired in mind, monitor settings and browsers include settings to change the visual presentation so the elements of your website are more usable and enjoyable.  Changes can include text size and contrast.

You can change the settings, but should you:

Even with these settings available, it may not be feasible to change settings, therefore there are best practices to follow to assist the visually impaired:

1. Start with the layout of your website by having structure.  This includes a layout that provides spacing between the website elements. W3C (The World Wide Web Consortium) is an international community where Member organizations, a full-time staff, and the public work together to develop Web standards. W3C states “developers must ensure that their code provides a structure that is independent of presentation.”  This would include tags and separators for the headers and paragraphs so varying devices will understand the information. Therefore causing it to display in a different way than the actual webpage.
2. Did you ever put an image in a website without alternative text?  For those who have vision issues images may not be clear or seen at all.  To interpret the image in lieu of seeing it, alternative text attributes describe the image to the visitor.  The detail of which is left to the web designer.
3. Do not exchange color for information.  For example, a link in red to a color-blind person will go unnoticed.  Use visual cues instead, such as an underline or icon.
4. Stay away from using shades of a single hue.
5. Contrast is important, if not used with the recommended ratio (at least 4:5:1) some people will not be able to see a text from the background it is on.
6. Navigating around your site will be easier if you use a navigation menu.  Browsers for the most part offer one-click keyboard functionality Combine the two with a keyboard shortcut legend

On the internet, you will find hundreds of tips for designing a website for the visually impaired, including plugins for WordPress, Have a question or comment?