People with disabilities often rely on the internet more than non-disabled people, as it can sometimes be easier for them to navigate the web than the physical world. And it's not just disabled people who benefit from an accessible website, it helps people in a huge variety of situations.
If your user has a slow connection, a broken arm, dyslexia, is elderly, or is browsing the web at work, accessibility standards can be the key to them being able to use your websites and mobile applications.
In short: Web accessibility is for everyone.
That's why every good digital agency has accessibility built into their processes. Clients shouldn't have to request it or specify it as a requirement on their website brief.
But what are website accessibility standards?
And how can you test website accessibility on your own site?
Here is a list of 9 key web accessibility standards, and how to check that your website passes the test.
Accessibility requirements
Accessible design can be checked against a range of different standards, but the most commonly used accessibility guidelines come from W3C.
The W3C is the World Wide Web Consortium, set up by Tim Berners-Lee with the principle of growing the web and ensuring access for everyone.
W3C accessibility standards are a great place to start to learn more about designing and building websites that are usable for everybody.
1. Keyboard navigation
Lots of users don't use a mouse to navigate. That can be because they are physically unable to, because they have a visual impairment, or it could be because they're also holding a baby whilst browsing.
Whatever the reason, these users tend to rely on keyboard navigation to get around the site.
These users will mainly be using the Tab key to navigate the site, as well as Arrow, Space and Enter keys to select options.
The most important things to consider for Keyboard Navigation are:
- Creating a logical Tab order, don't have users jumping all over the page
- Ensure all links, buttons and form elements are usable with the keyboard
- Have a Focus state that visually shows a keyboard user which element they are currently focused on
How to check: Simple user testing. Can you navigate around the site and do everything you need to without using your mouse?
2. Screen Reader Compatibility
Assistive technologies like screen readers are often used by people with visual impairments or who are blind.
They may also be used by people who struggle with reading, for example, if someone has severe dyslexia.
There are lots of different screen reading softwares out there, and each of them works slightly differently.
The good news, is that if you are building your web app in the right way, you're going to ensure your website is usable by the majority of screen readers the majority of the time, without any severe issues.
The other good news, is that these standards are best practice for building a website ANYWAY, so you're not putting in any extra effort by ensuring your site is accessible.
A win for everyone!
How to build for screen readers:
- Logical ordering is again going to be massively helpful
- Descriptive Alt text helps users understand what images are and give better context to the site
- Title and heading tags also really help users with screen readers. They often skip to content sections using headers, so where possible these should give a good description of the content below
- Landmarks and page sections can be defined using ARIA landmarks and HTML5 sectioning elements, which tells screen readers what each section of the site is
How to check: Simple user testing with a browser's inbuilt screen reader should flag up any major issues.
3. Colour Contrast
Colour contrast can be a big deal for the partially sighted as well as people who are colourblind.
Without a big enough contrast between text and background colours, content can be difficult to distinguish or read properly.
Of course, the larger and more bold the text, the easier it becomes, but it's essential that you check the colours you're using to make sure you're not making life difficult for users.
How to check: We like to use the Deque University colour contrast checker. It gives you examples of large and small text using your colours, with simple to understand Pass/Fail states.
4. Zoom
Small font sizes can be problematic. But even with a good size font, some partially sighted or dyslexic users might find it easier to zoom in to read content on your site.
This will make it much easier to read - but means that your accessible site needs to be set up for enlarged fonts.
A really common issue with text-only zoom is the content overlapping or becoming cut off by the design.
But a properly responsive design should allow the site to adapt to a text-only, or full site zoom, using relative units for text containers, and having a spacious design layout with the flexibility to change for enlarged fonts.
How to check: Every browser has a text-only zoom function or add-on you can use to check.
5. Video Captions
A nice, simple one here! Make sure that any video you provide includes captions for the deaf, hard of hearing or simply for people who don't want to have sound.
Most people have had the awkward office experience of going on to a web page and the sound blaring out.
With captions, people don't need the sound to understand and enjoy your video.
It can also be helpful to provide a transcript as an alternative - which is a good option for podcasts too.
How to check: Err, just watch the video and see if captions are there!
6. Autoplay
Another video accessibility issue is autoplay.
Not only can it be a big annoyance for users who might not want your video to play automatically, it is a big issue for people who might be using screen readers.
If your screen reader is speaking whilst a video is autoplaying, it's incredibly difficult to hear it.
Not to mention that it also devours your data if you're on a mobile device.
How to check: Not really a difficult one - just see if your video autoplays when you visit the page, and if it does, turn it off!
7. Headings
Correct headings can be massively helpful for accessibility, as they provide signposts to the content on the website.
Ensuring your content is correctly coded with heading tags gives a structure and hierarchy to content that screen readers can easily understand.
It also helps out people with visual impairments, dyslexia or cognitive disabilities, as they break text up into smaller pieces which are easier to read visually as well as easier to understand.
How to check: Ensure headings have the correct HTML heading markup - and make sure you're starting with h1 on every page! This is also something that will be flagged up by a good web accessibility checker (more on that at point 9!).
8. Link Anchor Text
Descriptive links can be really helpful for people using screen readers, but even just users in a hurry can massively benefit from good anchor text.
A link that invites you to read our in-depth SEO guide for beginners, is much better than using a "click here".
How to check: Take your linked content in isolation - do you understand exactly what you'll see after you click it? Then your work here is done.
9. Automated Accessibility Audit
The best way to ensure your site is really accessible is to keep on top of it with a proper website accessibility checker.
We're fond of the axe web accessibility testing toolkit, which you can use throughout your build process to keep on top of any accessibility issues.
Remember though, automated tools can't be 100% accurate, and can give false positives, so it's important to consider the context of any recommendations they make.
But the key with any accessibility software, is that you build accessibility into the heart of your development processes for everything you do, from the smallest brochure website to the most complex web system.
That's how we like to do things with our web projects, so if you want to talk about building an accessible web app, we'd love to hear from you.
