How to design an ADA-compliant website
To create and design an ADA-compliant website, you need to ensure it conforms to the Web Content Accessibility Guidelines (WCAG). We will explain WCAG and its relevance to ADA compliance in much further detail later in the blog. You can skip to that section now by pressing here.
WCAG versions and conformance levels
WCAG 2.0, the first iteration of these guidelines, was published in 2008.
WCAG 2.1, an updated version of these guidelines, was released in 2018.
The first draft of the next version of these guidelines, WCAG 2.2, was initially released in February of 2020 and was officially published on October 5th, 2023.
WCAG 2.0, 2.1, and 2.2 have three levels you can conform to: Level A, Level AA, and Level AAA. Here’s a brief explanation of the differences between them:
- Level A is the lowest level of conformance and covers the most basic accessibility requirements
- Level AA expands on the requirements of Level A and includes additional guidelines for improved accessibility
- Level AAA is the highest level of conformance and includes the most stringent accessibility requirements. It's not mandatory for websites to conform to Level AAA, but organizations may choose to do so to provide an optimal accessibility experience for their website visitors
A website is unlikely to face legal recourse if it conforms to WCAG 2.1 Level AA, and you should aim to have your website conform to WCAG at that level.
What are the most important design elements of an ADA-compliant website?
WCAG applies to a variety of website elements. Some have a more straightforward connection to design, while others apply to a website’s code. You will need to ensure these conform to WCAG if your website is to be ADA-compliant. Some of the most important action items include:
1. Adding alt text to meaningful images and non-text content
Alt text is the text-based description of an image that appears on your web page. It is added manually and should concisely, but effectively, explain what appears in the image or its purpose.
Screen readers, relied upon by people with vision impairments, read the alt text aloud to website visitors, allowing them to understand the content of the image.
Images that are purely decorative (i.e., images that do not convey meaningful information) should be hidden from screen readers.
2. Using proper color contrasts
Proper color contrast helps people with vision impairments or color blindness better distinguish between different elements on your website. This includes text and background colors, as well as buttons and other interactive elements.
Poor color contrast makes it difficult or even impossible for some visitors to interact with online content.
On a more technical level, the contrast between text (or images of text) and its background should be at least 4.5:1. When using bold or large text (18pt or larger), a 3:1 ratio is sufficient. These contrast restrictions do not apply to logos and brand names.
You can read more about selecting ADA-compliant colors in this blog.
3. Not conveying information exclusively through color
Using color alone to convey information can create barriers for people with color blindness or vision impairments. It’s therefore critical that you convey pertinent information using multiple methods.
Texts or symbols, in addition to color, can make a website more accessible to visitors.
4. Readable and legible fonts
The fonts you use can have a deciding impact on how readable your website is. It is important to avoid thin and highly-decorative fonts, as these can prove challenging to read for people with certain vision impairments.
You can read all about the font families and styles you should use (and those you should avoid) in our guide for selecting accessible fonts.
5. Providing clear and consistent navigation
Poor navigation can lead to confusion and frustration, causing visitors to leave your website. On the other hand, a well-designed navigation system makes it simple for people to find what they're looking for.
Consistent navigation (such as presenting menus and links in the same order) helps website visitors understand the website's structure and how to find what they need. By improving the user experience, you'll notice increased engagement and conversions
6. Designing for different viewport sizes
Websites need to be displayed properly and function as expected on any device, including mobile devices and tablets, so that website visitors can navigate content in a way that’s easiest for them.
Make sure no content is omitted when viewed in various screen sizes, as well.
7. Ensuring a website does not feature content that can induce seizures
Content such as fast-strobing lights can induce seizures, and should be avoided completely. No web page should contain anything that flashes more than three times in one second
It is important to note that this is a very partial list of action items.
For a more comprehensive ADA website compliance checklist, click here.
Accessibility plugins for Figma
If you're a Figma user, these plugins can help you design with accessibility in mind:
- Able allows you to check color contrast and simulate different types of color blindness by analyzing selected colors
- Contrast allows you to easily check the contrast ratios of colors as you work on various mockups and designs. You will need to select a layer, after which Contrast will immediately examine how it contrasts with the color directly behind it, and show you whether the contrast is sufficient under WCAG 2.1 Level AA
- Color Blind helps web designers understand color vision deficiencies by creating duplicates of their designs, which the colors changed to reflect various color blindness types
- Focus Order annotates designs to indicate the order of focus changes. This allows designers to indicate focusable elements, change the order, test, and tab through elements
It is important to note that, while these are useful tools, they only tackle certain elements of accessible web design.
Website-building platforms such as WordPress, Wix, and Squarespace along with eCommerce platforms, like Shopify and BigCommerce, have taken steps to provide some level of built-in accessibility features.
However, these platforms often only provide the bare minimum level of accessibility support. This makes it challenging for people with disabilities to navigate websites built on these platforms.
Integrating with 3rd party compliance tools, like accessWidget, can prove beneficial in that regard. Addressing accessibility on a more fundamental level, these tools will result in website visitors with disabilities being presented with an optimal user experience.
accessWidget tackles accessibility issues on a code-based level, allowing for screen reader compatibility and keyboard-only navigation. accessWidget also offers a custom interface that website visitors with disabilities can use to adjust design elements to fit their specific abilities. This includes disabling distracting animations, adjusting color contrasts, and enabling easy keyboard navigation.
Click here to learn more about how accessWidget can integrate with your website building platform.
A deeper dive into ADA compliance and web design
Enacted in 1990, the Americans with Disabilities Act (ADA) is a civil rights law that guarantees equal opportunities and access to services, public accommodations, and employment for people with disabilities.
The ADA applies to businesses and organizations that are open to the public, including:
- Private employers
- State and local governments
- Commercial facilities
In recent years, the scope of the ADA has expanded to cover digital spaces. This includes websites, mobile applications, and other digital content.
How does the ADA apply to web design?
Under ADA Title III, businesses considered “public accommodations”, such as banks, hospitals, colleges, real estate agencies, and many other businessess (including many small businesses) must be made accessible to the disability community.
U.S. courts today have extended ADA requirements to these businesses’ online domains as well as to their physical spaces and policies. Because almost every business serves and accommodates the public, almost all businesses need to ensure their websites are accessible under the ADA.
While the ADA doesn’t include specific standards by which websites are considered compliant, U.S. courts have frequently referenced the Web Content Accessibility Guidelines (WCAG) 2.0 as the standard which websites need to conform to.
Created by the World Wide Web Consortium (W3C), WCAG is considered by many to be the most important web accessibility standards and is relied on by many governments.
WCAG provides a set of standards and criteria for website design, development, and content creation.
These guidelines cover a range of accessibility issues, including color contrast, text size, and keyboard accessibility, for example.
It is generally believed that a website must conform at least to WCAG 2.0 Level AA to be considered accessible to people with disabilities under the ADA.
The importance of ADA-compliant web design
Ensuring your website is ADA-compliant is critical from a moral standpoint, first and foremost. The disability community deserves equal access to websites, and web designers should consider their unique needs when creating websites.
It is important to note that organizations that fail to comply with the ADA risk facing legal recourse. This includes potentially receiving an ADA compliance demand letter and facing ADA website compliance lawsuits.
Not complying with the ADA can also harm your brand and business reputation. Remaining partially or fully inaccessible to an estimated 27% of American adults can be perceived as a lack of respect toward the disability community.
Key takeaways
Understanding the key considerations for ADA compliance, such as responsive design, clear navigation, and keyboard accessibility, is crucial for creating an effective and user-friendly website.
Investing in accessibility and inclusive design is more than a law and social responsibility. It also leads to superior business outcomes and benefits the community.
By conforming to WCAG and using the right tools, web designers can ensure their websites are accessible to everyone.
Frequently asked questions about ADA-compliant web design
Q1. What does “ADA-compliant web design” entail?
A1. It means designing websites so that people with disabilities can perceive, navigate, understand and interact with content—ensuring features like screen-reader compatibility, keyboard navigation, clear structure, alt text, and contrast regardless of ability.
Q2. Which technical standard should web designers align with for ADA compliance?
A2. The most referenced standard is the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. While the Americans with Disabilities Act (ADA) doesn’t specify a technical standard, courts and accessibility-experts treat WCAG 2.1 AA as the benchmark.
Q3. What are key design areas highlighted in the guide for accessible websites?
A3. Important design areas include:
- Adding alt text to meaningful images
- Maintaining minimum color-contrast ratios (at least 4.5:1 for normal text)
- Avoiding reliance on color alone to convey information
- Using readable fonts and consistent navigation
- Ensuring responsive design for all screen sizes and avoiding flashing or seizure-inducing content
Q4. Can modern web-design platforms guarantee full accessibility?
A4. No. While website builders and templates often include accessibility-friendly features, they don’t ensure complete compliance. Many accessibility issues stem from custom design choices, media, or code that must be intentionally reviewed and remediated.
Q5. How should a design team approach maintaining accessibility over time?
A5. Accessibility should be treated as an ongoing process, not a one-time project. That means integrating accessibility into design workflows, conducting regular automated and manual audits, reviewing updates for new issues, and documenting accessibility efforts.
Q6. How can accessiBe support ADA-compliant web design efforts?
A6. accessiBe offers tools and services that complement web design workflows, including AI-powered scanning, automated and manual remediation, accessibility audits, continuous monitoring, and documentation support. These solutions help you reach WCAG 2.1 Level AA adherence and mitigated legal risk.
