How to design an ADA-compliant website

Your website is a digital storefront, open to anyone on the internet. You probably do your best to provide its visitors with quality visuals, experience, and web content. It all adds up to the process of converting them into paying customers.

But what if a significant portion of your potential customers can't get through the door? For millions of people with disabilities, an inaccessible website is exactly that – a closed door. This isn't just a missed opportunity. It's a growing legal and ethical concern for businesses of all sizes.

Web accessibility isn't just about helping people who use tools like screen readers. Many individuals face challenges when using websites, even if they don't rely on specialized accessibility software. There are many smaller accessibility barriers that can make it difficult to access web content for people, for instance, with minor visual impairments.

The ADA website compliance standard can help website owners offer equal access to virtually any person on the internet. Here's what you need to know about it.

What does ADA stand for?

ADA stands for the Americans with Disabilities Act. This landmark civil rights law, enacted in 1990, is a cornerstone of equality and accessibility in the United States. At its core, the ADA aims to ensure that people with disabilities have the same rights and opportunities as everyone else.

The Americans with Disabilities Act was initially conceived with physical spaces in mind, and was divided into five titles, each covering a different aspect of accessibility compliance.

• Title I Prohibits employment discrimination against individuals with disabilities.
• Title II Mandates equal access to public services and transportation for individuals with disabilities.
• Title III Requires public accommodations and commercial facilities to be accessible.
• Title IV Requires accessible telecommunications for individuals with hearing and speech disabilities.
• Title V Includes provisions against retaliation for asserting ADA rights.

Title II and Title III are the ones usually brought up when talking about web accessibility standards, with Title III taking the lead when it comes to most websites. The term public accomodations includes most, well, accomodations and places of work – but also web pages related to those accomodations. This interpretation means that businesses and organizations are expected to make their online presence accessible to individuals with various disabilities.

Accessibility in web design: ADA and WCAG

As we mentioned above, web accessibility is not just a legal necessity. It’s an opportunity to reach a broader audience. With around 1.3 billion people, or 16% of the global population, living with a disability, this represents a significant portion of potential users who could benefit from accessible design.

So, how do you make your website ADA-compliant?

The ADA requires businesses to make their websites accessible, but it doesn't provide specific guidelines on how to achieve this. This is where the Web Content Accessibility Guidelines (WCAG) come into play.

WCAG is a comprehensive set of recommendations designed to ensure web content is accessible to a diverse range of users. These guidelines address various aspects of web accessibility, including visual, auditory, and cognitive accessibility.

The guidelines have evolved over time, with WCAG 2.0 being a significant milestone. It introduced 12 guidelines under four principles: Perceivable, Operable, Understandable, and Robust.

WCAG 2.1 built on this by addressing additional accessibility challenges, particularly for users with cognitive and learning disabilities, low vision, and mobile accessibility needs. You don't have to fulfil all requirements listed in those sets to meet ADA website compliance standards.

When considering ADA website compliance, it's important to understand that there are different levels of accessibility implementation. These levels - A, AA, and AAA - represent increasing degrees of inclusivity, allowing website owners to approach accessibility in a structured manner. Each level builds upon the previous one, offering a clear path for progressively enhancing a site's accessibility features. Let's explore what each of these levels entails and how they relate to ADA compliance.

Level A is meant for basic compliance. Think having alt text for non-textual content, descriptive names for links, and sufficient color contrast on all web pages. Right now, Level AA is the standard for state and local governments’ web content and mobile apps. This is also the level you should aim for if you want to ensure ADA web compliance for your own website. Level AAA takes it a bit further with sign language video captions and extended audio descriptions for all pre-recorded video content.

Is Section 508 related to ADA?

Section 508 is an amendment to the Rehabilitation Act of 1973, specifically addressing the accessibility of information and communication technology (ICT) in the federal sector. According to the United State Access Board Section 508 requires that federal agencies' ICT be accessible to people with disabilities, including employees and members of the public.

Section 508 is often confused with ADA regulations. However, while both share the common goal of promoting accessibility, Section 508 is specific to federal agencies. Here are the key differences between the two.

• Scope ADA applies to both public and private sector websites, while Section 508 specifically targets federal agency websites.
• Focus ADA requirements for websites are generally interpreted through guidelines like WCAG, while Section 508 provides more specific technical standards for web accessibility.
• Implementation Section 508 compliance is mandatory for federal websites, whereas ADA compliance is expected for all public-facing websites to ensure accessibility and avoid potential lawsuits or legal fees.

ADA compliance checklist for web design

Now that you understand the importance of ADA compliance and its connection to WCAG guidelines, let's dive into a practical checklist for ensuring your website meets accessibility standards.

Provide text alternatives

One of the fundamental aspects of web accessibility is ensuring that all non-text content has text alternatives. This includes images, videos, and audio content – or, alt text, captions, and transcripts.

Alt text for images should be descriptive and convey the purpose or meaning of the visual element.

For videos and audio content, your website should provide accurate captions synchronized with the audio, and include complete transcripts that capture all spoken words and important visual information. It will make it easier for people with hearing disabilities to enjoy your web content better.

Ensure sufficient color contrast

Color contrast is crucial for users with visual impairments. Text and interactive elements must have sufficient contrast with their backgrounds.

There are many color combinations that look great when it comes to design, but lack color contrast – light gray on white, soft pink on light beige, mint blue on pale yellow. Using them for backgrounds, for instance, can make your website create a good impression on the site visitors. However, using them for paragraphs of text and buttons can turn into an accessibility barrier even for users that are not visually impaired!

Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. You can use color contrast checker tools like WAVE to verify compliance and ensure your content is easily readable for all users.

Allow resizable text

Your website should accommodate users who need to enlarge text for better readability. Not all devices will render a web page the same way, especially when you consider mobile devices or hardware screen magnifiers.

Your users should be able to resize text on your website up to 200% without requiring assistive technology or breaking the layout. One way to ensure that is to avoid using fixed font sizes or rigid layouts that don't adapt to text resizing.

Minimize images of text

Using images of texts lets you create fancier visual elements. Unfortunately, they also create accessibility issues – sometimes even when you provide appropriate alt texts.

Many screen readers indicate they are reading an alt text, which creates an unnecessary interruption, so it's best to avoid using images of text altogether if you want to prioritize web accessibility.

If you must use images containing text, provide the same information in HTML format to allow for resizing and screen reader accessibility.

Ensure seamless keyboard navigation

Not all users can navigate with a mouse. So, your accessible website should be operable using only a keyboard. This includes providing visible focus indicators for keyboard users and ensuring a logical tab order for navigating through content.

A problem you should be especially vary of is focus trapping or keyboard trapping. It occurs when a specific element on a web page traps the focus of keyboard navigation in one element, preventing users from navigating the rest of the website freely.

Note that keyboard navigation is also used in other hardware meant for people with disabilities, such as switch interfaces or even sip-and-puff systems.

Offer enough time

Some users may need more time to read and interact with content. This is especially true for people with cognitive disabilities, motor impairments, or those using assistive technologies.

Your website should allow users to adjust or turn off time limits on content like sliders, carousels, or timed forms. For instance, if you have a slideshow on your homepage, make sure users can pause it or control its speed. If you have a form that times out for security reasons, provide clear warnings and the option to extend the session.

Additionally, avoid content that flashes more than three times per second, as this can trigger seizures in some individuals. This includes not just obvious flashing elements like animations, but also rapid changes in brightness or contrast that might occur during video playback or transitions between pages.

Enhance readability

Clear, understandable text is essential for all users, but particularly important for those with cognitive disabilities or learning difficulties. Use plain language and avoid jargon whenever possible. When you must use technical terms, provide clear definitions or explanations.

Structure your content with clear headings and concise paragraphs to improve overall readability. Use bullet points or numbered lists for complex information, and consider using infographics or diagrams to illustrate complex concepts visually.

Remember that readability is more than just the words you use. The layout and design of your content also play a crucial role. Ensure there's enough white space, use a legible font size, and maintain a consistent layout across your website to help users navigate and understand your content more easily.

Maintain predictability

Consistent navigation and interaction patterns throughout your website help users understand how to use your site. This is particularly important for users with cognitive disabilities or those who rely on screen readers.

Avoid surprising changes in content or layout that might confuse or disorient users. For example, don't have menus that change location or behavior on different pages. If you have dynamic content that updates automatically, make sure users are aware of these changes and can control them if necessary.

Also, ensure that interactive elements like buttons and links behave consistently across your site. For instance, if clicking on a product image opens a larger view on one page, it should do the same on all pages. Predictability helps users navigate your site more efficiently and with greater confidence.

Offer input assistance

Forms and other interactive elements can be particularly challenging for users with various disabilities. Help users avoid and correct mistakes when interacting with your website.

Provide clear instructions for forms, label form fields properly, and offer helpful error messages that explain what went wrong and how to fix it. For example, instead of just saying "Invalid input," your error message could say "Please enter a valid email address in the format [email protected]."

Consider implementing real-time validation where appropriate. That way, users can correct errors as they go rather than submit the form and then end up having to go back to fix their mistakes. Again, this is something that lets you fix accessibility issues for people with disabilities and make the overall experience better for all users.

Providing clear success messages when forms are submitted correctly is a cherry on top.

Ensure compatibility

Your website should be compatible with current and future assistive technologies. Go beyond just visual design and consider how your site's structure and content are interpreted by different technologies.

Use semantic HTML elements and ARIA attributes where appropriate to improve the structure and meaning of your content. For example, use <nav> for navigation menus, <article> for self-contained pieces of content, and <button> for clickable elements that perform an action.

Ensure compatibility with different browsers and assistive technologies. This includes testing with popular screen readers like JAWS, NVDA, or VoiceOver, as well as testing keyboard navigation and various browser zoom levels.

Implement effective navigation

Expanding on the keyboard navigation accessibility requirements, your website should allow for multiple ways to navigate around it. This could include traditional navigation menus, sitemaps, and breadcrumbs. Each of these methods helps different users find their way around your site more easily.

Similarly, you may want to include skip links to allow users to bypass repetitive content and get straight to the main content of a page. It's particularly helpful for keyboard users and those using screen readers, as it allows them to avoid unnecessary interruption with content they are already familiar with.

Use proper heading structure

This is something that is usually mentioned when talking about proper writing or optimizing content for search engines, but it also plays a significant role in web accessibility.

Use headings (H1, H2, H3, etc.) to create a clear content hierarchy. Your H1 should typically be the main title of the page, with H2s for major sections, H3s for subsections, and so on. Avoid skipping heading levels, as this can confuse screen reader users.

Remember, headings should be used semantically to structure your content, not just for visual styling. Don't use a heading tag just to make text larger or bold – use CSS for that instead. Proper heading structure allows screen reader users to navigate your content efficiently and understand the relationships between different sections of your page.

Create descriptive links

Link text should clearly indicate the destination or purpose of the link. This is crucial for all users, but especially for those using screen readers who may navigate a page by jumping from link to link.

Avoid generic phrases like "click here" or "read more." Instead, use descriptive text that makes sense out of context. For example, instead of "click here to learn about our services," use "learn more about our accessibility consulting services" and be more precise.

If you need to use the same link text for multiple links, make sure to include additional context for screen readers. This can be done using the aria-label attribute to provide more descriptive text that's read by screen readers but not visible on the page.

Design accessible forms

Forms are often a crucial part of user interaction on websites, whether it's for contact information, purchases, or other types of data input. Make your forms accessible by using clear labels and instructions.

Each form field should have a visible label that's associated with it programmatically. Provide clear instructions on how to fill out the form, including any specific format requirements like date formats or password requirements.

Group related fields together using fieldset and legend elements. This helps users understand the relationship between different form fields. When errors occur, provide clear error messages that identify the problem and suggest a solution.

How to check if a website is ADA-compliant?

Ensuring ADA compliance isn't a one-time task – it requires ongoing usability testing and adjustment. While a comprehensive audit often requires expert knowledge, there are several tools and methods you can use to start assessing your website's accessibility.

• Automated accessibility checkers like WAVE or Lighthouse can quickly scan your website for common accessibility issues. These tools can identify problems like missing alt text, low contrast ratios, or improperly structured headings.

• Remember, automated tools can't catch everything. Manual testing is important for web accessibility elements like keyboard navigation and screen reader compatibility. Try navigating your entire website using only your keyboard. Can you access all functions and content? Is the focus visible and logical?

• Test your site with screen readers like NVDA or JAWS. Listen to how your content is read aloud. Is it understandable? Are all important elements being announced?

• Don't forget about real-world testing. If possible, invite people with disabilities to use your website and provide feedback. Their insights can be invaluable in identifying issues that tools and tests might miss.

While these methods can help you identify many accessibility issues, they're not exhaustive. For full compliance, consider working with ADA compliance agency and experts who can provide a thorough audit and remediation plan.

Why is ADA compliance so important in web design?

ADA compliance in web design isn't just about following rules, it's about creating an inclusive digital world. As our lives become increasingly digital, ensuring equal access to online information and services is more important than ever.

The benefits of having an ADA-compliant website

Having an ADA-compliant website offers numerous advantages.

• Expanded audience An accessible website opens your digital doors to millions of people with disabilities, broadening your potential customer base. This isn't just good ethics. It's good business.

• Improved user experience Many accessibility features, like clear navigation and well-structured content, benefit all users, not just those with disabilities.

• Enhanced SEO Proper heading structure, descriptive alt text, and well-organized content can improve your site's search engine rankings.

• Legal compliance Adhering to ADA standards and WCAG 2.1 guidelines reduces the risk of accessibility-related lawsuits and associated legal fees.

• Positive brand image Demonstrating commitment to accessibility enhances your brand's reputation, showing you value all potential customers.

Risks of non-compliance

While the ADA doesn't explicitly mention websites, courts have increasingly interpreted the law to include digital spaces under Title III's places of public accommodation. This means that for many businesses, ADA compliance for websites is effectively mandatory.

However, the extent of required compliance can vary based on factors like the nature of your business and your target audience. Government agencies and federal contractors are held to strict accessibility standards, while private businesses may have more flexibility.

Despite this ambiguity, it's generally advisable for all businesses to strive for ADA compliance. Not only does it mitigate legal risks, but it also aligns with the spirit of inclusivity that the ADA represents.

We care about ADA & WCAG at Adchitects

At Adchitects, we recognize the crucial role of accessibility in creating truly inclusive digital experiences. That's why we approach every project with WCAG guidelines in mind. This means that most of our websites are largely ADA compliant by default, ensuring a high level of accessibility for all users right from the start.

For clients who require stricter adherence to accessibility standards, we're ready to go the extra mile. Whether you need WCAG Level AA or even AAA compliance, we have the expertise to help you out.

If you're ready to elevate your digital presence with a website that's both beautiful and accessible, we'd love to hear from you. Reach out to us through the contact form on our website. Let's work together to make the web a more inclusive place, one website at a time!