ADA compliance checklist for websites
Step 1: Read the law documentation
Step 2: All media files and maps should have an “alt” tag
Step 3: All your online forms should have descriptive html tags
Step 4: All hyperlinks should have a descriptive anchor text
Step 5: All pages on your website have “skip navigation” links
Step 6: All the text content should be structured using proper heading tags
Step 7: All PDF files should be accessible
Step 8: All videos should have subtitles, transcripts and audio description
Step 9: The color contrast of your web pages should be sufficient according to WCAG
Step 10: All fonts should be accessible
Step 11: All HTML tables should be populated with column headers, row identifiers and cell information
Step 12: All audio files on your website should have a written caption
Step 13: All call to action buttons on your website should have an accessible name and an ARIA label
Step 14: All your website should be accessible with keyboard navigation
Step 15: Have a website accessibility policy page
Step 16: Have easily locatable contact information to allow users to request accessibility information
Step 17: Test your website accessibility according to the Website Content Accessibility Guidelines
Step 18: Automate your website accessibility check to prevent missing critical accessibility issue
Accessibility guidelines for websites to achieve ADA compliance
Having an accessible website and marketing materials means having your entire team briefed on what accessible marketing looks like. Don’t panic—once you get the hang of things, it’s very quick to ensure your site is accessible.
Start by keeping the following guidelines in mind:
Content
When writing content for web, emails, social media, etc., it’s important that content is accessible for people with all four types of disabilities: visual, hearing, motor, and cognitive.
Structure
To help those users with a screen reader or other visual impairments easily read your content, use headings properly. That means using the proper heading tags (e.g. use the H2 function, instead of simply using a bigger or bolder font). Your headings should also follow a logical hierarchy: the title or H1 is followed by an H2, and underneath an H2 heading use an H3 heading. This makes the structure and importance of content easy to follow.
Readability
Making content easy to read and follow is important for readers with cognitive disabilities, but it also makes your content easier to scan and read for other users as well. Keep your sentences short and to the point.
Use bulleted lists, summary sections, and bolded keywords for easier scanning. Start with the most important information and end with the least important information. Avoid jargon and overly complicated words. Left align all text, including headlines.
Link text
When linking to other webpages, don’t use “click here” as the link text. Using descriptive link text make it clear to users with screen readers or visual impairments which link is which and where each one leads.
Accessible files
If you link to PDFs, PowerPoints, Word documents, or other types of files, make sure those files are accessible.
Design
Accessible design means making your design more usable for everyone, not only people with disabilities. Here are a few things to think about when it comes to accessible design.
Videos
There are three main ways you can make videos more accessible.
Subtitles: Make sure all videos have them. This not only helps people with hearing disabilities but is also useful for people is crowded settings or who don’t want to put in headphones to watch a video in public.
Transcripts: Include a transcript that has the text version of any speech in a video. The gold standard is a descriptive transcript, which includes a description of what’s happening in the video.
Audio description: This a speech version of a descriptive transcript and it makes it easier for blind people or people with visual disabilities to consume content.
Images
All images should have alt text, which is a short text that clearly and neutrally describes what’s going on in the image. This is the text screen readers read when they come across an image, so file numbers or unhelpful information can cause major usability problems for visually impaired users. For decorative images, the alt attribute should be empty (e.g. alt:“”).
Color
About 4% (or 312 million people) of the world’s population has some form of color blindness, which means that using color alone to communicate information can cause problems for some users. Use patterns, fill, sizing, borders, icons, or whitespace to communicate in addition to color.
When using color, make sure that the contrast is sufficient enough that users can read text or see color differences. For level example, WCAG 2.0 level AA compliance requires that your text have a contrast ratio of 4.5:1. If this sounds overwhelming, simply use a color contrast checker to double check your color combinations.
Fonts
Sans serif fonts are easiest to read, as they don’t include the small decorative markings. Limit the number of fonts you use (e.g. one for body text and one for headlines). Always use at least size 12 font and use bold for emphasis, rather than italics.
Website
In order to make your website accessible (and increase conversions!), it’s important to think about all four types of disabilities: visual, hearing, motor, and cognitive. Website accessibility is a huge topic with many areas to explore. For marketers, we’ll focus in on three main areas.
Keyboard navigation
Keyboard navigation is important for people with visual and motor disabilities. Users who can’t use a mouse or who use a screen reader should still be able to navigate through your website. Make sure users can tab through menus, buttons, and all other navigational elements.
When users navigate to an element, they should have some type of indicator or focus to show where on the page the user is.
Form and table labels
The most important element for form accessibility is labels. Make sure each form field has a label (using the <label> element in the code for each field). That will ensure screen readers read the name of each field. If the user needs to know critical information about a field (e.g. if a password must be at least 9 characters), don’t include that information as placeholder text in a field but instead as text underneath the field label.
Make sure forms are easy to use and have a logical flow. Forms should, of course, be keyboard accessible, so users can tab through fields. Provide instructions at the top of a form to help users understand how to fill them out.
CTA buttons
CTAs are critical for marketing success, so it’s important that all your CTAs are accessible. Your buttons should always have an accessible name, which is usually the text on the button itself. Use an aria-label for the button in order to give screen readers the proper information. It might be helpful to walk through a few button accessibility best practices with your website development team to ensure CTAs are fully accessible.
