Designing for everyone: why accessible design matters

Accessibility is crucial to reaching everyone, not just people with disabilities.

Authors: Christoph Maurer
  • Reading time: 8 min.
  • Posted on: May 13, 2022

Accessible design is good design. Everything we build should be as inclusive and legible as possible. If we have to sacrifice elegance — so be it. We’re building our website for everyone, not just people who are used to using the web. With this mindset we developed our accessibility principles for Shape History. 


Before we dive into our principles, what does accessible design mean?

Accessible design follows a set of guidelines such as WC3 and POUR to maximise the amount of people who are able to use a website. We traditionally think of this as meeting the needs of people with disabilities, but the practice of making sites accessible also benefits other groups too.

Examples include:

  • elderly users with no broadband
  • users with low literacy
  • users with English as their second language
  • users with bandwidth restrictions
  • smartphone users 

This stretches beyond just web site accessibility. We must also consider brand accessibility, such as font, colours, layout, style elements, as well as content accessibility, which includes elements such as clear plain writing and descriptive link texts.

What are our accessibility principles?

1. LESS ASSUMPTION, MORE INCLUSION.

We work closely with a diverse range of people when creating & testing websites to avoid unconscious bias and ensure usability across many different groups. 

2. ACCESSIBILITY STARTS WITH BRANDING.

Before discussing web accessibility, we must first think about how these principles apply to the brand itself because everything else stems from that. We always aim to use fonts, colours & style elements that work towards being accessible.  

3. SIMPLICITY IS KEY.

We start with a simplistic approach to the web design so that it is accessible yet also flexible to change. Additional elements can then introduce more complexity later down the line.

4. EVERYONE DESERVES A SECOND CHANCE.

The user experience should feel effortless, so we do everything we can to ensure that frustrations are kept to a minimum. This includes clear instructions, cancellation options, and other ways to help the user navigate through any mistakes that might be made. 

5. THINKING ABOUT THE BIG PICTURE.

Web sites are accessed using a wide range of technologies across many different platforms and browsers, so we ensure that every design is as responsive and flexible as possible with that in mind. 

6. THE INTERNET IS FOR EVERYONE.

Accessibility isn’t just for regular web users, so it’s vital that everything we design is as inclusive and user-friendly as possible, regardless of personal experience and web aptitude.


How can we make sure to be accessible when working with partners that might not have the budget for a full accessibility feature?

As a designer with the vision of making all brands as accessible as possible, I think there are ways to improve a brand without a big budget.  We have created 3 levels of accessibility within our agency with the aim that every project we create starts at least with Level 1.

LEVEL 01 
This is the most basic form of accessibility and has nothing to do with any fancy features, this is focusing more on visual & structural accessibility.  

Brand:

  • Colour contract has a ratio of 4.5:1 ratio between the foreground colour (e.g. text, links, etc.) and the background colour
  • Readable font sizes & styles 
  • Layout follows a linear & logical structure

Copy:

  • Added text alternatives for non text content
  • Keep content short, clear and simple.
  • Use images & diagram to support text

UX:

  • Being able to use with keyboard only 
  • Ensure there are no time restrictions to read or use any content 
  • Predictable pages  which operate in a consistent way  
  • Responsive design for devices as well as technologies 
  • Various headline styles are used correctly (H1,H2,H3,…)

LEVEL 02
In addition to Level 01, we also add the following functionalities: 

  • Size adjustments for fonts feature 
  • Change contrast feature 
  • Translation tool feature 
  • Text only function
  • Input assistance feature, this helps users to avoid & correct mistakes

LEVEL 03 
In addition to to Levels 01+02, we add the following functionalities: 

  • Ruler function 
  • Screen mask function
  • Dictionary function 
  • Audio file 
  • Magnifying glass

How do we make sure we reach our accessibility goals?

We follow a simple but effective process within the agency: We learn, test, improve and refine.

01. LEARN: 

We attend accessibility events & courses to educate ourselves and the whole team frequently. 

03. IMPROVE:

We implement our findings and feedback into the build of the website to make important improvements to the overall user experience. 

02. TEST:

We test our design with the right audience without just making assumptions. We also refer to  accessibility checklists for both us internally and also the partners we work with.

04. REFINE: 

We have the mentality that you can never know enough. So after each project, we reflect on the process and then update our own processes accordingly to constantly improve ourselves and work towards a better future. 


We know that accessibility is a complex topic and by the time you read this, guidelines might have already been updated and improved. Let’s do our best to create an accessible website for EVERYONE so no-one misses out on anything important.

Have fun creating inclusive designs.