Can the Visually Impaired Access Your Site?

February 23, 201112 Comments
Topics]Web DesignAuthor]

When designing a website, it’s important to take all potential visitors into consideration. This includes the visually impaired – those afflicted with color blindness, low vision and even total blindness. While only U.S. government websites are required to be compliant with Section 508 of the Rehabilitation Act, many large American retailers are beginning to follow suit – especially after Target was sued for six million dollars (USD) for having an inaccessible site for the visually impaired.

The first thing to think about when improving the accessibility of your site for the visually impaired is the level of the impairment. Is your site suitable for users with color blindness, low vision, partial blindness and even total blindness? Fortunately, there are several online tools and software available that can help make your site more accessible.

Color Blindness

Studies suggest that about 8% of men and 1% of women have some type of color blindness, with red-green color blindness usually being the case. It goes without saying then that using red and green as the primary color combination can cause accessibility issues for color blind users. However, there are other things you can do to improve the user experience for them. So before you begin desaturating your site (removing color), first save the current work of your site and try the following:

Ensure Proper Color Contrast – Some designers think that improving the color contrast of a site means that they are limited to a black and white color scheme. It doesn’t. It simply means that the colors you’re using should be passed through a color analyzer and measured for brightness difference, color difference and contrast ration.

Recommended tools:
Checking Color Contrast – This tool will tell you whether the foreground color and background color combinations are compliant with Section 508, and WCAG AA and WCAG AAA standards.
Color Blindness Webpage Simulator – Enter the url of a site into this tool to see how that page looks to a person with color blindness.

Don’t Rely on Just Color Coding – Designers are married to the practice of using colors to identify elements of a site, such as buttons, menus, links and text. Try including icons or underlining text to distinguish various elements of your site.

Low Vision

Choosing a font style and size to ensure legibility is probably the most important factor in the design process. There are several useful screen magnifiers (The Magnifier or Virtual Magnifying Glass) and accessibility tools such as aDesigner, a disability simulation application that creates a visualization of how a page looks to those with low-vision and total blindness. But there are still a few more steps you could implement to your site to improve accessibility for low vision users.

Avoid or Limit the Addition of Low-Resolution Images and Images with Text – Low-resolution images are often used to improve load up times of a site, which is fine, but sometimes images can be extremely distorted and blurry if their dimensions are expanded too much. The text on images can also be hard to view for persons using screen magnifier tools.

Do Not Use Scrolling, Flashing or Animated Text – Imagine trying to read something that’s scrolling from left to right really fast, blinking off and on or undergoing a metamorphosis. This can be quite a lot to keep up with, right? Now imagine reading that text when you’re visually impaired.

Front-Load Your Content – Front-loading is not a specific direction or term for web developers. It is a way of describing a writing method that puts the most important information or points first. This writing practice can help a reader easily scan the content on your site and decide if they want to continue reading, which of course you want them to do. Also, front-loaded content on your site can be more easily managed by someone using a screen magnifier.

Clearly Separate Sections of Your Design – Breaking your content into sections that are easily scanned and showing the difference between body content and sidebar content is also important. The use of proper heading tags makes it easier for all site users to read your page content. It also simplifies navigation for site visitors who are using screen readers. Also add borders, background colors, headings, content, links, spacing, icons, etc. and larger text where you can. Use fewer graphics and provide alt text for images and tables you do use.

Use Fonts That Are Easy to Read – Fonts like Verdana, Arial, Helvetica and Tahoma are very legible and still considerably stylish.

Partial & Total Blindness

Much of the design process you would use for low vision users applies for partially blind users as well. However, there are a few more components of the design process to consider for those that are totally blind.

Validate Your HTML Coding – This will help mitigate the chance of web browsers and screen readers misreading your site’s content.

Add Title Tags & Alt Tags – These meta tags will help screen readers distinguish the topics of each page and the images that are on them.

Use Fewer Graphics – Using fewer graphics helps with load up times so this component helps all users, not just users with visual impairments.

You might also like…

20 Essential Tools and Tips to an Accessible Website →
Accessibility Tips for Better Navigation →
Awesome Freebie: Web Accessibility Checklist Desktop Wallpaper →
Accessibility Principles for the Modern Designer →

About the Author: (1 Articles)

Brian Flores is the SEO for InMotion Hosting in Marina Del Rey, California. He regularly produces content on their blog, Web Hosting Help Guy. There, you can find detailed tutorials for CSS/HTML and even guides explaining the differences between a virtual privater server and a dedicated server. You can follow him on Twitter @WHHG_InMotion or @BrianAFlores.

Comments and Reactions

  • Ron

    On a eCommerce site you will not get enough money/orders from partial blind users so the investment of time and resources is not efficient in the most cases.

    Its like making a modern RIA compatible for IE6 users in 2011. The conversion you get from >5% of those users is not enought to make this extra work.

    • Dr. David K. Patterson

      Ron, your attitude is unfortunate and not a way to run a business such as an eCommerce website.

      Soon, you will not have a choice. The US Department of Justice has taken the position that the Americans with Disabilities Act of 1990 (“ADA”) and Section 504 of the Rehabilitation Act of 1973 (“Section 504″) apply to all public and private Internet websites and will be enforcing those laws.

      It is not that difficult to make the changes discussed in this article to websites so that they can be used by everyone, including those with disabilities.

      It’s not just that it can be done, it’s the right thing to do.

    • Lee

      Not sure I agree with you, the steps mentioned in this article would take very little time to both test and action. I would even argue that most of the techniques used to improve usability for the visually impaired are almost identical to those used to improve it for those with good eyesight. So you should be doing them any way really.

      Not only that but you should not be alienating any of your users, especially because of a disability. It’s like saying you’d rather not put in a wheelchair accessible entrance to your shop because the increase in business will be minimal.

  • Michael Gunner

    Great article, however having tried out aDesigner, the results were very confusing. I have #f0f0f0 text on a #000000 background, f0f0f0 being only a very, very slight off white and apparently there isn’t enough contrast between the two. #f0f0f0 is only a decrease in luminosity of 5%!

    So, should I have bright white text on the background? I don’t think so – because whilst accessibility is extremely important it needs to be done in a way that doesn’t ruin the web experience for everybody else. I know that sounds selfish – but it is true.

    I feel possible workarounds should be explored so that you can have your normal site, and a copy which has that high degree of accessibility. Perhaps a switching style sheet that turns everything black on white.

  • http://andrai.com andrai

    It would be nice if Jaws (screen reader for windows) made a version available for developers for testing.

    • http://www.elmook.com Elmook

      You could use something like:

      http://www.nvda-project.org/

      But, the optimum is doing an appropiate user testing. There’s nothing like a real user.

  • http://julessays.com Julie Gomoll

    For those of you who think visually impaired viewers aren’t a large enough demographic to go to the trouble (I’ve heard this from more than one client), here’s another reason to make your site accessible:

    Google is blind.

    All those alt tags and title tags and W3C standards? Google *loves* them. It’s some of the best SEO juice you can provide.

  • Marian

    Ronnie, baby, you just shut out an entire hard-core spending tsunami of aging boomers. Good goin’.

    Brian and Michael: Backgrounds other than bright white and judicious use of (rather than simply “fewer”) graphics will be beneficial to people with learning disabilities. Instead of aDesigner, I would recommend the Colour Contrast Analyzer, available free at http://www.paciellogroup.com/resources/contrast-analyser.html.

  • Pingback: Interesting links week #8-Inside Indivirtual

  • http://www.brianalexflores.com Brian Flores

    This is a very interesting read about the need for Google to make visually accessible apps:

    http://bit.ly/i2GZX5

  • http://www.foilrose.com foilrose

    Some great tips in this article, some of them may appear to be a bit restrictive, but I think there is still plenty of room to push these ideas to their extreme edges and still meet the needs of everyone.

  • http://www.kooldotshosting.com/ TheKoolDots

    Very informative.

    I guess at times (if not always) we tend to design a site base on if it meets our visual expectations, and assume that if it does, it will meet that of the end users.

    Thanks