Design Website Accessibility for the Blind
Underground tips and ideas for practical design

Design Website Accessibility for the Blind

Do you know that approximately 1 out of 12 men and 1 out of 20 females experience color blindness in some form? Do you know how many of the Americans are color blind?

What do you think of when you hear website accessibility? It is more than simply availability. It’s even beyond usability. You may have a design that works in all browsers and looks great. Perhaps the links to your site’s pages are readily visible and linked to the appropriate page, but that still doesn’t mean your site is completely accessible.

How friendly is your site to the visually impaired? Being visually impaired can range from poor vision to color blindness to blindness. How easily can someone with such impairments visit your site?

I have a friend who is an always smiling, young and ambitions farmer. He has a large farm in Indiana. However, he is also blind. He often shares his frustrations over how many sites are completely unavailable to him. We’ve even talked about working together to come up with service offering of testing and improving sites with accessibility challenges. So what are some things to keep in mind?

Building a site that is not targeted to the blind is awkward for that users group. Would you get a pair of comfortable working boots to your double legs amputee friend? Would you give your blind friend a pair of designer’s sunglasses that he cannot see? Sure you won’t? Then why make them feel awkward when they arrive at your site?

Fonts

imageHow are you handling your fonts? If you’re up-to-date with design trends, you use CSS to manage the display of your text. Do you set the font-size? And if so, how? Do you use pixels, points, or ems? Personally, I don’t like to use pixels (e.g. font-size:14px;). The main reason is that this creates problems. Setting the font size like that hard codes the size so that is cannot increase or decrease based on a user’s browser setting.

The two suggested methods of setting font sizes is using em or percent (e.g. font-size: 1em; or font-size: 100%;). I personally prefer the first one. This allows the font to grow or shrink to meet the visitor’s needs. Granted, that does present design challenges: if the font can grow, then what happens to the cool fixed height/width div that contains that font? So your design may require some rethinking to accommodate this form of accessibility. But doing so has the potential of providing a better experience for a whole segment of visitors you may not have been thinking about. See below how large that chunk is!

Colors

Color_blindnessUnless you’re a complete minimalist, it’s likely you have color in your site. It might be in your background, in images, backgrounds for headers or even your navigation menu. It’s the latter two that may present some accessibility issues.

Some color combinations are obviously hard to read. However, there are other combinations that may look fine to many people, but those with color blindness may have difficulty viewing.

So when it comes to laying out a design and putting color behind text, you might want to read up on common types of color blindness (e.g. red/green and blue/yellow).

VisCheck is an awesome tool that can give you a snapshot of what your page might look like to someone with certain types of color blindness. It features a very good write-up on color blindness and the accessibility of web pages.

Flash

The eternal debate – “To be or not to be?” /read it “Flash or no Flash”/? Let’s face it, even with tools like jQuery, HTML 5, and more, there still isn’t anything out there that quite measures up to the movie like quality and interaction of Flash. It can be cool; at least in tiny doses.

But aside from not being able to view Flash on your iPhone or having to wait for that counter to reach 100% over a clogged internet connection, Flash presents yet another issue. Screen readers for the visually impaired and for the blind have one heck of a time trying to communicate what content is inside of Flash. I’m not an expert on screen readers, so there may be some that have an easier time, but most (if not all) run into problems. This is usually because text and other content in Flash is not really text and therefore cannot be read.

So if there is a lot of Flash on your page, the screen reader simply be illiterate when it comes to your page. Keep this in mind when utilizing Flash for content on your pages. You could be inhibiting a fair number of people from accessing your page.

And apparently not all hope is lost. According to Adobe, there are ways to make Flash content accessible. You can go to their website to find out more. And WebAIM (Web Accessibility In Mind) also has something to say on the matter.

My take here is: Avoid FLASH! Let me repeat: AVOID IT

Conclusion

While not always the case, the purpose of a website is to attract visitors and disperse information to those visitors (whether it be for a product, service, entertainment, or something else). Considering that the American Foundation for the Blind shows 2012 National Health Interview Survey (NHIS) Report that an estimated 20.6 million adult Americans (or nearly 10% of all adult Americans) fall into a visual impaired category. The number is astonishing, right! These are 10% – a large chunk of potential visitors you should keep in mind. You may never be able to get it absolutely perfect – shoot for a balance between cool design and visual accessibility, but every step helps.
So, you’ve just read our opinion on the matter. It by no means is a comprehensive post on accessibility. Maybe just the tip of the iceberg. So, feel free to share your own observations on the topic in the comments below!