5 Ways to Ensure Your Site Is Accessible to the Visually Impaired

The Web Designer Series is supported by Wix.com, a free Flash online builder that makes website creation a breeze. Click here to create your own website now.

According to Prevent Blindness America, 53.2 million Americans aged 45 or older have some form of visual impairment, from mild to severe, and about 18% of those affected are “legally blind.” Despite their visual impairments, many of those people use the Internet every day, just like you and me. Further, as more and more people over the age of 50 become comfortable with technology, Internet usage among this demographic will only increase in coming years.

The web is full of tips on how to design websites for blind users, most of which are geared toward making your website accessible to screen readers. But as you can tell by looking at the numbers above, there is a large middle ground. The vast majority of individuals with visual impairments, even those considered legally blind, don’t need or use screen-reading software. However, the web can still be a difficult and cumbersome place to navigate when one can’t quite see it clearly.

Here are a few tips and techniques for making your site more accessible to these visually impaired users — and why they’re important.


1. Make Allowances For Enlarged Text


Often times, simply making text larger is all that a user requires. Consider offering alternate stylesheets with larger font sizes and make sure your layout doesn’t break when text-only zoom is enabled in the browser. Many visually impaired users will want to zoom in on the text without changing the scale of the entire site layout, which can lead to difficulties scrolling and tracking text over long lines.

Depending on your site’s target market, you may also want to consider making the default font a few points larger, and if you’re publishing articles or large quantities of text, it’s a good idea to offer text-only versions, so the user can then manipulate the text however he likes.


2. Contrast is Key


Eye diseases like Retinitis Pigmentosa, Glaucoma, Retinopathy and cataracts (some of the most common eye disorders out there) all lead to a significant decrease in contrast sensitivity — that is, the eye’s ability to differentiate between similar shades and levels of brightness.

But today’s layouts are detailed-oriented, often utilizing subtle gradients and slight shifts in value to create clean, modern, unobtrusive interfaces. For a user with normal eyesight, this makes for a very pleasing visual experience. To a user who struggles with contrast sensitivity, however, it can be a literal headache.

Consider offering a second version of your site with more contrast between elements. Make use of bold text for added readability on low-contrast items and avoid very thin fonts. Also, don’t use any JavaScript or CSS techniques that would prevent users from highlighting elements of the page with their mouse or change the default highlight behavior. Many visually impaired users make use of highlighting as a quick trick to increase contrast and to aid visual focus.


3. Be Mindful of Colors for Action Items


Genetic colorblindness affects about 8% of all men and about 0.5% of all women to some degree. Then there’s acquired color blindness, which can result from eye disease or injury (such as glaucoma or cataract) and drives the total number of colorblind users even higher. It may not always be feasible to offer these users an entirely different color scheme, and most users generally accept this. However, there is one place, where the use of color should be given the utmost attention — action items. When creating buttons or notices that call the user’s attention and require their direct interaction, try to avoid using color combos that are easily confused by colorblind users (red and green, blue and yellow) and make sure these elements contain clear, visible text or iconography that makes their purpose clear.

Placing a red “cancel” button next to a green “submit” button, for example, might cause visual confusion to a user who is red-green colorblind. Similarly, users with the seemingly misnomered “blue-yellow” colorblindness (more common in acquired colorblindness) are less able to differentiate between shades of green and blue.


4. Let Desktop Users Browse Your Mobile Site


If you offer a mobile version of your web site, don’t restrict it only to mobile devices. Layouts optimized for the mobile web are typically, by nature, more visually accessible than their more grown-up counterparts. Elements are often simplified (and thus easier to scale), more focus is given to text, and there is less overall visual clutter to potentially confuse users who have blurred vision or difficulties with contrast and color. Giving anyone access to the mobile version of your site can be a quick way to increase accessibility without adding a lot to development costs.

Note, though, that while they can be quite useful for sighted persons with vision problems, mobile websites that utilize large amounts of JavaScript and AJAX functionality are not ideal solutions for blind users who need to access the web via screen reading technology.


5. Use Keyboard Shortcuts to Aid Navigation


In addition to being useful to persons with screen readers, keyboard shortcuts can make site navigation for the visually impaired user far easier. With the addition of keyboard commands, it’s possible to navigate a site with the use of arrow keys and a few quick keystrokes, eliminating the need to follow a mouse cursor across a screen — and the associated need to keep shifting visual focus. This can go a long way toward reducing eye strain and frustration. Many users with visual impairments surf the web on large monitors (23″ or bigger), which can lead to a lot of head and eye movement, particularly at shorter focal distances. The less time the user has to spend following the cursor (which can easily become lost) around the screen, the better.


Series Supported by Wix.com


The Web Designer Series is supported by Wix.com, which brings amazing technology home to everyday people. Discover the amazing simplicity of its online Flash builder and enjoy creating beautiful websites with powerful drag and drop interface.


More Design Resources from Mashable:


A 12-Step Guide to Fostering Your Creativity
8 Powerful & Inexpensive Desktop Design Apps
HOW TO: Get Started with the Less Framework
8 Essential Web Typography Resources
HOW TO: Turn Your Foursquare Data Into an Infographic

Image courtesy of iStockphoto, nu_andrei

More About: List, Lists, web design, web designer series, web fonts

For more Dev & Design coverage:

This entry was posted in Design Lists, features, List, Lists, mashable, Web Design, web designer series, web fonts and tagged , , , , , , , , , . Bookmark the permalink.