The Ultimate Guide to Web Accessibility in 2022
It’s easy to be daunted by the ever-increasing need to have an ‘accessible’ website. What does that mean? Will you need to overhaul your website? While we always want websites to be as accessible as possible, it’s fine to...
Aliver
It’s easy to be daunted by the ever-increasing need to have an ‘accessible’ website. What does that mean? Will you need to overhaul your website?
While we always want websites to be as accessible as possible, it’s fine to take smaller steps, rather than making no moves towards accessibility at all (or trying to do it all at once and not doing it properly!)
Accessible websites are quickly becoming the baseline – which makes sense since around 15% of the world’s population has some form of disability. So, what sort of standards should your website meet to be considered ‘accessible’?
1: Check Your Content
Accessible elements are especially important for people who experience:
visual impairmentshearing impairmentsphysical disabilities or motor skillsphotosensitive seizurescognitive disabilities, such as dyslexia or dementiaContent is a huge part of this – which is why the Web Content Accessibility Guidelines 2.1 (or WCAG 2.1) were created. Written, video, and image content are all key parts of how a user interacts with a website. If you face visual or hearing impairments, navigating a website becomes that much more difficult.
If you think your website is fine without any checks, think again – in 2022, 96.8% of home pages presented WCAG 2 failures.
To make it easier, make sure that you:
Use simpler language – avoid idioms or figures of speech that could confuse the readerAdd alt text to all relevant imagesAdd descriptive, easy-to-understand text to linksHave subtitles or a transcript for videos2: How Good Is Your HTML?
A website can look pretty, and perform well, but still have bad HTML practices. That means that not just screen readers, but also Google, will struggle to read the website properly. Google, for one, has been moving towards preferring accessible websites, and it will usually penalize websites if they have enough ‘bad’ code.
Most good HTML practices are straightforward and easy to implement as a baseline for your web development. For example, text styles: use more than just color to denote differences in a style. Your links should be descriptive in HTML. Links should use ‘a’ and always have href attribute.
The A11Y Project checklist is a good way of measuring how accessible your website is. Of course, the only way to truly know is to validate your code. Dux Digital recommends Rocket Validator, which is the tool the team at Dux uses to validate the accessibility of their websites.
3: Does Your Website Design Do More Than Just Look Nice?
Colors. When it comes to accessibility, this is one thing a lot of people think of first: color contrast. And yet it’s the most common accessibility problem across websites. 83.9% of home pages have text contrast below WCAG 2 AA standards.
The use of color throughout your website should be purposeful, consistent, and of acceptable contrast. See what WCAG 2.1 says about color here. You can also test the accessibility of your colors by AA guidelines here.
Fonts are another element of design that can make or break an accessible website. Fonts should be simple, easy to read, and familiar.
There’s no ‘one size fits all’ accessible font, and it can also matter which fonts you’re pairing together as to how well something reads.
Some popular accessible fonts that you might want to explore, however, are Verdana, Arial, and Helvetica.
4: How’s Your Heading Structure?
If you’re familiar with SEO, you might be familiar with the importance of headings. However, headings are incredibly important for accessibility as well. Amazingly, nearly 10% of websites don’t have any headings at all.
There are a few rules around heading structure that everybody should be aware of:
Each page should have only one H1.Heading elements should follow a certain (logical) order or sequence. They should never be used purely for visual design. If you need to use a certain visual element, use a CSS class and keep the relevant heading tag as best practice.Similar to the above, don’t skip heading levels. It confuses the reader.5: If in Doubt, Do What Makes Sense
Most accessibility issues are easy to pick up once you know what you’re looking for. You might notice them already – you just don’t know quite why something bothers you. You see dark text on a dark background: you’re squinting and smashing your brightness button, trying to decipher it. That’s an example of poor accessibility.
For many of us, it’s just an annoyance. For those with vision-related disabilities, it can stop them from interacting with a website and get in the way of navigating the internet. According to WebAIM, users with disabilities would expect to encounter errors on 1 in every 19 homepage elements with which they engage.
As with the example above, though, accessibility is, ultimately, for everyone. It makes our lives easier, and it makes navigating the web a little less painful. Just because your website isn’t ready to be triple-A compliant, doesn’t mean that you can’t begin to take the steps towards accessibility.
Dux is big on making websites that work for everyone and they’re particularly focused on creating best practice, accessible websites for healthcare and not-for-profits. You can get in touch with Dux Digital to find out more.
