We all want to design products that are accessible to as broad an audience as possible. And it's not just a want—improving the accessibility of our products is a critical necessity since it gives our audience the power to consume content and use the functionality of our websites.
Accessibility is a huge topic, and it can be hard to understand where to start. This guide details key aspects of accessibility testing. You will learn what web accessibility is, why website owners need to ensure their sites are accessible, and practical tips on how to check accessibility of website.
What we'll cover
What is accessibility in web design and why is it important?
Accessibility means removing access barriers that prevent people from using products effectively. Accessibility is an integral property of good design because it directly connects with the site's usability, or a user’s ability to interact with a product and accomplish a given task with it. It allows people with all abilities, including those who suffer from vision, hearing, mobility, cognition, speech, or other disabilities, to use products and benefit from them.
For a long time, accessibility was an afterthought. But that's misguided for a few reasons. First, people with disabilities aren't a small percentage of users—15 percent of the world's population experience some form of disability, according to the U.N. One in ten visitors of your website will have some disability. Second, accessible design ultimately creates a better experience for all user groups—not only for people with disabilities—because everyone benefits from inclusive design. Accessible design shouldn't be an afterthought; it's really a baseline requirement.
If you don't prioritize accessibility, you could also lose customers (they'll choose better-designed products, obviously). You could also get sued. Lawsuits over digital accessibility for people with disabilities have been rising in recent years. As the Wall Street Journal mentioned, U.S. lawsuits alleging that digital products were inaccessible to people with disabilities rose 64% in the first half of 2021 from a year earlier.
What are the types of accessibility testing?
As a designer, you need to know how to check the accessibility of a website. There are two types of accessibility testing practices—automated and manual. When you conduct automated testing, you use online tools or browser-based extensions to scan your website and identify common accessibility issues. Here are a few popular examples of automated testing tools, which can be good for detecting significant accessibility problems:
Manual accessibility testing means conducting human analysis for your website. Manual accessibility testing can help you identify problems that only humans can track. For example, it's hard for automated testing to detect if the animated block of text moves too fast, preventing users from reading it. Manual testing is typically included in the quality assurance checklist, a list of actions that QA specialists complete to ensure that the product they will release on the market doesn't have severe issues. Most of the time, the testing is conducted by QA specialists during the product acceptance phase of the design process (end of a release cycle, before sending a product on the market).
Most organizations will benefit from a hybrid testing model—when both automated and manual testing is used, one type of testing complements the other. For example, you can run automated tests first and rely on the results of that testing when you are doing manual testing.
10 best practices for checking the accessibility of your website
The first thing you need to check if you want to improve the accessibility of your website is Web Content Accessibility Guidelines (WCAG), a set of guidelines that make web content more accessible to people with all abilities. The guidelines cover many areas of web design—from layout design to animation and audio effects.
The website accessibility checklist provided below was created based on the WCAG guidelines.
1. Use descriptive titles, links and functional controls
Any page on your website should have a title that describes its purpose. A well-written title clarifies what the page is all about to both your visitors and search engines. (To change the page title, you need to modify the title tag in the HTML source code of your webpage.)
The same rule applies to all functional controls on your website. Avoid creating generic links that say "click here" or "learn more," because they don't give visitors a clear idea of what they'll see when they click on the link. Most of the time, it's possible to write more descriptive links using the title of the page that the link leads to. For example, if linking to a contact page, a descriptive link could read, “contact info.”
Button descriptors or CTAs should also always describe their purpose. The label should be actionable—users should understand exactly what the button does by reading it. Avoid using generic labels like "okay" for buttons, because they don't help users understand what happens when they click the button.
2. Allow content to be resized up to 200%
People with poor eyesight will likely use browser zoom to increase the size of text on the page. WCAG suggests that text should be able to be resized up to 200% without assistive technology or loss of meaning.
You can test whether your website complies with this rule by using the zoom tool in your web browser. Zoom in up to 200% and see what happens to page layout and content. If you notice that content blocks overlap or move away from the visible area, you need to introduce changes to prevent this behavior.
3. Make text more legible and readable
Text plays a dominant role online because most information on the internet is written text. The guaranteed way to improve the experience of your visitors is to make the text on your web pages more legible and readable.
Font size and line spacing (line height) directly impact text readability. A rule of thumb is to make body text at least 16 px (this is the same size as the size of text printed in a book). Line height should be at least 1.5 times the font size (150%). Also, allow visitors to change the size of the text.
You also need to remember that people don't read text on the web; they scan. To make your layout scannable, you should avoid using long blocks of text. A web page with a wall of text not only visually unappealing, but it's hard to read. Try to break text into sections, adding a proper heading to each section.
Last but not least, ensure you use language that most of your users understand. Avoid acronyms and use simple words that everyone can understand. A few tools that can help:
4. Good color contrast
Color contrast refers to the difference between the foreground and background colors. Meeting color contrast requirements is one of the most important accessibility considerations, because poor color contrast can make text illegible.
Color contrast can be measured in numerical values. WCAG recommends that text and images of text should have a contrast ratio of at least 4.5:1 for normal text, and 3:1 for large text (18 points or larger). You can always use tools like webAIM to check your contrast ratio.
Many products available on the market right now offer light or dark themes. If your website is one of them, you should allow users to choose what theme they prefer to use, but before that, you need to ensure that color contrast in both themes is equally good.
WebAIM Color contrast checker. Image by Nick Babich.
5. Don’t use color alone to communicate the meaning
Color is one of the powerful tools in a designer's toolkit, and can be used both for decorative or functional purposes (think about how color is used to indicate error states, for instance).
But you should never rely on color alone to convey information or communicate status because colorblind people may not be able to make the distinction. Let's say you give the user a prompt like "choose the green option," and offer the following list of options.
You make it nearly impossible for users who suffer from red-green color blindness to make a selection because they can't distinguish between red and green pigments. Using the Chrome web browser, you can emulate vision deficiencies in Chrome DevTools. For example, here's how a user who suffers from deuteranopia (red-green color blindness) sees CNN's home page:
The CNN page is seen by a user who suffers from deuteranopia. Image by Nick Babich.
6. Add alt text to images and emoticons
All images that serve a clear functional purpose (and really, all images on your site) should have a text alternative (alt text) that describes them. Blind users rely on assistive technologies when they interact with a website, and this technology interprets and communicates the meaning of graphical objects using alt text.
Without alt text, tools can't read what's displayed on the page. If the alt tag for the image is empty, the screen reader either ignores the element or says "image" without any further details. Alt text is an attribute of the HTML image tag. So all you need to do to change the alt text is fill in the alt property. If you're using Editor X, you can change the alternative text in the image settings.