Removing the ‘design’ from Accessible Web Design

When you think about web design, you probably think of high-resolution imagery, lots of colour and shapes interwoven around punchy headlines and SEO-friendly copy. You’ll expect a menu at the top and some nice prominent call-to-action buttons ready to take your user to a form or a product where they can interact with your business.

The result is a “web-perfect” picture of what a website looks like to an average user.

But what if your user can’t actually see what’s on the screen?

According to WHO, there are 285 million people worldwide who, due to a visual disability, cannot read all content on a website. 39 million of those people are blind and cannot access any of the content via sight.

This becomes a major issue when over 90% of websites don’t meet the basic level of website accessibility, single-A WCAG compliance (Web Content Accessibility Guidelines), set by the World Wide Web Consortium (W3C). 

If you could only access 10% of the websites you needed to on a daily basis, how would your life be different?

Forget social media or your favourite tabloid news site, and aside from Government departments that legally have to provide accessible websites, how do you bank online? book a healthcare appointment? or buy something on one of roughly 15 million e-commerce sites?

Accessible Web Design should be as much about equality as it is about ticking a legal compliance box. We as a society need to be doing more to ensure those with disabilities can freely access the information and services needed in the 21st century. 

However, to design a truly accessible website, you need to be able to remove the design itself.

When visually impaired users visit your website they will, more often than not, use a combination of keyboard navigation and a screen reader to navigate and digest the content on the site. Simply put, rather than using a mouse to select elements or scroll down a page, the tab key is used to move between elements, and a screen reader will read out the content, both visual content and text. 

Take a look at this video from the University of California San Francisco to see tabbed browsing and a screen reader in use:

With 90% of websites failing to meet the basic level of website accessibility, it will come as no surprise that keyboard navigation and screen readers are rarely considered during the design and build of a website. The result is that visually impaired users can’t navigate through websites in a way that makes sense. Key elements of content and navigation may be missed or in the wrong order, making it impossible to understand the page and take any confident action.

So how do we approach web design to ensure all users can interact with a website regardless of disability? 

Strip it back

Let’s not pretend that great web design can’t mean a gorgeous user interface with lots of colour, high-resolution imagery, video, and movement. But it should also have high colour contrast, suitable font sizing for legibility, and content that is presented in a logical order,  using language that is easy to understand. But if you were to strip back all the visuals, what would you be left with? 

Content that is presented in a logical order, using language that is easy to understand.

To achieve this, all website users need to be able to easily navigate, understand, and interact with your website. This means that, whether you’re using a mouse or a screen reader, you can follow a logical order of headings, text, links, images, and navigation items. 

Use clear language

You’ve spent hours sourcing the perfect image, and added a thought-provoking headline next to it that says “A natural beauty”. But without the image, what does that mean to someone hearing it in isolation? What are you referring to?

Accessible web design is as much about straightforward language, as it is about design and technical implementation. 

Content needs to be accessible too, and if your image is showing a beautiful landscape, your headline should be something like “Discover the natural beauty of Gippsland”. When this headline is read out by a screen reader, the user knows instantly what you’re referring to. 

Use performant technical implementation

Once you’ve architected an accessible solution in design and copy, you will of course need to translate it into code. This is where accessible design can be made or broken. 

In any given page, performant accessible web development means implementing markup language, e.g. HTML, that is structured in a way that clearly identifies each element of the page so that they can be navigated using tabbed browsing, and read out using a screen reader. This includes using the correct heading tags, identifying links correctly, table markup, implementing alt tags, and using ARIA landmarks. 

The Web Content Accessibility Guidelines (WCAG) clearly outline technical best practice for each element and should be used as the primary reference for accessible web development.

Test & Iterate

Website accessibility is not set and forget. 

Although approaching a website project with accessibility as a priority should alleviate a number of the most common issues, you will need to thoroughly test during the development process using both automated testing and manual audits.. 

Once the website is live, it is likely to grow and evolve over time with new content and features. To ensure the end-user experience remains accessible, the site will need to be actively tested, reviewed, and iterated upon over time.

At the time of writing, we believe Firefox delivers the best in-browser testing solution for foundational accessibility issues. The accessibility inspector allows you to quickly identify common issues with colour contrast, keyboard navigation, and label tag semantics. 

There are also a number of automated, third-party tools that will provide you with a basic understanding of the issues on your website. As with any automated tool, however, these are far from perfect and lack interpretation and context, two of the core elements of accessibility best practice. The WAVE web accessibility evaluation tool, from WebAIM, is one such tool that does a pretty good job at identifying common issues but does identify issues where they don’t exist if reviewed at face value alone.

Ultimately the best way to evaluate the accessibility of a site is to actually use it. And, if we’re removing the design from the equation for one moment, that means putting the mouse to one side and just using a keyboard and a screen reader. There are a number of free screen reader browser extensions available on Chrome and Firefox, plus MacOS, Windows, and Linux-based operating systems all have built-in solutions.

How to approach an accessible web design project

Website accessibility starts by setting an intention to do better and provide a more inclusive digital experience for all users, regardless of ability.

Accessibility should not be an afterthought, as discussed in a recent article, and requires a concerted commitment to plan, design, and implement a website to meet the WCAG accessibility guidelines.

As more organisations realise the importance of web inclusivity, accessible web design will eventually become the de facto standard. Until then, digital agencies and consultancies like Beleaf can help guide you through the process.

If you have an existing website that you’re looking to improve from an accessibility point of view, we can complete an initial audit to identify high-level issues. If you’re looking to achieve a certain level of accessibility, e.g. AA WCAG 2.1, we can work with you to complete a more comprehensive audit, including real-world accessible user testing.

Talk to us about Website Accessibility Reviews, Design, Development, or optimisation.

Get in touch or call us on (03) 4050 7773