How to tailor your site for people with poor vision
We’re not getting any younger. Literally. Between 1985 and 2010, the number of people in the UK who were 65 and older increased by 20% to 10.3 million according to the Office for National Statistics. The percentage of under-16s fell.
The Fight for Sight organisation estimates that a third of people over 65 have “difficulties with their eyesight”, while the RNIB puts the number of people who start to lose their sight in the UK at 100 every day.
The 180-Day WebSight Pledge
PC Pro has joined forces with Royal National Institute of Blind People (RNIB) to encourage companies to get their websites and apps to a minimum standard. Click here for all the details, and to take the pledge.
I myself was recently diagnosed as suffering from wet macular degeneration, making me just one of half a million people in the UK with the eyesight-warping condition, for which there’s no cure. Combine the ageing but IT-savvy population with the statistical chance of visual impairment, and the consequences of the way in which websites and apps are coded start to become apparent. A visual impairment doesn’t necessarily mean total blindness, and limited vision presents a different set of problems when using IT than those facing a totally blind person. Yet all too often, as long as an application can be accessed by screen-reader software, the developer will consider it to be an “access-for-all” job well done.
By ignoring the requirements of low-vision users, developers are effectively shutting out large numbers of people and, as already stated, that number is sadly growing all the time. Low vision isn’t a problem that will go away if you ignore it, but as a developer you can make a difference to the lives of those of us who are cursed by it and increase your potential userbase at the same time.
Looking through my eyes
Before you make any well-intentioned usability changes to your website or app, make sure you talk to people with low vision, as well as the organisations that represent them – and don’t forget to test the results with the same usability groups before rolling them out. Get to know what using an average application or visiting an average website might be like for someone with low vision. Although simulators exist, most are designed to show difficulties for people with colour blindness. For some great examples of what someone with various other ailments sees, click here and here.
These will give you a feel for the degree of difficulty people might have in viewing your work, and provide greater understanding of how to make it more accessible. Also try your hand at completing the various navigational tasks to be found at the WebAIM Low Vision Simulation – a representation of how users with macular degeneration can be frustrated by poorly designed web content.
Once you’ve got your head around the user perspective, it’s time to apply the five Cs to your website, apps and software: colour, contrast, configurability, consistency and control.
Colour & contrast
One of the big problems facing low-vision users is a poor ability to distinguish between certain colours. Although it’s easy to think of colour contrasts that will be all but impossible for any low-vision user to read, such as black text on a grey background, other problematic combinations are more surprising: black text against a white background can be, as someone accurately described it to me recently, “like looking at ants on a lightbulb”.
The trouble is that everyone has a different optimum contrast combination (yellow text on a blue background does it for me), so user configurability is the key here. That said, there are best-practice tips you can follow to make life easier for low-vision users: increase the contrast between the text and the background; consider adding support for at least two high-contrast settings (light on dark, and dark on light); and always use solid-colour, not patterned backgrounds, when overlaying text.
The World Wide Web Consortium (W3C) accessibility guidelines also remind web developers that their pages shouldn’t rely on colour alone to convey functional meaning in their website designs. Here’s why: a low-vision user will often use a combination of custom colours with magnification, and, when looking at only a small section of the screen, contextual design clues to navigation are lost. This is compounded on websites where colour changes are used as a distinction between main content and navigation areas.