What the heck is accessibility?!
With more and more aspects of our daily lives happening on screen, it’s never been more important as designers to make sure all of the content we create takes into account the needs of as many users as possible.
So what is web accessibility? WebAIM estimates that roughly a fifth of the population have some form of disability or impairment. Now these impairments may not all be severe enough to make access to content difficult, but it is a significant number of users – potential customers - that could be excluded.
To explain this better here’s a little metaphor… Imagine yourself arriving at an airport ready to go on your holiday. You know that you need to catch your flight, but you need a little help getting there. You find your check-in desk and drop off your luggage, go through security, have a bite to eat, wait for your gate to be displayed, navigate the airport to find your plane and jet off. Part of your ability to navigate the airport might be instinct - you’ve probably done it before. There’s also clever architecture and design that is subconsciously leading you in the right direction. This might be the tiles that are angled a certain way or the way that the roof slopes to show where you need to go. This is a real word example of what we call UX and UI in web design. The ability to visually lead the user to where you want them to go.
The signs, departure boards and announcements give you, the user, the information you need to move on. Now navigating airports can be stressful at the best of times but imagine that you have poor eyesight, that you’re not as mobile as you used to be, that you have a hearing impairment or a more severe disability. Nightmare. Therefore, the signage is designed in a way that is readable for all types of user and the announcements are made in multiple languages.
Obviously lots of thought has gone into making the process of getting through the airport as accessible as possible. So it makes sense that this same level of consideration should go into the design of your digital content.
Accessibility vs creativity
There are a few challenges to overcome when designing for accessibility:
Firstly, being upfront with clients is key to having a great collaborative process. From recommending and explaining accessibility to helping them to decide on a compliance level based on the needs of their potential users, project timescale and budget.
It’s important to balance innovative design while sticking to the WCAG guidelines. It’s a common mistake to think that accessible design means boring design, but this is not the case. After all, a website doesn’t need to reach level AAA to be considered accessible. There is still scope for creativity. To design for accessibility is to use our design, development and UX skills to solve a bigger challenge. To question our choices and how they might affect users.
Another challenge when designing with accessibility in mind is that the visuals that we create should look and feel seamless. Using large font sizes etc shouldn’t be an afterthought or simply a plaster on your design. It should be a digital extension of the brand, not a patch job. Some websites do this brilliantly, for example, .GOV. It displays a huge amount of important information that must be accessible to all. The content can’t be overshadowed by the visuals so they have made a conscious choice to define their digital presence by great accessible typography.
Therefore, good accessible design shouldn’t be noticeable, it should simply allow the user to get on with what they need to do.
“The role of the designer is that of a very good, thoughtful host anticipating the needs of his guests.”
WCAG WTF?
Getting to grips with the WCAG guidelines - and keeping up to date with them - is a challenge in itself. Here are some online resources that I use regularly:
WebAIM colour contrast checker
This tool allows you to plug in the hex codes for your background and foreground colours to see if there is enough contrast to meet your accessibility compliance level.
Web accessibility for designers
This infographic is a great intro into accessibility for designers. So many guidelines refer to development and content so this is super handy for breaking down what designers should be aware of.
WCAG overview
This page keeps you up to date with any changes made to the guidelines. It’s rare but it does happen!
WCAG 2.1
As of June 2018 these are the latest guidelines. Within each guideline there are different success criteria depending on the compliance level you are aiming for.
Are there any resources you think I should include? Give me a shout and I’ll make sure to update the list.