As a designer, why should I bother with accessibility?

Like many designers I’ve been awkwardly skirting the boundaries of accessibility for years; always keen to learn more but not really sure where to start. I regularly open the Web Content Accessibility Guidelines (WCAG open_in_new) but find them overwhelming complex. Kind of ironic, given they contain the principles to make products easier to use!

According to SCOPE, there are 13.9 million disabled people in the UK open_in_new. Many more people have a temporary disability like recovering from an injury or an illness. We tend to think of accessibility as helping people with physical impairments who use assistive technology like screen readers but this is not always the case. A person’s ability to use your product might be impaired by old technology or by their situation or environment. For instance, they could have a small baby, be in a noisy cafe or outside in bright sunlight.

Accessibility is about making sure your product can be used by as many people as possible. Make sure that no one is being excluded. As the nerdy kid who was always picked last for the rounders team I like this idea.

As a designer of products that help folks to manage their money, I realised I was doing a lot of customers a huge and frankly discourteous disservice by failing to appreciate their needs. I look back in horror at some of the light grey text and teeny tiny font sizes I subjected people to.

So I set myself a challenge to learn more about accessibility. Step 1: methodically work through WCAG guidelines and create myself a checklist of WCAG criteria which relate to design.

Isn’t accessibility just for developers?

This is laaaaazy designer thinking. By baking accessibility in from the start of a project you can iron out a lot of bumps before the product gets near code. Start by making small, sensible decisions about:

  • Page layout and grid: Will text reflow if the screen is resized or if the device orientation is changed?

  • Content order: Website content has to follow a semantic structure. Does your design have headings and content in the right order?

  • Colours: Do the colours you’re suggesting have enough contrast alongside each other? Will these colours be meaningful for colour blind people?

  • Navigation: Is it consistent across all screens?

  • Placeholder text: Are you being thoughtful about the labels and error messages you write? Your little snippets of microcopy often carry through to the final product. Above all, it may cause inconsistencies or even embarrassment your team may suffer with for all eternity! ( I speak from experience here 🙂 )

Getting these small bits right in design will ultimately lead to a more accessible end product.

I’ve found the answer to those UI questions no-one ever seems to know the answer to

Working through WCAG guidelines also helped me answer lots of the silly little niggly questions I get asked as a designer that no-one on the team knows the answer to like…

Do disabled buttons need to be accessible?
Technically no (see WCAG 1.4.3 open_in_new) …I mean WTF?! If you are considering using a button with a disabled state read this excellent article on how disabled button suck open_in_new.

Does a focus state need to be different to a mouseover state?
Yes (see WCAG 2.4.7 open_in_new). A focus state needs to be different to the mouse hover state so sighted users can visually see a difference. Take that one, grumpy developer!

Is making a link coloured enough to indicate it’s a link?
Nope (see WCAG 1.4.1 open_in_new). In other words, don’t rely on colour alone to communicate meaning or to distinguish visual elements.

WHAT ABOUT TEXT IN ALL CAPITALS?
Not called out in WCAG 2.1, though guidance looks forthcoming in the Accessibility Requirements for People with Low Vision draft (see 3.3.4 open_in_new) “Text in all capital letters is more difficult to read for most people, with and without disabilities”.


You read right to the end? Congrats on being *almost* as nerdy as me!

My thinking came from these useful sources:

Accessibility checklist for designers

Here’s an accessibility checklist I’m working on to help ensure the products I design can be used by as many people as possible. I appreciate accessibility is more than just a checklist of WCAG criteria but as a complete beginner, it’s proving a useful place to start! I’m always learning so if you spot any obvious errors or omissions get in touch and help me out.

As a designer, why should I bother with accessibility?

Colour

Use of Colour (A)

Don’t rely on colour alone to communicate meaning or to distinguish visual elements. People see colours differently, are colour blind or have difficulty telling different colours apart. WCAG guidelines 1.4.1 open_in_new How can I use colour thoughtfully?

Contrast minimum (AA)

Giving text a strong contrast colour against the background makes it easier for people to read and interact with. The contrast ratio should be at least: 4.5:1 for text smaller than 24px, or 19px bold. 3:1 for text larger than 24px, or 19px bold. WCAG guidelines 1.4.3 open_in_new How can I test colour contrast?

Non-Text contrast (AA)

All components and graphics must have a contrast ratio of at least 3:1 against adjacent colours, unless they are purely decorative. This applies to all elements required to understand the content of a page including icons, charts, infographics and controls, along with states like hover or active. Inactive components/states and purely decorative elements are not required to meet this contrast ratio. WCAG guidelines 1.4.11 open_in_new How can I test non-text colour contrast? Install or use a colour contrast checker open_in_new. Use the value for ‘non-text contrast’ or 'graphical objects and user interface components' rather than for text. Related criteria

Focus visible (AA)

It must be easy to tell which element has keyboard focus. This helps sighted keyboard users orient themselves within the page, and confidently interact with it. WCAG guidelines 2.4.7 open_in_new How can I make sure there is a visible focus state?
  • Provide a strong visible focus indicator to interactive elements like links, buttons and form fields.
  • The focus state needs to be different to the mouse hover state so the user can visually see a difference.
  • Focus indicators needs a 3:1 colour contrast ratio against the background colour. Use a colour contrast checker open_in_new to check this.
  • If in doubt use the browser default focus indicator.

Copy

As a designer, you often write placeholder copy without thoughtful consideration; button text, link text, headings. Even with a copywriter or content designer on the case these small bits of microcopy often carry through to development. Being thoughtful about your copy from the outset can have a positive impact on the final journey.

Images of text (AA)

Text that is essential to the journey must not be presented as part of an image. Text inside an image cannot be resized and deteriorates in quality when magnified. WCAG guidelines 1.4.5 open_in_new It's easy to meet this criteria
  • Just don't make images of text. It's not 1999. 🙂

Headings and labels (AA)

Headings must describe the topic or purpose of the content in the section below. Labels must indicate the purpose of the field they relate to. Headings must be used appropriately and nested correctly, only using a capital letter for the first word. WCAG guidelines 2.4.6 open_in_new What makes a good heading or label?
  • Clear and unambiguous copy helps people with reading difficulties to understand the topic and the purpose of the content. It also helps screen reader users to navigate to the relevant sections of content on the page.
  • When laying out your design be thoughtful about how copy is sectioned and how form fields are labelled. Avoiding ambiguity and applying some common sense is helpful to all users.

Layout

Meaningful sequence (A)

Order content in your designs to ensure reading and navigation order are be logical and intuitive. WCAG guidelines 1.3.2 open_in_new Why is a meaningful sequence important?
  • If the order of the content is important, the user must access the content in this order. A person might be accessing the page with the intended visual styling, with CSS styling disabled or listening to it with a screen reader.
  • Learn about the semantic markup of a web page. Ordering content in your designs thoughtfully will ensure screens are structured correctly. This will save time and hassle in development.
Related links

Orientation (AA)

A screen must not be locked to either horizontal or vertical orientation, unless this is essential. Essential applications could be a television screen, a messaging or virtual reality app. WCAG guidelines 1.3.4 open_in_new

Resize text (AA)

It must be possible for people to increase the size of text by up to 200%. This helps ensure that partially sighted people can comfortably read your content. Whilst this change will be made in code, it is worth bearing in mind when designing page layouts. Check that the copy can flow at a larger size and is not constrained by the layout.  WCAG guidelines 1.4.4 open_in_new

Consistent navigation (AA)

If navigation is repeated across multiple pages, all pages must be presented in a consistent manner. A consistent menu and page structure makes it easier for people to learn how to navigate. It also enables people to develop strategies for more efficient navigation, like screen reader shortcuts.  WCAG guidelines 3.2.3 open_in_new How do I make navigation consistent?
  • If your product has a navigation menu or a breadcrumb used on multiple pages, make sure it looks and operates the same way on each page.

Content

Sensory characteristics (A)

Instructions must not rely upon shape, size or visual location. Avoid instructions like “click the red button to continue” or “instructions are in the right-hand column”. WCAG guidelines 1.3.3 open_in_new

Consistent identitication (AA)

If a feature is used in multiple places it must be identified in a consistent way. WCAG guidelines 3.2.4 open_in_new How can I identify features consistently?
  • Label buttons and links consistently throughout a journey, eg, Next or Continue.
  • If form fields have the same purpose they need to be labelled consistently wherever used.
  • Keep icons consistent if they are used for a specific purpose.

Accessibility checklist: Sources: