Basic web accessibility for low vision users

The range of visual impairment goes from "needs reading glasses for fine print" all the way to "blind from birth". Maintaining reasonable usability for this vast user group may seem a treacherous task (and to some extent it is indeed), but in this post I'll just focus on the sheer basics everyone needs to know.

Small text

The most obvious usability observation is that low vision users can't read small text. Duh! Depending on the degree of vision loss the user might be able to read the text by putting on glasses or moving closer to the screen or might not see it at all no matter how close up they get. When all else fails, a low vision user will do it the hard way and put a hand-held magnifier up to the screen to read the text - but believe me, you don't want to force make them do that! It works but it's uncomfortable, it's embarrassing and feels degrading. And totally not what you want to do when you're not alone in the room.

Unfortunately, big bulky fonts aren't widely acknowledged for their beauty or usability and clients somehow don't approve of larger font sizes, so designers tend to make default fonts pretty small. This in turn makes the site less accessible to low vision users.

Some web designers try to solve this problem by adding an enlarge text widget at the top of their page (or just beneath the heading of an article) to increase accessibility. It usually looks something like this:

You'd think that just about does the trick, but that's not the case. Of course, it's a nice little gesture of sympathy for some elderly or novice low vision users but many visually impaired don't ever click that button. Why? Here are a few potential reasons:

• they don't notice it (seriously, it's happened to me),
• they don't bother because they're used to hitting Ctrl + "+" (the typical browser shortcut for increasing the zoom level) or using some other system wide accessibility shortcut instead,
• the maximum text size available through the widget is still too small.

The people who do use the triple "A" widget will probably be those with minor vision impairments. The really low vision users will have already found out about browser or operating system accessibility features.

Does this mean that the "enlarge text" button is a worthless addition to your web page? Not necessarily. There are people who will use it. But considering current web browsers' capabilities this feature definitely shouldn't be your top priority.

Fonts

Much more than font size, font face is something you should focus on - especially since it influences usability and user experience for all your users, not only the low vision ones.

If you value your website's usability, use a simple font. Fancy or handwriting style fonts are gorgeous to look at and at the same time a total readability disaster. They're not-so-easy to read for fully sighted users, let alone the visually impaired.

A simple font also makes a site more accessible to users with cognitive, learning or attention span disabilities.

Page layout

Now, here's something that should get your full attention.

Try this simple experiment: open up a couple of websites and view them at a browser zoom level of about 300%. Yes, 300%, it's not a typo.

What do you see?

Notice, that when you magnify a web page too much ("too much" basically meaning "more than the developer found plausible") you suddenly have to cope with lots of horizontal scrolling (and sometimes the page layout goes berserk or parts of the page disappear beyond the edge of the screen never to be seen again, but lets not worry about that for now).

Too much horizontal scrolling is a big usability "no-no" - it's time-consuming and amazingly irritating when you have to scroll back and forth to read every single line of text on the page. It's definitely something you don't want to force on your low vision user. Narrower columns of text definitely make life easier for those using magnification.

There isn't really a standard for optimal line length. If you set your browser zoom to 1000% (assuming the browser allows it) you'd have to put in a word a line and pray for no long words to appear. But that's not the point. Keeping your page looking reasonably usable at a magnification level of 200% or so is a good start.

Color schemes and color contrast

The last key accessibility component of a website is its color and graphics scheme.

One common misconception is that accessible websites are ugly. Yes, they can be ugly. But guess what, inaccessible websites can be ugly too.

For basic accessibility pretty much all you need to do is provide good contrast for the text on your page to make it easily readable.

I'll write a separate post on color contrast at some point, but for now assume that two colors provide good contrast if they are easily distinguishable when viewed in black and white. To get an idea of what "easily distinguishable" means: blue and yellow or white and blue are good but red and green or white and light gray are not.

To make sure you've got a good contrast ratio, put the codes of your chosen text and background colors into a color contrast checker. You should aim for a contrast score of at least 4.5.

Also remember not to overdue it when it comes to patterned surfaces as they are another readability decreasing factor. If possible keep the text's background solid.

Summary

In short, the most basic rules for making a website low vision user friendly are:

• Plan the layout of your page with magnification in mind.
• Keep a good contrast ratio between the text and background.
• Use simple, easy-to-read fonts.
• Be careful when it comes to using patterns and textures.
• Keep the default font a reasonable size - a text enlargement button is a nice addition, but users have many other ways to magnify the text.

More to come soon :)