Small fonts. Low contrast. No alternate texts (alt texts). These were some of my website’s features that made it inaccessible.
Although I’ve since made changes to the site, it highlights an often-overlooked issue many marketers struggle with or are even unfamiliar with — that of website accessibility. Websites today have become a means for people to do business, entertain themselves, get educated, connect with loved ones, and more.
Numbering over 1.3 billion people, or 16% of the global population, people with disabilities like visual, motor, or mental impairments make up a significant portion of website users. They are your customers, too. However, a review of the top one million home pages shows an average of 56.8 accessibility errors per page. Clearly, there’s still much work to be done.
By creating an inclusive and accessible website, you can avoid serious financial penalties and expand your revenue-generation capabilities. In today’s post, I’ll discuss what an ADA-compliant website is and share some rules for staying compliant.
Table of Contents
- What is the ADA?
- What makes a website ADA-compliant?
- ADA Compliance Best Practices
- Making My Site More ADA Compliant
What is the ADA?
The ADA, short for the Americans with Disabilities Act, is a civil rights law that prevents discrimination based on disability. Its goal is to ensure that all people, especially those who live with physical and cognitive disabilities, are included in all areas of public life.
The Act was first introduced in 1990, at a time when few businesses had a digital presence. For many years, despite the explosion of the Internet, it was unclear if the law also applied to online spaces. This was finally made clear in 2010 when the ADA launched the Americans with Disabilities Act (ADA) Standards for Accessible Design.
To comply with this regulation, all the information on your website must be accessible to those with disabilities. You must also ensure there isn’t a separate path for those with limitations. For example, those who are visually impaired must be able to use a text reader to access your content, browse through your categories, or create a product return.
ADA is often confused with Section 508, which applies only to federal agencies, departments, or commercial sites interacting with these public institutions. The website accessibility rules outlined in the ADA are much broader. They apply to virtually all businesses and web developers.
As explained on the State of Nevada site, “If a website is fully ADA compliant, it meets all the requirements set forth in both Section 508 (if applicable) and WCAG standard.”
Why does ADA compliance matter?
ADA compliance is the law, and building an accessible website benefits your customers and business.
In addition to the stats that prove it matters, here are some reasons why I recommend you make your website ADA-compliant today.
1. ADA compliance promotes equality.
If your website meets ADA requirements, you show that your company is inclusive. Caring about accessibility promotes equal access and creates a positive brand image.
2. Your business must follow the law to avoid legal fees.
Ensuring your website is ADA-compliant is the first step to avoiding hefty lawsuits. If you simply overlook the issue of accessibility, you may face severe financial consequences in the form of:
- Legal fees.
- Possible settlements.
- The costs associated with rebuilding your website in compliance with the ADA.
- Potential public relations problems that might negatively impact your revenue.
3. ADA compliance improves usability.
I’ve found that websites that focus on accessibility tend to be more user-friendly for everyone, not only for individuals with disabilities. For example, including video captions might come in handy when users are watching your content in a noisy space.
What makes a website ADA-compliant?
I suggest website owners take a look at Web Content Accessibility Guidelines (WCAG) to ensure ADA compliance. WCAG offers a set of standards applied internationally to improve web accessibility. It focuses on four key criteria.
1. Perceivable
All the information, including user interface components, must be shown clearly. It can’t be invisible to all of their senses.
For your website to pass the perceivable criterion, you should provide text alternatives for non-text content like controls, input, time-based media, tests, sensory experiences, etc.
Examples of text alternatives include captions for videos, audio descriptions, sign-language interpretation, and so on.
2. Operable
Users must be able to use the interface freely. Interactions that cannot be performed should be eliminated. For your website to be operable, users should be able to carry out every operation from their keyboards.
Users should also be able to stop, pause, or hide any moving, blinking, scrolling, or auto-updating information that appears on your site.
In addition, having an operable website involves designing your content in a manner that doesn’t cause seizures — meaning any flashy content on your site is below the general flash and red flash thresholds.
W3.org offers more details about how to make your website operable.
3. Understandable
The information and user interface must be easy for users to understand. They need to know what to do when they visit a website.
In my experience, here are some things you can do to make your website understandable:
- Use language your audience understands or offer translations if you’re speaking to a broad audience.
- Describe input errors in text.
- Provide labels or instructions where content requires user input.
4. Robust
The content must be robust so that various user agents, such as assistive technologies, can interpret it.
This requires that you stay up-to-date with the advancements made with assistive technologies so your site can continue working with them.
You achieve ADA compliance when your site meets WCAG’s success criteria. However, it can be somewhat tricky. That is why Jeff Adams, Vice President - Accessibility Operations at UsableNet, recommends a “progress over perfection route.”
Jeff recommends that you conduct a sitewide audit detailing all the accessibility issues. Then, create a plan to start working your way down from high-severity issues or resolving the issues on the pages with the most traffic.
You can conduct a web accessibility report or evaluation to see how your website performs as is. Both free and paid options are available. Accessi.org is one option to check compliance. You can enter a URL, and the tool will generate an accessibility report. You’ll find out if your site is accessible and what changes you must make to comply with the ADA.
After you clear the high-severity issues, then move on to the medium-severity issues, and so on.
If this is your first rodeo with accessibility, you can expect to spend 12-18 months resolving issues or implementing new processes.
ADA Compliance Best Practices
Here are a few web accessibility guidelines related to content, website functionality, and design that can help you achieve ADA compliance.
1. Make sure that your web content is accessible.
Keep sentences short and simple.
The shorter your sentences are, the easier it is for readers to understand your content. The same goes for using simple terms instead of industry jargon. Some other rules to follow include:
- Use bulleted lists (like the one you’re looking at) to break up long paragraphs.
- Include a table of contents, key takeaways, and a summary section.
- Bold the most important phrases.
I also suggest you aim to keep the most vital information as close to the top of the page as possible. Also, if your language uses a left-to-right script, align all text to the left.
Pro tip: This approach will make your website more valuable and legible for all visitors — not only those with disabilities.
.png)
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Ensure proper headings.
Use headings to help those with a screen reader or visual impairments easily read your content. HTML header tags will be your best friend as you apply the proper heading structure.
Use just one H1 tag that’s reserved for the title. For the main sections, use H2 tags. H3s, H4s, and other headings can be used as you go deeper.
In my experience, proper headings clearly structure the content for all site visitors. This benefits those who use a screen reader and anyone skimming your site.
See the Pen ada compliance - headings by HubSpot (@hubspot) on CodePen.
Use descriptive links.
I know it’s easy to understand where a “click here” link will take you when looking at a site. Still, it’s not as simple for users with visual limitations.
So I recommend you use descriptive text to clarify where each link leads to. Make it as accurate as can be.
If you’re writing a blog post, use a whole sentence like “learn more about how our tool supports lead generation.” For landing pages and buttons, always use clear CTAs like “sign up now,” “watch a demo,” or “talk to sales.”
Don’t forget about your PDFs and other non-HTML files.
This common mistake makes websites only partially compliant — even if all other WCAG criteria are met.
If you link to PDFs, PowerPoint presentations, Word documents, or other non-HTML-based files, ensure that assistive readers can see and use the text.
Pro tip: Use a compliance checklist when creating or reviewing these attachments.
2. Ensure your design is user-friendly for all.
Emphasize contrast.
Color blindness or color vision deficiency is a severe issue that affects 1 in 12 men and 1 in 200 women. But what does it actually mean when it comes to web design?
Let’s put it into perspective.
If you had a box of 24 colorful crayons for a person with moderate red/green color blindness and asked them to identify each color, they would only be able to recognize five. So, if you only use color to communicate information, some users won’t be able to understand it.
In addition to color, you should use patterns, fill, sizing, borders, icons, or whitespace. Also, make sure there is sufficient contrast between the background and the text. The 4:5:1 contrast ratio for text is suggested by WCAG 2.0 level AA compliance.
To find out the ratio for your text, you can test your colors on a contrast checker. These systems will both show your ratio and tell you if you pass current accessibility standards.
Here are a few of my additional ideas for boosting contrast:
- Darken the darkest color.
- Lighten the lightest color.
- Make the font bolder and increase your letter spacing.
- Make the font larger to avoid too-tight letter spacing.
- Select a font with a different design.
Below are two versions of Hubspot’s homepage. Notice how the colors change when you select the “high contrast” option at the top of the site:
Include alt text for images.
If you’re like me, you likely use images on your website. Those that aren’t there for decorative purposes must have alt text that neutrally describes what’s on the image. This also applies to images that act as buttons or links.
You can add alt text directly in the HTML code of your image. Many content management systems also offer front-end options for adding alt text.
Jeff advises that when using alt texts, “your images have meaningful alternative text.” “Meaningful alternative text,” he continues, “means that the alt attribute has information that someone who can’t see the image needs to know to fully understand the page's content. As you think about what to write or if the image is decorative, consider what would be missing from the page if the image weren’t there.”
Optimize videos for accessibility.
According to Wyzowl, 82% of people were persuaded to buy a product or service by watching a video.
While video is a powerful marketing tool, it must be made accessible to different audiences to maximize its potential. This includes creating subtitles for hearing-impaired individuals and a transcript for visually impaired users.
You can even go one step further and include a descriptive audio transcript, which could act as a high-quality alternative to the video.
3. Remember your website’s functional requirements.
Make it easy to navigate without a mouse.
Not everyone can use a mouse, especially those with visual or motor disabilities. However, they should still be able to navigate your website easily using keyword navigation.
Make sure that users can use the arrow keys to enter and move between sites and click on various interface elements. This also applies to forms. Users should be able to fill them mouse-free.
Make sure your HTML has aria labels for links.
Aria-labels are an HTML attribute that helps screen readers identify ambiguous elements. A great example is the “X” sign, which closes a popup or full-screen mode.
For most website visitors, the element's function will be clear. But those who use a screen reader might simply hear the letter “x” instead of “quit” or “exit dialog.” Here’s where an aria label comes in, telling the user what the button’s action is.
Add labels to all fields and forms.
To make it easy for all users to fill out forms on your site, assign an HTML <label> tag to each field.
When visitors start entering their information through an assistive reader, they will understand the requirements for each field. This includes any validation rules, like using a special sign-in password.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
Also, if they make any mistakes, like providing a phone number that is too short, they will be quickly informed.
Making My Site More ADA Compliant
Let’s consider a live example of how I made my website more compliant.
A scan on accessi.org showed 50 errors (1 high impact, 23 medium impact, and 26 low impact).
I also checked the site on accessibilitychecker.com. There, I had a 78 compliance score.
Clearly, I had a lot of work to do.
Both tools mentioned the most significant errors: faulty page hierarchy and the lack of alt text for my images.
I had to go to my website’s backend to fix these issues. The image below shows what it looks like when using the code editor on WordPress.
I re-uploaded the images with alt text and adjusted the text to have a proper hierarchy.
Other errors found by the tools were adjustments I couldn’t make by myself. But, I improved those major areas I could. Now, rechecking my site, you’ll see that the errors have been reduced:
And my accessibility score has increased:
That’s progress.
I learned that by making some simple updates, such as using alt text and headings, I was able to resolve some major issues on my own. However, I’m going to need some help with the rest.
Follow WCAG Guidelines for ADA Website Compliance
An accessible website ensures all user groups feel welcome and have a great experience with your site. You also get to enjoy a positive brand image. Furthermore, you won’t have to worry about fines or lawsuits.
However, making your website ADA-compliant isn’t a walk in the park. But it is the right thing to do. In my experience, there is only so much you can do to improve your website’s accessibility if you don’t have a web development background.
The steps in this guide will help you get the basics covered. If you don’t want to miss anything, contact accessibility experts.
Editor's note: This post was originally published in March 2023 and has been updated for comprehensiveness.
Website Accessibility Checklist
This checklist will help you make the following more accessible on your website:
- Web Pages
- Navigation
- Video & Media
- And More!
Download Free
All fields are required.
