Good design is accessible: top tips

But, but... accessibility makes design less creative…?

Well, no. Good design is inherently accessible. Saying it stops you being creative is a bad excuse for NOT doing a good design. I’m going to take you through why it is so, purely from a visual design perspective. If you are interested in the more technical side of accessibility, here is a good read from GDS or watch the final part of our accessibility talk (at 1:01:56).

Otherwise, read on...

Who are we doing this for?

When we think of accessibility, we tend to think these people are only a tiny part of your audience. But is that true?

Thinking in terms of visual design, here are some numbers to consider.

Mild visual impairment

I wear glasses. So does something like over 70% of UK population (1). Sounds too high but it includes contact lens and reading glasses. That's a lot of people.

People's vision naturally declines with age too. There  older generations are more and more tech savvy - 11 million people are over 65 in UK (2). There are more people aged 60 and above than under 18 according to the 2011 census data (3).

Colour blindness

Maybe this is the first sight related condition you think of. There are 2.7 million colour blind people in UK (about 4.5% of UK population). (4)

Ichihara test Red Badger
Ichihara test Red Badger

What can you see in above two images? For some, these two look identical. Others might see a figure on the left but none on the right.

These are called Ishihara test - common test used to check colour blindness. The left image is the actual test, and the right image is showing how it would look like for someone with Protanopia (affects red or green) form of colour blindness using a photoshop filter.

Blindness

You might think it is strange to consider blindness when talking about visual design, but the design has huge impact on how blind people can interact with a web page via text reader.

Almost 2 million people in the UK are living with sight loss. That’s approximately 1 in 30 of UK population. (5)

Dyslexia

Again it may not be the first thing to come to your mind, but it affects 10% of UK population - 4% severely so. (6)

Devices and browsers

If you use common cross browser testing tools such as BrowserStack, it has over 70 device and browser combinations. I saw an ad for a device detection service that claims to detect over 300,000 combinations, some of those can also be considered a disadvantage.

Let’s put all the numbers into context. In August 2015 in UK, only 1.86% people were using IE8 when all devices are included. Desktop share is 3.1%. (7) And the industry still spends loads of money and time to cater for IE8.

Different ability

So. The minority isn't really that minority. The thing is, it is not easy to draw a clear line between disability and ability. It is just that there are different ways to consume the content you are designing. Thinking about accessibility basically helps making your design more versatile - even responsive ready.

7 accessibility tips

1. Good typography is semantic and responsive

Good typography is about making relationships between the words and sentences clear. It is about identifying hierarchy among your content and presenting them visually so that these relationships are clear.

For example, if we take a typical dictionary entry as an example, and strip all typographical treatment, it looks like this.

dictionary-1
dictionary-1

In the context of a whole page, there is no chance you'll find the word you're looking for if it is designed like this.

But we can use different weight, style, spacing to make a clearer difference between each element of this content.

dictionary-2
dictionary-2

Once you identified these relationships, it is powerful enough to take some modification. We can add line breaks.

dictionary-4
dictionary-4

Or change column width.

dictionary-5
dictionary-5

Good typography is versatile and a must have for any responsive design. When we have to cater for so many different viewport sizes, you can no longer guarantee or predict the exact location of any content all the time. But if your typographical hierarchy is clear, it will still work in the way you intended.

It is the same for screen readers. Your typographical hierarchy will be easily interpreted into semantic coding and contribute to the ease of understanding when accessed via screen readers.

To achieve this, 'content first' approach to design is crucial. It's hard to design the relationship between words when everything is "Lorem ipsum”. On the side note, 'content first' is also an integral part of a lean and agile approach to user experience design. But that’s for another post...

2. Large & spacious

Forget the fold.

Okay, that's a bit controversial but I'm sure everyone agrees that there is no 'standard' screen sizes any more as I mentioned earlier. Not like the days of 1024 x 768 desktop screen.

There are so many variations.

What you should prioritise instead, is the ease of reading. Dyslexia in particular, calls for a clear space around each piece of information. Also people with some level of visual impairment will appreciate the larger and clearer presentation.

It is more important that each element is digestible and has a clear flow, rather than how much you can fit in the first view.

Forget the fold, and make a compelling case for scrolling. If your content is engaging and makes it clear that it goes on, your audience will scroll.

3. Be picky with typeface

This affects mainly the dyslexic audience. And they prefer each letter to look very distinct. For example, having ‘b’ and ‘d’ completely a mirror of each other is very confusing. British Dyslexia Association has a good read on this subject.

bd
bd

I see this as a good opportunity to add some personality to the brand and definitely will consider when there is a room for us to select a different typeface.

4. Information should not be communicated by colour alone

“So, as I am a colour blind, I can't actually see the status. But the green one means ‘complete’”

A developer

Believe me or not, above statement was actually made in one of showcase meetings I attended. Why do you build something you can’t see…?

traffic-light-system-blog-1
traffic-light-system-blog-1

The example above shows a familiar colour coding system on a food package. I have applied a filter in Photoshop (View > Proof setup) to simulate how it looks for someone with deuteranopia which affects the colour green. You might be able to tell the colours are different, but it’s hard to tell what is what.

Here is the full colour version.

traffic-light-system-blog-2
traffic-light-system-blog-2

Okay, now you know there are three colours. But this is based on traffic light system - so even if you CAN see the colours, you might not know what it represents in this context. What is “go” equivalent to the food? Eat now? Eat fast?

With this example, the solution was to use labels as well as colour coding. It helps people to learn what colours are associated with what information, and for some, to understand information without colours.

traffic-light-system-blog-3
traffic-light-system-blog-3

If we think this in terms of a web design context…

colours-original
colours-original

This lovely colour used on a popular website will look like this with Protanopia filter on.

colours-filtered
colours-filtered

As the example above shows, functionality that relies on colours can become invisible. You can see how easily inline links disappear, whereas you can still see the buttons.

So remember that blue doesn’t mean a link. It’s the marking and shapes you use alongside the colour that makes an element a link visually. It could be arrows, icons, buttons, or underlines. You can still associate colours with them and that can be a powerful reinforcer.

A quick note of caution for the use of underlines. It is a popular short hand for links, but long underlines - especially one that goes over multiple lines or bulleted lists - makes reading harder for any audience without even considering accessibility. Have a quick think before you use one and consider if it is appropriate.

5. Mind the contrast

This is fairly mechanical part of the process. In order to pass certain levels of accessibility standard, you should measure contrast between background and text colour in mathematical terms.

It used to be pretty crude, but the current version takes into account the size and boldness of text as well as colour contrast. It is not perfect though - it defines ‘large’ text as 14px and bold, which is rapidly becoming the standard size or even ‘small’. I tend to use 16px as the standard body copy size these days. And if you are using 160px letters, it will probably be visible if it fails the test by a small margin.

Do the contrast test as early as possible. It makes you more aware of characteristics each colour has and more deliberate in your choices. It is actually quite good fun (or is it just me?) trying to tweak the colour slightly to get a ‘pass'. I use Color Contrast Checker by WebAIM to check the numbers.

Yes, it might look pretty with that colour combination on your screen. But if your design effectively prevents nearly 5% of your customer base (about 3 million in UK) from buying your products or accessing your services, surely it’s not a good idea?

6. Give a bit of colour to your background

Knocking back the glare that white screen gives will make text easier to read for dyslexic audience. Also there are so many site with white background these days, I think it will add a bit of personality to your brand.

7. Consider printing

print
print

One of those papers obviously spent a little time thinking about print out. When the printout removes all the clutter of a website, it really helps the  dyslexic audience to read. There are many audiences that still find it easier to consume content as a print out, so it actually serves a lot of people to pay  some attention to print layout.

If the site you’re designing is all about reading the long form writing, I’d definitely recommend spending a bit of time thinking about printing.

Design that communicates

Here are the recap of 7 tips.

  1. Semantic typography is good
  2. Think large and spacious (and forget the fold)
  3. Choose your fonts like you mean it
  4. Information should NOT be communicated by colour alone
  5. Mind the contrast
  6. Consider background colour
  7. Plan for printing

Accessibility is not about lowering your standards. It’s about making your design communicate better. It actually helps you to make your design more versatile. And to be honest, it’s not a huge task especially if you are aware of it from the beginning.

So, why don’t you give it a go?

---

We are looking for a new Designer to join us and work on fun projects like Fortnum & Mason website. If you are interested, take a look at the job details here and get in touch! 

Resources

  • Photoshop / Illustrator - Protanopia / Deuteranopia colour proof - Go to View > Proof Setup to see how your design looks like for someone with colour blindness
  • Chrome extension “Spectrum”, “See” - these let you simulate some forms of visual impairments
  • Colour contrast

Footnotes

If you’re interested in stats. Here are the sources of my numbers.

  1. The College of Optometrists
  2. AgeUK
  3. AgeUK
  4. Colour Blindness Awareness
  5. RNIB
  6. British Dyslexia Association
  7. StatCounter