How Accessibility Gets More and More Important in Web Development
How you can make your website accessible — including a checklist
Accessibility is essential for businesses and organizations that want to create high-quality websites for everyone. It’s important for these businesses and organizations to not exclude anyone from using their products or services.
But what exactly is an accessible website? An accessible website is a website that people with disabilities can perfectly use. This can be people that are visually impaired, blind, or deaf, etc.
According to W3, the global market of people with disabilities is over 1 billion people. And with increasing life expectancies, people spend around 11% of their lifespan living with a disability. Despite all of this, accessibility is not taken into account on most websites. At least not enough. The great thing about accessibility is that it not only improves the online experience of people with disabilities. Accessibility often improves the online experience for all users.
How do you know if your website is fully accessible? Generally speaking, a website is fully accessible if all users have equal access to information and functionality.
The Business Case for Accessibility
Besides your website being useable for everyone, there’s also a strong business case for accessibility. Case studies show accessible websites have better search results (SEO), reduced maintenance costs, and increased audience reach. The overall customer experience gets improved once a website gets more and more accessible.
The 1 billion people with disabilities I mentioned before have a spending power of more than $6 trillion. So when you are building your web shop. you probably should spend some time on making it accessible for everyone. If you’re looking to maximize your sales, you should start by making your web shop available for a broader audience.
But there could also be a totally different reason why you want your website to be accessible. Many countries have laws that require digital accessibility. Minimizing legal risk is sometimes the reason why you want your website to be accessible.
Many organisations are waking up to the fact that embracing accessibility leads to multiple benefits — reducing legal risks, strengthening brand presence, improving customer experience, and colleague productivity.
Paul Smyth, Head of Digital Accessibility, Barclays
A Quick Checklist
As accessibility is getting more and more important, it’s a great tool to have under your belt as a developer. A lot of the points on this checklist are technically not very hard to implement but dramatically increase the accessibility of your website.
A few quick wins that you can do for your website:
Alt text for images
The alt tag is used in HTML to describe an image. If you’ve ever touched HTML you probably are familiar with the alt tag and its use.
The Web Content Accessibility Guidelines (WCAG) 2.1 states the following about text alternatives:
Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols, or simpler language.
The alt attribute needs a helpful description for screen readers. Assuming you were blind, what would you need to know about the image? “Child” isn’t much help, but maybe “Child playing with toys in the garden” would give more information about that image to the people that use screen readers.
Note that if the image is purely decorative, you can leave the alt tag empty.
People with low contrast sensitivity, mostly older people, and people with color blindness who cannot distinguish between certain colors benefit from sufficient color contrast between the color in the fore- and background.
Sufficient color contrast makes your content better readable, even for people that don’t have disabilities. And this doesn’t take a lot of effort to fix.
WCAG 2.1 states the following about contrast on a website:
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large text, incidental, and logotypes.
In the list of tools at the bottom of this article, I’ve included a contrast checker you can use to see if you’re having sufficient contrast.
While this might be the hardest one to implement, from a technical point of view, keyboard input is extremely important for accessibility. Many people with motor disabilities rely on a keyboard.
WCAG 2.1 states the following about keyboard input:
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes (…).
Transcripts for audio
People who are deaf or hard of hearing have difficulty processing auditory information. To support videos and audio on your websites also for those people, transcripts are required.
The checklist above included quick wins that are important to improve accessibility on your website. Of course, the list of things that you can do to improve accessibility is almost endless. If you want a full list of things you can do to improve accessibility, I suggest you go to the WCAG 2.1 section on the W3.org website.
Want to Know Where Your Website Stands?
So you want to know where your website stands in terms of accessibility. That’s great! Luckily for you, there are numerous tools available that you can use to evaluate your website.
Here is a list of tools that you could use:
- Contrast Checker by WebAIM
- Accessibility Developer Tools by Google Accessibility
- A11Y Compliance Platform by Bureau of Internet Accessibility
- AccessLint, a GitHub app that checks your pull requests for accessibility
- WAVE by WebAIM
If you want a bigger list of tools, you should check out the Web Accessibility Evaluation Tools List.
Accessibility is not a feature, it’s a social trend. — Antonio Santos