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.