Accessibility in web design
Not many people know what's meant by accessibility in terms of websites. They may have a vague idea about needing enough contrast in their text, or have heard that blind people can use the web by having text digitally spoken to them. But did you know that by making a website accessible you can make products that are not just better for those with disabilities, but for everyone? We like to call this Inclusive Design.
This blog post will look at who it’s for, and the techniques we use to ensure our websites can benefit people with a diverse range of abilities. Special thanks go to web designer and software developer Dale Stillman for his research and expertise on this subject.
So who is Inclusive Design for?
From Microsoft’s Inclusive Design portal:
Inclusive Design is a methodology, born out of digital environments, that enables and draws on the full range of human diversity. Most importantly, this means including and learning from people with a range of perspectives.
We love that their toolkit shows how clearly accessibility and inclusive design can benefit everyone. Everyone has situational disabilities. If you are using your phone in bright sunlight, you can benefit from the same tools that a partially sighted user can. Maybe you are holding your shopping in one hand, leaving only one free, or you are in a loud environment and can’t listen to a video. Accessibility can benefit everyone. With that in mind, let’s look at a number of common design considerations for websites, and how we can address them to suit particular impaired abilities.
This screenshot of WebAIM’s contrast checker shows how a font is judged usinf ratios. Passing the WCAG AA level means the visibility is acceptable. Passing the AAA level means it had achieved best practise standards.
Impaired Vision
Websites are really about communicating information, but if we’re honest our sensibilities as designers sometimes get in the way. We know high contrast design helps with visibility, but does that mean making every websites black and white? Sometimes a nice pink and orange colour scheme really works for the brand. So how can we make sure that sites can be read easily and clearly?
Some of it is just colour theory. If we consider not just the hue of the colour but also it’s brightness, we can use colours like red and green together, and still have visual contrast between the colours. WebAIM have guidelines and tools to help pick suitable colours. The Contrast Checker can be used to check that your body copy and link colours can easily be read.
Colour Blindness
Another route around the issue of similarly toned colours, or colours that look the same to those with colour blindness, is to use pattern. This redesigned map of the London Underground had added strands of pattern to the familiar colours of the trains lines. Being unable to differentiate the red of the Central line from the brown of Bakerloo is no longer a problem, because an additional layer of information has been added. The patterns assigned to them help colour blind viewers to tell them apart.
Expanding our visual tools this way means that we can still indulge in beautiful colour palettes, without losing the ability to communicate clearly when it matters.
If in doubt, filters can be used to emulate colour blindness to test our websites. It’s best to use tools like Chrome Lens to test designs. A common thing to check in web design is that buttons that have semantic styling – red for destructive actions like delete or green for calls to action – are clearly distinguished.
Partially sighted
Partially sighted users may be using a magnifying tool to view websites and will only see a small amount of content at a time. We can picture this being like looking through a straw.
Using the Straw Test mimics the navigational experience of people with visual impairments who use a magnifying tool.
Derek Featherstone’s video Extreme Design takes a really good look at how this affects form design. He shows how we should group related items together, and be mindful of the patterns we impose upon them to browse around the user interface. By creating vertical form layouts, we also create designs that work great on smartphones.
With lower levels of vision, adding alt tags to images becomes increasingly important. This is a short text description that is added to the image when it is being uploaded. As well as helping make the image searchable, that text can be activated by certain software and read aloud to any user who is struggling to interpret the image.
No vision
People navigating the web with no vision nowadays use screen readers. These are pieces of software (often expensive) typically used on desktop operating systems in combination with a keyboard to navigate the web. But we feel this is an area that could also become much more common in the future among people who have good vision, but are out and about. We can see it already with products like Apple’s AirPods, and voice assistants.
Here’s an example of a screen reader from the more basic Simple Text To Speech app.
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Anyway, back to screen readers. They read out the content of webpages based on their semantic structure. By that I mean they can use keyboard shortcuts to quickly fly around web page navigating from heading to heading, or tabbing between focusable content like buttons and links. The screen reader reads out the content of the page, as well as what the thing they are looking at is. Whether it’s a heading, a paragraph or some sort of interactive component such as a button. Skilled users will be accustomed to their screen reader reading out at a frantic pace.
For web developers, it’s really important to use proper, semantic elements in our HTML, and special care and attention needs to be taken when creating custom components. Screen readers understand components like <button>s or links (<a>) automatically, but custom components need to use the “aria” accessibility APIs to enable them to be announced correctly by screen readers. Steve Faulkner has a checklist of everything a developer needs to be aware of when creating the components. One simple test you can do to see how accessible a website is, is to see if you can navigate the page with your keyboard. You should be able to tab between focusable elements and toggle elements like (hamburger) menus with the enter key. It should also be clear what element has focus when tabbing through the interface.
So what now?
We’ve only scratched the surface here, but designing for accessibility is a deep and fascinating part of design that everyone should consider. If your organisation interacts with particular audiences, thinking through the range of abilities they might have is a great place to start.
Accessibility expert Derek Featherstone points out that making improvements that account for impairments doesn’t just help a small group of people – it actually improves the design overall, for everyone. Action prompts for those with memory issues also help the absent-minded, or the busy. Clear visual hierarchies to guide people using keyboard navigation also benefit those who don’t have regular access to technology, or did not grow up as ‘digital natives’. Vertical layouts to assist people who scroll using voice commands or have mobility issues will translate beautifully to phone-centric design – the most common way designs are accessed.
Designing for those on the furthest ends of the ability spectrum isn’t about virtue signalling or creating extra work. It’s simply a path to creating better design.