Design for the Visually Impaired

Make Allowances For Enlarged Text
Often, simply making text larger is all that a visually impaired user requires. We make allowances for this in two ways; firstly we use 15px plus for our website’s body copy as standard. Not only does this slightly larger font size increase legibility we also feel it adds to the design aesthetic. The second measure we take is to give all areas in the mark up that have text present a ‘min-height’. This precaution means the 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 if this approach is not taken.

Deliver a Better Mobile Experience
It’s also worth noting that part of the rationale behind our responsive designs is to improve text legibility. Mobile browsing is becoming ever more popular but can be frustrating looking at a website in miniature on a small screen, particularly for the visually impaired. What we do is enhance the mobile browsing experience by using media queries to present a new set of CSS top improve key layout features. For example a single column approach means we can present text at our desired 15px without having to zoom in and out parts of the page.

Validate The Code
Using standard HTML syntax means avoiding important errors that could appear in the source code. Syntax errors prevent interpretation of the source code by alternate browsers and make it difficult to the user to take in the information. 

Images Can Tell a Story
Because visually impaired users are often unable to see pictures, they rely heavily on the description associated with them. ALT tag for images and TITLE tag for other elements have become increasingly important in order to fully describe all elements of a web page. Page readers will skip images with a blank alt attribute and this can be utilised on none descriptive images such as design elements.

Contrast is Key
A number of the most common eye disorders lead to a significant decrease in contrast sensitivity — that is, the eye’s ability to differentiate between similar shades and levels of brightness.

Many of 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. However, to a user who struggles with contrast sensitivity, this can – literally – be a real headache.

We suggest ensuring there is distinct contrast between elements where possible. We recommend making use of bold text for added readability on low-contrast items and avoiding very thin fonts. Also, don’t use any JavaScript or CSS techniques that would prevent users from highlighting elements of the page with their mouse or changing the default highlight behaviour. Many visually impaired users make use of highlighting as a quick trick to increase contrast and to aid visual focus.

Be Mindful of Colours for Action Items
Genetic colour blindness affects about 8% of all men and about 0.5% of all women to some degree. Then there’s acquired colour blindness, which can result from eye disease or injury (such as glaucoma or cataract) and drives the total number of colour blind users even higher. It may not always be feasible to offer these users pan entirely different colour scheme, and most users generally accept this. However, there is one place, where the use of colour should be given the utmost attention — action items. When creating buttons or notices that call the user’s attention and require their direct interaction, we strongly recommend avoiding using colour combinations that are easily confused by colour blind users (red and green, blue and yellow) and make sure these elements contain clear, visible text or iconography that makes their purpose clear.

An example of this would be placing a red “cancel” button next to a green “submit” button, as it might cause visual confusion to a user who is red-green colour blind. Similarly, users with the seemingly misnomered “blue-yellow” colour blindness (more common in acquired colour blindness) are less able to differentiate between shades of green and blue.

Use Keyboard Shortcuts to Aid Navigation
In addition to being useful to people with screen readers, modern browsers use 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.

NB: It is also worth noting that whilst we deliver a “finished” website, with most businesses using a content management system of one sort or another to update and edit their own websites, it is subsequently down to the individual site editors to carry on and implement the procedures we recommend.