Note from Jimmy Hua:
This post is shared through my Google Reader from another source. All credit of the post belongs to them which you can access by going to 5 Ways to Ensure Your Site Is Accessible to the Visually Impaired
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.
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.
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
For more Dev & Design coverage:
- Follow Mashable Dev & Design on Twitter
- Become a Fan on Facebook
- Subscribe to the Dev & Design channel
- Download our free apps for Android, Mac, iPhone and iPad