Designing With Empathy

1st March 2012

Five ways to begin to understand accessibility issues

The chances are quite high that you are looking at this article on some type of full-colour screen, with a text-size that works for you, and you can use a pointing device whenever you want. But it is easy to let your own circumstances and abilities have too much influence on your work, with the result that you might put aside some aspects of accessibility or even forget about it altogether.

When you next have a quiet day, I recommend that you try these practical tips that will give you some insight into what it is like to rely on assistive technology; struggle with colours, contrast, and text size; or navigate with only a keyboard.

Open your mind

Designing for accessibility starts with an open mind. Be prepared to let go of any pre-conceptions that you might hold; be aware that some of what you thought might be wrong; and be willing to try new ways of designing websites. If you think that designing for accessibility is going to hold back your creativity or make your designs look ugly, you would be wrong. That may be true for bad designers, but good designers just see a new challenge.

Try a screen-reader

If you use Windows, download and install the NVDA screen-reader. Mac users can launch VoiceOver, which Apple is nice enough to provide in OS X and iOS. If you are Linux user, you probably already have Orca installed.

Next, you obviously need to find out how to get started. Better not to reinvent the wheel here: Marco Zehe wrote a good introduction to using NVDA with Firefox, and you can find more info in the NVDA user guide. Apple has its own guide to using VoiceOver. VoiceOver is easier to use than most screen-readers.

I recommend that you try using the screen-reader with your monitor switched off as soon as you can, but also try it while looking at the screen. This may give you an idea of what low-vision users of screen-readers (yes, they are not only for blind people) experience when the screen-reader output does not match what is on screen. Discrepancies can occur between the source order and display order, but also sometimes in behaviour.

While we are on the topic of low-vision users, try using a screen magnifier, too. Apple OS X and Windows (all versions) have built-in magnifier/zoom functions.

Navigate with a keyboard

Go to one of your websites and put your mouse to one side for a while. Or better yet, unplug it. Try to navigate, use forms, and interact with JavaScript functionality using only a keyboard. As you Tab through the page, you are looking for a few things that keyboard users need and expect.

  • A logical tab order. The order in which elements receive focus should be as smooth as reasonably possible.
  • Clearly visible and, ideally, consistent CSS focus styles for all focusable elements, including all form controls.
  • JavaScript functionality that responds to pressing Enter exactly as it does to a mouse click, and to focus as it does to a mouse hover.

Change how you view a website

By which I mean partly a physical change, through testing; and partly a change of approach, by thinking more about the effects of what you do. It is important that you have a sense of what vision-impaired users experience when they land on a website that was not designed with them in mind. Maybe it relies on colour to communicate a function or meaning, like anchors that look the same (to them) as the surrounding text. Or maybe the borders of form inputs are indistinct. These and other problems can be caused by:

  • Low foreground:background contrast ratio
  • Similarity in brightness levels between adjacent colours
  • Colours that are diminished by certain types of colour blindness
  • No text-decoration, border, background, etc. for anchors in body text
  • No padding in form inputs
  • Small font-sizes and/or unsuitable typefaces

The simplest way to get a feel for how a colour-blind user will see your website is to view it through a colour-blindness filter, like Vischeck. You can approximate some readability problems by adjusting the text-colour closer to the background-colour until you struggle to see it; reducing the font-size until you cannot read it; reducing your browser’s page zoom; or even adjusting your monitor’s display settings.

Talk to people

And finally, get out there and talk to as wide a range of web users as possible. You may not know anyone who uses assistive technology, or has some other vision-impairment or condition that affects how they use the web, but even if that is the case, that really is no barrier. Ask friends and relatives; talk to charities and disability groups; use social media. Ask people with disabilities for feedback about your websites and talk to them about how they use the web and the problems that they experience.