Vision Disabilities and What You Need for Accessibility

In this article, we'll define vision disabilities and talk about web development strategies for improving accessibility for users with visual impairments.

For people with vision disabilities, the advent of the internet has done more than transform the way they access information, and it has enabled them to participate in a global system of communication. Unlike many print products, online articles and applications offer quick and low-cost options to people who need additional tools to access their content.

Most web applications have a long way to go before they can truly welcome users with vision disabilities. This article explores the strategies web developers can use to maximize the accessibility of their products to these users.

What Are Vision Disabilities?

Vision disabilities generally fall into one of three broad categories:

1. Blindness. The extreme end of the spectrum of vision disability is total blindness, where a person has no access to visual information from the outside world. Most people considered legally blind do have some vision, but not enough to enable them to move around without assistive technologies. The threshold for legal blindness in the United States is 20/200 vision or a field of vision that covers 20 degrees or less.
2. Low vision. A person with low vision can often rely on glasses or contact lenses to access written material and navigate the world. Low vision is common among the elderly and also in younger populations due to genetic predisposition, illness, or traumatic injury.
3. Color blindness. People who are color-blind generally have a normal range of visual acuity but perceive color differently, to a limited degree, or not at all. Though not generally considered a disability, color blindness can impact the way a user interacts with a web application, and accessibility to color-blind users is an essential consideration for developers.

Why Is it Important to Make Your Site Accessible to People with Vision Disabilities?

People with blindness, low vision, and color blindness make up approximately 1.3 billion people worldwide. Catering to this broad demographic is a respectful way to interact with others, but it’s also a smart business practice. Despite the wealth of assistive technologies available to people who need them, a web application not designed with accessibility in mind can present frustrating problems for users with visual impairments.

Improving the Accessibility of Your Website for Visually Impaired Users

Improving accessibility in your applications starts with considering how visually impaired users navigate the web. The strategies employed by people with visual disabilities vary by the type and extent of their disability, as well as by the preferences of the individual user, but the following tools cover most of the crucial ways that visually impaired people use the web.

For Users with Blindness

People who are blind often read the web with screen readers, which speak written text aloud or convert it into Braille with the help of Braille displays. They often navigate web pages using their keyboards - e.g., by using the Tab key to jump between sections. A blind user may not use a mouse to navigate a page nor to access information that is presented exclusively through visuals.

First and foremost, to improve accessibility for people who use screen readers and keyboard navigation, make sure your site’s markup works well with a screen reader. The W3C’s WAI-ARIA standard provides complete guidance for creating accessible rich web applications. For specific tips for making your website accessible to those using screen readers, read the WAI-ARIA implementation practices, which cover elements such as keyboard navigation, accessible design patterns, and defining landmark regions to allow screen readers to identify the structure of the page for visually impaired readers.

Other strategies include providing text alternatives for visual content by writing alternative descriptions for each of your images and summaries for charts, graphs, and other visual content, and adding column and row headers to tables, as well as descriptions of their contents.

For Low-Vision Users

Zoom apps enlarge sections of the page so that people with low vision can distinguish the letters in a block of text. Although most operating systems can render fonts’ glyphs at a sufficiently high resolution for these apps, they cannot boost the resolution of images. An alternative technique, enlarging font size in the text, also cannot be used on text within images.

To improve accessibility for people who use zoom apps and enlarged font sizes, use text instead of image embedding whenever possible. True text responds well to zooming, while text embedded in images loses resolution as it expands. Ensure that your site’s users can change the font size of your content by using the following strategies:

• Avoid limiting changes to font size when setting the HTML meta attributes, such as maximum-scale=1.0 or user-scalable=0.
• In your CSS, use relative measures (percent of a whole) rather than absolute measures (precise number of pixels) to give users flexibility in their font sizes.
• Make sure your webpage is responsive and that the relevant content is visible at different font sizes and screen sizes by running usability tests on each page.
• Use correct markup so that tools like iOS Reader Mode and Safari Reader, which allow users to customize the text to their needs, work normally.
• Wrap your content blocks in elements like <article> to signal to a screen reader to engage with the text. Any wrapper other than <body> or <p> will work for most readers, but be sure to test unusually formatted pages to make sure the screen reader can access their content.

For Users with Color Blindness

The most common type of color blindness is red-green deficiency, in which these and similar colors are difficult to distinguish. For a user with this type of color blindness, reds and greens may appear as yellows, beiges, or oranges, making all colors in these families unreliable indicators of the true colors of emitted light. Many people with red-green color blindness can tell the difference between dark and light shades, and colors in the blue family are usually unaffected.

Another type of color blindness is “achromacy,” or complete color blindness, where the world is rendered in blacks, grays, and whites. People with achromatic color blindness make up a small percentage of the color-blind, but their needs are worth considering for developers interested in accessibility improvements for those who are color-blind.

Keep in mind that all those who are blind are, in a sense, also color-blind; any improvements removing reliance on color to convey information may also increase accessibility for users who are blind.

To improve accessibility for users with color blindness, don’t rely on color alone to convey the meaning of controls. Instead, include text or alternative text descriptions of navigation buttons and other controls. Also, ensure that all the visual information is conveyed not just with color, but also using different visual textures—see WebAIM’s metro lines example.

Finally, keep in mind that just as users who are blind benefit from accommodations made with color-blind users in mind, accessibility measures designed for blind users can also help those who are color-blind.

Conclusion

Though the above techniques describe some approaches to improving accessibility for users with visual impairments, they don’t express the full potential of true accessibility. Developers committed to making their content more accessible should take these goals into account as early as possible when planning a project. Tweaks like switching to relative measures in your CSS markup can be applied after project development is complete, but not everything required for accessibility is a simple technical change.

Because interactive web pages are much more complex than simple blocks of text, one of the greatest challenges of accessibility is in creating navigable pages without relying exclusively on visual controls. Measures intended to make content accessible to users with visual impairments should also include changes to the project’s content structure itself. The clarity in content, as well as in markup, can make a big difference for users with vision disabilities as they move through the content of your project.

Learn More about Accessibility

We have created a comprehensive whitepaper on accessibility for developers that covers everything from laws to coding to testing.

Download the whitepaper: Accessibility for Developers

Adding Accessibility to Your Apps

One easy way to make sure that you are creating accessible web apps is to start with components from the Kendo UI libraries. Our components are all WCAG complaint and give you great functionality from grids and charts to schedulers and pickers. Get a head start on your app's UI and a head start on accessibility compliance at the same time.

Learn more about: Kendo UI