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.
Vision disabilities generally fall into one of three broad categories:
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 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.
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.
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:
<article>to signal to a screen reader to engage with the text. Any wrapper other than
<p>will work for most readers, but be sure to test unusually formatted pages to make sure the screen reader can access their content.
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.
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.
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
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
Chris Ward explains cool tech to the world. He is a technical writer and blogger. He has crazy projects in progress and will speak to anyone who listens. You can talk to him! :)
Subscribe to be the first to get our expert-written articles and tutorials for developers!