Work with us

Web Accessibility

How to reach 4.4 million more users

6 June 2022

Emerald Cowell

Written by

Emerald Cowell

Digital Strategy Director

Making your digital experience more accessible isn’t as hard as you think. Here’s how to do it.

At Liquorice, we believe you should design and build your website to reach as many users as possible — regardless of the platform’s function, the intended users, or the industry. In fact, we think web accessibility should be a mandatory requirement for every digital experience.

Header 1800x800

But, what is web accessibility?

According to W3, the founders of the Web Content Accessible Guidelines (WCAG 2.1), it’s the process with which websites, tools, and technologies are designed and developed to enable people with disabilities to use them (W3, 2021).

To make a website accessible, you need to consider audiences with a wide range of disabilities and differences, including visual, auditory, physical, verbal, cognitive, language, learning, and neurological.

The thing is, 1 in 6 Australians has a disability (AIHW, 2020). That’s 4.4 million users. You wouldn’t purposely or knowingly exclude 4.4 million users from accessing your website, right? Web accessibility benefits not only a wide range of users, but businesses, organisations, and the community as a whole.

Side note: What is WCAG 2.1? WCAG standards for Web Content Accessible Guidelines, which is a set of standards established by W3. They are now up to version 2.1. There are three levels of accessibility: A, AA & AAA. The most common level for Australian organisations to meet is level AA.


So, what are the core values of website accessibility?

  1. Perceivable — Information and user interface components must be presentable to users in ways they can perceive.
  2. Operable — User interface components and navigation must be operable.
  3. Understandable — Information and the operation of the user interface must be understandable.
  4. Robust — Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
Browsers

Web accessibility has been a notoriously difficult task for agencies to test in-house, and it’s often outsourced to a specialist provider such as Vision Australia or Centre for Inclusive Design. Indeed, many government organisations are required to receive official WCAG certification from these organisations.

However, there are ways to simplify this process and make website accessibility more… accessible.

Open-source solutions

Technological trends such as open-source code, software plugins and automation have made it easier than ever to ensure web accessibility is integrated into our creative processes.

Open source code allows us to reuse components and plugins tested by a community of developers that already meet web accessibility. Automation means that we can run instant tests using Chrome plugins to ensure that we meet WCAG 2.1 requirements.

Icons

Here are some open source accessibility libraries and plugins:

  • Contrast by Mark and Alex Carr — Figma plugin that checks colour contrast across your designs.
  • Color Blind by Sam Mason de Caires — Figma plugin that allows you to view your designs from the perspective of 8 different colour deficiencies.
  • Able by Sondre Kvam— This Figma plugin does pretty much everything. Unfortunately, it doesn’t work with Autolayouts, which is a shame (we love Autolayouts at Liquorice).
  • Wagtail accessibility — open-source code to assist with Wagtail accessibility.
  • Mui — React.js library that offers extensive support across all components.
  • Google Lighthouse — Google app for testing site performances and speed.
  • Site Improve — Browser plugin that creates an automated WCAG 2.1 code report.
  • Screenreader — Browser plugin that automates screen reader functionality.

Accessibility to-dos

One of the most important things to test is whether user expectations are being met. That is, whether your digital platform functions in a way that most users would expect it to. This is where a focus on user experience, prototyping and user testing is crucial; meeting web accessibility requirements without considering the user experience (and testing it), would be virtually impossible.

At Liquorice, we’ve established our own WCAG 2.1 testing cheat sheets which outline each of the A, AA & AAA criteria. Once we’ve completed that checklist, we then use one of our automated browser plugins to test our staging sites or prototypes, and report on any criterion that has failed.

Checklist

Once we’ve rectified the issue, we create a final report for our client, which demonstrates how the site meets all criteria.

Here are a few key takeaways on accessibility for your next digital experience:

  • Colour Contrast — Does your design meet the correct colour contrast ratio of at least 4.5:1 minimum? See our article about colour contrast here.
  • Responsiveness — Have you built your site with mobile-first consideration? And does it work across a variety of browsers? Think about where and when your users might be accessing your website. They could be browsing on their phone while commuting, or on their iPad during a meeting.
  • Alternative text for images — Alt text is crucial for users who use screen readers to interpret your site. Create descriptions that clearly describe the image in plain english.
  • Transcripts for audio and video — Have you added transcripts for audio and video, as well as closed captions on your videos?
  • Font size — Are font sizes large enough for all users? Do they meet a 16-point minimum for mobile?
  • Keyboard — Does your digital experience allow users to navigate through content using their keyboard?
  • Screen Reader — Is your content in a logical order? Are links clearly labelled and defined?
  • Play and pause buttons — Ensure you have play and pause buttons on all your audio and video content. Never presume a user wants to hear music or see moving graphics.
  • Plain English — Is your content written in plain English? Is it easy to understand? Keep content simple and to-the-point.
  • Skip to Content — Have you enabled skip-to-content functionality? This allows users to skip past the menu/navigation bar and straight to the content when navigating with a screen reader or keyboard.
  • Headings — Do you use standard heading structures? i.e. H1, H2, H3. Logically structured headings are not only helpful for screen readers, but they’re great for SEO.

Accessibility in action

Here are just some of the ways we've used this expertise to help our clients create better experiences:

  1. We recently designed a website which is accessible to the 185,767 people who live in Moreland City Council.
  2. We undertook a large scale WCAG 2.1 review of ACMI’s new website looking at both a visitor experience perspective and marketing site.
  3. Through our ongoing partnership with the Alcohol and Drug Foundation, we use community consultation to ensure the website meets accessibility requirements.
  4. We’re also currently working with Yooralla, who are leaders in disability support, to ensure WCAG2.1 AA is at the forefront of their exciting new website design (stay tuned to hear more).

For a consultation, more advice or to understand how we might be able to make your website more accessible, feel free to email me directly at emerald@liquorice.com.au

Got a project in mind?

We live and work on the lands of the Wurundjeri people. We acknowledge their ownership of the land and pay our respects to their Elders past and present.

© Liquorice 2024