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.

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.

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.

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.

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