μεταcole

7 Accessibility Sins I’m Tired of Pointing Out to UI/UX Designers

Posted in design, UX by coleman yee on December 30, 2015

Dear UI/UX designer,

I’m tired of seeing these mistakes over and over again coming out from UI/UX designers I’ve worked with.

Some are exceptionally talented, producing beautiful web or app designs consistently, but almost all of them commit at least a few of these sins.

If you ever work with me, I will make sure you have this list burned indelibly into your mind before we start.

Technical note:
Most of my list items are based on the WCAG AA accessibility standards, which is the standard that most organisations (claim they) conform to. If you don’t know what things like WCAG, AA, and Accessibility refer to, go find out. These are basic stuff you should know.

 

Here are the 7 accessibility sins:

 

1. Text contrast too low

Yes, lower contrast text make the design more aesthetically pleasing, sophisticated, or even improve visual hierarchy. But what’s the point of pretty text when I have to strain my eyes to read it?

Go use a contrast checker. You’re gonna hate it, but a lot more people are going to hate you if you don’t.

This is the kind of contrast you love:
Text with contrast ratio at 2.99:1

These are the exact colours used by a well-known organisation on their website. It was designed by a top international design firm. Shameful.

The contrast ratio for the above example is 2.99:1, which is less than the 4.5:1 minimum needed to pass the AA standard.

At 4.54:1, this next example just passes the AA standard (4.5:1), and it’s way more comfortable to read, even for someone with normal eyesight:
Text with contrast ratio at 4.54:1

(For larger headline text, the contrast can be slightly lower at 3:1.)

 

2. Text size too small

If your text size is below 10 points, it’s too small. Like this:
Text too tiny for normal people to read

You should be able to read that if you’re a real designer. You should also be able to tell if a design is off by one pixel. But if you’re designing something for the rest of humanity that does not have razor sharp eyesight like yours, stop using minuscule text.

 

3. USING ALL CAPS

Using all caps is seductive, because it makes the texture of the text look so much more even and appealing.

Until you actually try to read the stuff – all caps is a pain to read quickly, simply because people are not used to it:
Text in all caps

The exception is when you only have a couple of words, like in a short heading. Then it’s not so sinful.

According to WCAG, we should use upper and lower case according to the spelling rules of the text language.

 

4. Using centre-aligned text

Centre-aligned text is so balanced, it’s so hard not to use it, especially if your design has other centred elements.

But as usual, centre-aligned text is harder to read especially when it spans multiple lines. This is because the reader has to spend effort locating the start of each line when reading.
Text using centre alignment

The WCAG simply says this without much explanation:

Avoiding centrally aligned text

I’m way more reasonable – 1 or 2 lines of centre-aligned text is still OK; 3 is really pushing it. Beyond that, don’t. Use left-aligned text instead, unless you’re designing for Arabic or Hebrew or some other right-to-left language.

 

5. Using justified text

Some of you might then ask, “how about justified text”?

I question your aesthetic sense if you use it on a digital interface – good designers know to avoid this because its texture is uneven. In other words, it’s ugly.
Justified text

Besides its lack of aesthetic value, it also affects accessibility.

WCAG has this to say about justified text:

People with certain cognitive disabilities have problems reading text that is both left and right justified. The uneven spacing between words in fully justified text can cause “rivers of white” space to run down the page making reading difficult and in some cases impossible. Text justification can also cause words to be spaced closely together, so that it is difficult for them to locate word boundaries.

I hate to repeat myself, but just use left-aligned text already.

 

6. Text line width too wide

The good news is this mistake is becoming less problem – more designers realise that long line lengths is harder to read, especially when the text spans multiple lines.

The lines in this paragraph of text is too long (line width around 100 characters):
Paragraph of text with line length around 100 characters - too long

This one (line width up to 80 characters) is just within the WCAG AAA guideline:
Paragraph of text with line length around 80 characters - the maximum allowed by WCAG AAA

Just remember to keep your line widths within 80 characters or less.

(“HAH!” the sharper ones of you might point out, “the line length of this very post is way more than 80 characters! You hypocrite!”
You got me there. In my feeble defence, I didn’t design or code this template. Let’s forget this issue and move right along to the 7th sin…)

 

7. Using colour alone to convey information

Last but definitely not least, don’t use colour alone to convey information, for the sake of colourblind users. Yes, use colour, but add some other redundant way to convey information.

See this form:
Form using only colours to convey information

Looks fine to you since you’re not colourblind (I haven’t met any colourblind UI/UX designers yet). But if we remove the colour information…
Same form with the colour information removed
Not very useful now, is it?

Here’s an alternate way to do the same form that works better:
Form using both colour and an asterisk to indicate a required field

Same form with colour removed:
Same form with colour information removed - user can still tell the required fields
That wasn’t so hard, was it?

This issue is also common with diagrams and charts. See this chart with and without colour:
Chart using only colours to convey information

Even your normal users will have a problem if they print your chart in black/white.

The same chart that doesn’t just rely on colour:
Chart using both colour and line texture to convey information
Just a little extra thought and effort and your problem is solved.

 

Moving on…

It’s time you realise that UI/UX design isn’t just about aesthetics, but about many other issues like accessibility. These 7 accessibility sins are by no means exhaustive; they’re just the most common I’ve encountered from designers who don’t know better.

If you’re a UI/UX designer, you now know better.

Advertisements