Accessible design: Be more banana in the world of WCAG 2.2
Top tips for accessible design
The Web Content Accessibility Guidelines (WCAG) 2.2 went live on 5th October 2023. As a UX designer, I’ve been following this heavily. I welcome any change that focuses on accessibility, especially a legal one.
When I started my design career, accessibility scared me! This was mainly because of my mindset. To me, WCAG guidelines were a long checklist of things I just had to do before my designs could go live.
I didn’t understand what accessibility was, resulting in me making a big mistake: I removed the human element, treating accessibility and WCAG guidelines like it was a checklist exercise.
Accessibility is all around us and affects us all. There’s a human element to accessibility in more ways than you would know.
Why do we design with accessibility in mind? Here are some reasons I’ve found in my day to day:
- To support my nan who can read food labels at the supermarket because they were a large enough font. She can continue to shop by herself and keep her independence.
- To support my sister who rang me in a panic, but I couldn’t help her because my signal kept dropping on the train.
- To support my grandad, who this year spent 4 months in hospital. Someone who now relies on public transport but can no longer take himself to the shops as his local bus company cut his stop from the route.
- Finally, to support our future selves. Anyone can face barriers to communication and interaction throughout their life. Accessibility is a big umbrella; it is not just physical disabilities — it also includes situational disabilities and socio-economic restrictions.
As designers, especially those in consultancies, we get the luxury of working across industries and being at the forefront of solving various issues like the ones above. If you are new to design, never really considered accessibility before, or need a refresher, here are some accessibility tips that I keep in mind when designing.
5 top tips for accessible design
1 — Be more banana
Bananas are a great fruit, not just for the taste, but have you ever noticed that bananas use something other than colour alone to display a state?
Design with colour independence in mind — colour should not be used as the only visual means of conveying information (Guideline 1.4 Distinguishable). This is especially important when it comes to states.
Design with a colour browser plug-in (like colorblindly) or turn your design grey scale and see if any elements in your design are colour dependent. Learn from the banana that uses both dots and a brown contrasting colour to indicate changing into a ripe state.
2 — Think API, API, API
An Applicant Programming Interface (API) is a way for two or more computer programs to communicate with each other. WCAG 2.2 brought about Guideline 3.3: input assistance. As designers, we need to help users avoid and correct mistakes. Work with your developers to unlock the benefits of API’s.
Is there any information you currently store that could reduce user input? Address lookups are a notable example of this. Allowing users to select their address after entering a postcode or start of an address can help reduce input errors.
3 — Get a glimpse of what it is like
There are a range of assistive technologies out there that are used by many. Through the design process download this software and use it! Ability Net, a UK charity, has a range of easy-to-read factsheets about how computers and other digital technologies can help people with a range of conditions and impairments. This is a suitable place to start when upskilling on accessibility - it’s one thing to read about accessibility software but another to experience it.
Have you ever noticed that when users interact with a webpage, they don’t read the page word-for-word they skim over your content? Screen reader technologies have a similar feature. They provide a list of links on the page that allow users to navigate to the link they need rather than read the full page.
This is why it’s so important to think about the content of your links. They must not be ambiguous. Links needs to be transparent about the transport or the trigger. Links should set up accurate expectations and then deliver on those expectations. A link that says “click here” provides absolutely no context to the user. The above example has 3 “click here” links…
This is one example of one assistive piece of technology and one feature. Once you explore a range of assistive technologies you will be extremely more mindful when designing.
4 — Be consistent
When it comes to navigation, be consistent (Guideline 3.1 Predictable). Before or during creating your designs, you can build a design system full of accessible components. Design doesn’t need to be complex. Being consistent and keeping it simple is enough.
Take the time to design your buttons, links, typography and colours whilst ensuring they are all accessible. Turn these into components that you can reuse as you design! Not only is it timesaving for you the more you scale a service, but also for your developers. You can invest this time into accessible design and come up with innovative solutions.
The GOV.UK Design System is a fitting example of this. Any government service on GOV.UK must use a set of reusable styles, components and patterns. A community of designers and developers come together and share best practice to keep this design system up to date. I’ve seen this first hand as I’m one of them!
5 — Don’t leave accessible design till the end
Design with accessibility in mind from the beginning. Accessibility is not an optional add-on so you ought to consider it at the start. Don’t waste the start of a project building designs that aren’t accessible. Not only will you end up having to rework this, but you’ll spend less time working on accessibility and finding innovative solutions to reduce barriers to communication later on.
Be sure to share your findings - not only with peers - but the world!
Designers can drive innovation through accessible design. We should share our accessible solutions and encourage more to design in this way. This work will drive innovation — the accessibility issues we face today will not be there tomorrow.
