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' UX design is 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:
Image 1: Testing accessibility of Google Search home page using Wave. Image 2: Google Lighthouse accessibility testing tool. Images: Screenshots by Nick Babich.
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.
Top creative directors share their top question to ask during interviews.
Microsoft chief accessibility officer Jenny Lay-Flurrie
Sunday Afternoon creative director Rich Tu
Executive director of the Inneract Project Maurice Woods
Google head of product inclusion Annie Jean-Baptiste
Chair of the BFA design program at SVA Gail Anderson
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. (High-contrast color schemes like black and white are especially 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.
Option A
Option B
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.
[Related: Designing for seniors]
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.
Changing alternative text. Image by Nick Babich.
Here are a few tips for improving your alt text:
Ensure that the image description conveys the meaning of the image to users. When writing alt text, always think about how you would describe what's in the image.
Skip the words "Image of…" because screen readers notify users about the element type (Image).
Navigate your website using JAWS, a screen reader developed for users who have vision loss, to learn how assistive technology reads your page.
Add SEO value to alt text by using your article's target keyword
7. Allow users to control the playback of audio and video
User interfaces should adapt to the user's ability to comprehend the information. Users should be able to adjust audio and video playback time of media content, in case they need more time to understand it. Users should also be able to pause or stop the audio/video to learn its content at their own pace.
8. Add subtitles to video content
Add an audio description with information about what is happening in the video to improve the experience for deaf or hearing-impaired users. You need to ensure that captions are synchronized with the video—there shouldn't be any delay between the video stream and the text alternatives of the media content.
9. Allow users to turn off animated effects
Allow the user to turn off or, at least, minimize the animated effects on your website, leaving only the animation that's essential to the site's functionality. Users who experience motion sickness can also experience discomfort and fatigue when they interact with a product that has a lot of animated effects.
People who have seizure disorders are highly sensitive to blinking/flashing objects. It's best practice to avoid using any type of content that blinks or flashes more than three times per second.
10. Design a keyboard-friendly website
Your website should be accessible for people with mobility disorders, like Parkinson's disease. This category of users should be able to experience the entire functionality of your website through a keyboard. Keyboard navigation should be available right from the start—no special command (i.e., special combination of keystrokes) should be required to activate keyboard interactions.
The keyboard focus indicator should be visible to the user. Show a clear visual indication of the current element in focus. Typically, a visual indicator looks like a blue frame highlighting the selected element.
Test how users navigate your page using a keyboard. Try to navigate your site using a keyboard —use the Tab and Shift-Tab keys to see if you can access all essential elements on your page and the sequence in which you access them.
Elements in focus. Image by Nick Babich.
Design for accessibility, design better products
Now that you know how to check accessibility of website, you probably see that creating an accessible website is hard work. But it pays off. When you constantly think about how people with disabilities interact with your site, you ultimately build empathy with users. You start to better understand the problems that people with disabilities experience, and this understanding will help you design better products and services for anyone.
.jpg)
