The information presented within this guide is aimed at website owners seeking to learn the ropes of web accessibility. Technical elements are described in layman’s terms, and, as a rule, all topics pertaining to the legalities of web accessibility are presented in as simplified a manner as possible. This guide has no legal bearing, and cannot be relied on in the case of litigation.
According to the General Assembly of the United Nations, 1.5 billion people worldwide have a disability. Unfortunately, most websites today aren't designed with accessibility in mind, leading to a significant digital divide.
Therefore, designing a website so that it can be fully accessed by the disability community is morally imperative. Many businesses and organizations are also legally mandated to do so under the Americans with Disabilities Act (ADA).
But what does accessible web design mean? What website features will you need to ensure are accessible to fully comply with the ADA?
In this guide, we'll cover the fundamentals of ADA compliance and web design. By the end, you'll know how to create an accessible website and do your part to make the web a more equitable place.
ADA compliance and web design: an overview
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.
We’ll cover this in greater detail later in the blog. You can click here to skip to that section.
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.
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). 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. This is currently the optimal benchmark for web accessibility when it comes to federal law.
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.
Both WCAG 2.0 and 2.1 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:
- 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 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 blogNot 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- 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 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 conversionsDesigning 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 wellEnsuring 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.
What do web design platforms offer in terms of accessibility?
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.
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.
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.