Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

What techniques should I be using when testing of a website for visually impaired users that commonly occur due to aging such as macular degeneration, needing reading glasses, possible loss of contrast ranges, etc.?

share|improve this question
1  
The W3C give a list of many tool to validate some or many issues for WCAG conformance. Some are Browser plugins some free some commercial w3.org/WAI/ER/tools/complete –  ColdCat Dec 4 '13 at 14:36
    
I've removed the request for tools - shopping request questions aren't really fit for this site. However, the general concept of how to test for visually impaired users is a good question. Some tool examples will likely come out in the answers, but you shouldn't just ask for tools - ask for the technique needed. –  JonW Dec 4 '13 at 16:20

4 Answers 4

up vote 9 down vote accepted

Note: The reason I wrote this answer highlighting the different checkpoints a person must do to ensure his site is accessible to people with limited vision is because I believe an understanding of the faults or design issues in the site will help define what the problems users might face while accessing the site

For starters, I strongly recommend considering testing your website to see how it handles screen readers as that is one potential user base you cannot avoid and also you cannot always assume that people might use magnifying tools to read content in case of low vision and screen readers are an expected accessibility tool not only for "blind" people but also people with limited vision. So by avoiding them you are technically alienating your own user group.

That said, there are some recommended practices about what should be done for ensuring visually impaired users can access your website.

Reduced visual acuity is probably the best-known aging problem, and yet websites with tiny type are legion. Sites that target seniors should use at least 12-point fonts as the default. And all sites, whether or not they specifically target seniors, should let users increase text size as desired—especially if the site’s default is a small font size.

  • Ensure design consistency: Most senior citizens are generally aware of the standard colors for links and would usually assume an item with that color is a link. Avoid trying to implement new design colors for links and other active interaction elements. To quote the same Norman Neilson report referenced before

Hypertext links are essential design components; using large text for them is especially important for two reasons: 1) to ensure readability, and 2) to make them more prominent targets for clicking. Also, you should avoid tightly clustered links; using white space to separate links decreases erroneous clicks and increases the speed at which users hit the correct link. This rule also applies to command buttons and other interaction objects, all of which should be reasonably large to facilitate easy clicking.

I also recommend having a look at this article from Mashable

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.

Use a sans serif typeface, such as Helvetica, that is not condensed. Avoid the use of serif, novelty, and display typefaces.

  • Usage of color : Certain colors can be difficult for people with limited vision to precieve. There are also different types of colorblindness and you need to ensure that the colors you select can be understood by people with limited vision or even color blindness. You can also use a color blind simulator to see how your designs stack up such as http://colorfilter.wickline.org/ .Also ensure the color contrast is significantly high so that users can read the content without having to strain To quote the this article from color combos

Use of appropriate colors can be an important part of the ease-of-use for those people with special vision needs. Not all monitors reproduce accurately the colors you may have chosen for your web design. By staying within the recognized 216 “browser-safe color selections,” you can be assured that the colors you choose will be passed on without change. This is important because certain color combinations lose their effectiveness when the level of contrast is diminished to vision-impaired viewers. Degrees of hue, lightness and saturation can be less distinguishable, which can be a significant problem, especially if the colors are being used as primary indicators.

By exaggerating the contrasts or light differences between foreground and background screen space, the person with a vision-impairment can more easily differentiate the colors. For the same reason, never use colors of similar lightness next to each other. Lighten the lights, blue-green, green, yellow and orange and darken the dark colors, blue, violet, purple and red for the most effective use of contrast. The more dramatically different you can make each area, the more clarity your web page will have.

Removing extraneous graphics and “busy-work” can un-clutter your website. A clean and simple layout is much easier to read and navigate. Designing in black and white with minimal added colors for emphasis is the best approach. Yellow, blue, white and black are the least confusing colors for people with vision problems. In fact, while it may not be the most attractive, 24-point white or light yellow text on a black background is considered the most readable color scheme for online users.

  • Allow users to access your site by using the keyboard: While I know you mentioned you didnt want to support screen readers and I strongly dissuade you against taking such a step, also ensure your site can be navigated by keyboard as that would allow users to quickly navigate to content using the keyboard shortcuts while also allowing screen readers to scan the content. To quote this article from mashable

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.

In closing here are some links worth checking out

Make Your Pages Accessible to the Visually Impaired

WebAim : understanding blindness

5 Web Accessibility Improvement Tools

share|improve this answer

I assume you are asking how to do this manually, after having already built your website? However, it is possible to automate some of this testing while you are still developing. I'm not sure how many people are aware that this is possible, but I hope you (or your developers) find it useful.

If you have an automated integration testing environment set up (automated builds, automated tests etc.) it would be possible to automate the testing of certain pages by using capybara-accessible (for a Ruby on Rails environment). It allows you to automatically run accessibility audits for each page visited by a feature test (typically written using a tool such as RSpec). The audits are automatically performed by Google's accessibility developer tools, with reports generated from their open source Javascript libraries.

An example of some of the audit rules that are included in the reports:

  • minimum color contrast
  • label associations with inputs
  • presence of alt attributes
  • valid use of ARIA roles

One of the main benefits of automated accessibility testing (as with any automated code testing really), is the ability to pick up if a change in your code weeks or months down the line changes the accessibility of your site in ways that you may not have foreseen.

Another benefit is the reduced workload on your QA teams, allowing them to focus on specific interactions or complex pages.

This may not be a silver bullet, but may give you confidence on at least a baseline level of accessibility going forward.

share|improve this answer

There are several tools that can be used to verify contrast levels to make sure there is enough contrast between the color of your type and the background it's on. Here's a link to 10 such tools. http://www.456bereastreet.com/archive/200709/10_colour_contrast_checking_tools_to_improve_the_accessibility_of_your_design/

Regarding font size, just make sure you're using EM's to proportionally size things so that users can change their browser zoom settings and your layouts will still look OK.

If your user's eyesight is so bad that they need to use a screen reader, I would recommend doing a Google search for consultants that will help walk you through the process of getting your website to function well for screen readers. JAWS ( http://en.wikipedia.org/wiki/JAWS_(screen_reader) ) is currently the most popular. If you don't have the money for a consultant, download JAWS from the maker's website and play around with it along with reading their online tutorials. Getting your website to work properly with screen readers is tricky business, I've worked on a project before that required it and we had to hire a consultant.

share|improve this answer
    
We don't have intention for specifically supporting screen readers (one of the reasons i never specifically mentioned blindness in my question). Our user base has significant amounts of senior citizens and it crossed my mind that I can't take reading things for granted with my above perfect (20/15 or even 20/10) laser corrected vision. –  Chris Marisic Dec 4 '13 at 15:16
4  
@ChrisMarisic You don't intend supporting the site for screen readers? That's crazy, you don't have to do anything differently to support screen readers (unlike you would have to to add CSS support for IE7 for instance), you just have to do things properly and using HTML standards and it'll just work on them. Also; it's not just blind people who use screen readers. –  JonW Dec 4 '13 at 16:18
    
In Chris' defense, there's making a site screen reader readable, and doing it well. To do it well text needs to be read in a logical order/tree relative to what the user is trying to accomplish. Sometimes it's best to have a accessibility specialist look over your site and make recommendations. –  taylorhayward Dec 4 '13 at 17:24
    
A properly built site should be fully screen reader compliant by default. –  DA01 Dec 4 '13 at 17:39
2  
It's not unfortunate if it doesn't work...it's broken. If you're taking the time for testing accessibility, it doesn't make much sense to just pick particular ones. –  DA01 Dec 4 '13 at 21:30

Eyesight starts to degenerate from about mid 40s on and by 50 many people will be needing reading glasses.

People tend to resist getting glasses so there's a age group around 45 - 55 who will moan about your site if they can't read it because they don't want to wear glasses.

As always, the best way to test your website, is to recruit some users in this age range and test how they get on with it.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.