There are a myriad of articles and how-to guides on business website design and development that offer tips on everything from choosing your web hosting provider to securing a domain name, to finding the right e-commerce platform. But the majority of these resources don’t discuss website accessibility — a critical piece in building a successful business online.
One of the reasons for that is because accessibility is often associated with brick-and-mortar businesses and physical accommodations, such as wheelchair ramps and braille restaurant menus, for people with disabilities. The Americans with Disabilities Act (ADA), which was signed into law in 1990, prohibits discrimination based on disability in “places of public accommodations,” which include “businesses that are generally open to the public.” But based on the way the courts and the Department of Justice have interpreted the law in recent years, ADA compliance is also mandatory for business websites.
For a business website to be compliant with the ADA, it must be accessible to people with auditory, cognitive, neurological, physical, speech, or visual impairments, who rely on assistive technologies, such as screen readers and other devices, to browse the internet. Failure to provide an accessible website experience could result in expensive and time-consuming lawsuits, straining the business and damaging brand reputation.
But website accessibility isn’t just a box that businesses have to check in order to abide by the law. Providing equal access to digital content and services and creating inclusive user experiences for all people, regardless of ability, is the right thing to do and makes a lot of business sense.
Developing an accessible website opens the door to over 1 billion people who have some type of disability. It also gives your business the chance to attract new customers who are eager to consume what you have to offer. According to the 2020 report on The Global Economics of Disability, “With an estimated population of 1.85 billion, people with disabilities are an emerging market larger than China. Their friends and family add another 3.3 billion potential consumers who act on their emotional connection to people with disabilities. Together, disability touches 73% of consumers. Together, the disability market controls over $13 trillion in disposable income.”
For most business owners, website accessibility and the fundamentals of accessible web design are new areas with a lot of unknowns and little guidance. So to help you get up to speed on accessible web design, we put together a comprehensive guide that breaks down the core concepts and components of ADA-compliant website development.
There are seven chapters in the guide, and you can find summaries and links to each chapter below. We hope you’ll find the content useful and feel inspired as you start creating accessible online experiences for all your customers.
Let’s first go over a couple of basic points.
What Is Accessible Web Design?
Accessible web design is the practice of designing a website in a way that people with disabilities can easily navigate, consume, and interact with its content. According to the Web Content Accessibility Guidelines (WCAG) 2.1, there are four key principles that lay the foundation for accessible web design and directly tie into universal web design recommendations.
For a website to be accessible, it must be:
- Perceivable. Information and user interface (UI) components must be presentable and perceivable to all users.
- Operable. UI components and navigation must be operable by all users.
- Understandable. Website content and operation of the UI must be understandable to all users.
- Robust. Content must be robust enough for all users and assistive technologies to interpret it reliably.
How to Make an ADA-Compliant Website
While the ADA does not provide an official set of guidelines for website accessibility, the best way to create an ADA-compliant website is by following WCAG 2.1 AA standards. WCAG provides three levels of conformance: A, AA, and AAA. Many e-commerce websites strive to meet Level AA standards, which cover a wide range of recommendations for making your website content more accessible to all users.
With that in mind, our comprehensive guide addresses seven fundamental components of accessible web design:
- Colors
- Architecture
- Content
- Universal design
- Links
- Media
- Documents
Chapter 1: Web Color Accessibility
Web color accessibility allows users with visual impairments to properly visualize hues on your website. For example, users who experience red-green color blindness or blue-yellow color blindness will have a difficult time differentiating between specific pigmentations when they’re placed next to one another. To ensure your website features accessible color schemes, it’s important to provide proper contrast ratios, luminance, backgrounds, and color spacing.
Chapter 2: Accessible Website Architecture
Proper website architecture plays an important role in both usability and accessibility. At its core, website architecture refers to how a site’s pages are structured and linked together to ensure that end-users and search engines can get to the information they are searching for. Providing an accessible website architecture includes strategies like adding consistent navigation or clear sitemaps to improve the browsing experience.
Read How to Design the Most User-Friendly Website Content Architecture →
Chapter 3: Web Content Accessibility
Without accessible web content, your business website could deter users — both with and without disabilities — from engaging with your content. One of the most important aspects of creating accessible web content is including semantic HTML during development, as it introduces the meaning of content on a web page to help assistive devices like screen readers understand the type of information you’re presenting. Other key components of accessible web content include proper page formatting, typography, and page layouts.
Chapter 4: Universal Design and Accessibility
Universal design is a process in which a product is created to be used by all people (regardless of their individual abilities) to the greatest extent possible, without the need for alteration or adaptation. Accessibility and universal design work together, as adopting universal design principles — which ensures your website is perceivable, operable, understandable, and robust — will also help you design accessible products. There are seven universal design principles, which govern both physical and digital realms. Examples of universal design elements include proper keyboard navigation combined with pronounced tab focus and content that’s clear, descriptive, and void of overly complex, jargon-filled copy.
Chapter 5: Link Accessibility
Accessible hyperlinks — including those in text, calls to action (CTAs) and buttons, and images — are crucial to your site’s functionality, as they allow users to easily move from one piece of content to another. Creating accessible links works in tandem with creating accessible content, as you need to place your links within text in a descriptive and concise way. One of the best practices in link accessibility is to avoid using URLs or “click here” language as link text. Instead, use contextual anchor text that provides clear direction on where the user will land after selecting/clicking the link. Proper touch target size, link color and contrast, and the size and shape of your CTA buttons are also important for link accessibility.
Chapter 6: Media Accessibility
Media accessibility is essential for users living with disabilities as well as those who have a poor internet connection or are in a situation where your content can’t be consumed the way it was intended. For example, adding closed captioning with sound transcription to your videos or audio recordings (e.g., podcasts) not only helps those who live with auditory impairments but also users who might not have the ability to watch or listen to your content. Other key elements of media accessibility include adding image alt text and incorporating audio descriptions of your videos.
Chapter 7: Document Accessibility
Businesses, governments, and organizations, including schools and universities, use PDFs to share key information, facilitate transactions, and tell stories. Just like live pages on your website, Word documents and PDFs must follow WCAG 2.1 guidelines to ensure they are perceivable, operable, and understandable for all people, regardless of ability. When creating PDFs, for example, it’s important to include a clear header structure with the appropriate tags, alt text for any featured imagery, a focused reading order, and properly tagged lists and tables.
Website Accessibility Checklist
A quick reference checklist (found at the end of the downloadable guide) covering the top items to check for before you publish your website. Specifically covering headings, image alt text, call-to-action buttons, form fields, closed captions, and audio descriptions for your videos.
Chapter 1: Accessible Colors
Read Other Chapters
See all chapters from the Comprehensive Guide on Accessible Web Design.
