Between an uptick in ADA compliance lawsuits, businesses taking advantage of the Disabled Access Credit, and a greater public commitment to making sites accessible for internet users with disabilities, people are becoming more interested in making their websites ADA compliant.
If you're new to the idea of ADA compliance websites, here's some background: The Americans with Disabilities Act of 1990 (ADA) requires businesses and organizations that serve the public (including websites) to make reasonable accommodations for customers, clients, patients, or visitors who may have a disability.
If you're interested in making your website more accommodating and don't know where to start, Werkbot, a leading agency in ADA-compliant website design, is here to help. We created this user-friendly checklist for those interested in beginning the process of making their website more ADA compliant.
First, An ADA Compliance Overview
Title III of the Americans with Disabilities Act (ADA) “prohibits discrimination on the basis of disability in the activities of public accommodation (businesses that are generally open to the public and that fall into one of 12 categories listed in the ADA).” For websites, ADA Compliance is broken down into three categories: design, writing, and developing. ADA Compliance aids those with visual, hearing, and mobile disabilities, and there are six steps you can take to ensure that your website is navigable to all:
1. Headers and Titles
Ensure that all pages have a descriptive page title that directly relates to the contents of the page. Include information about site structure using 'h1' 'h2' and 'h3' tags. Headers and titles should also change in size according to optimized viewing on different devices (laptops, desktops, smartphones, tablets). That said, the ideal sizes for headers are between 18pt and 24pt.
Content on webpages may also be divided into separate sections using headers and subheaders, visible to users without any special software or equipment (for example, screen readers). Use headers and subheaders sparingly for greater usability.
- Each webpage has a browser/page title
- Each webpage has header text
- Webpages are desktop and mobile-friendly
2. Be Mindful of Font and Text Color
Body fonts should be a minimum size of 12pt. When creating content for your webpages, use a dark color for large blocks of unformatted text—for example, in a page’s main content area. Large blocks of dark text against a light background will make it easier for your site visitors to read. Conversely, you should choose a contrasting light color if you are using a dark background. Sites like Contrast-ratio.com can assist you in testing for color contrast. Also, keep your text simple by avoiding overly decorative fonts like script or italics.
In addition to font color and size, use sentence case for paragraph text and title case for your headers. Minimize the use of all lowercase or uppercase text.
- Paragraph text is at least 12pt (but smaller than header size)
- Check contrast of written content and background color
- Minimize overly-decorative fonts (script or italics)
3. Create HTML Tags and Descriptions
Provide text descriptors or alternative text for images and graphics. If you have a logo or image with no obvious context, a reader should understand the item at first glance.
Alt text—also known as alternative text, alt tags, and alt descriptions—is essential for webpages. If an image fails to load or render, alt text will appear in its place to describe the content. Alt text also helps blind or visually impaired users who use screen readers to navigate the internet. Screen readers read out the text from an alt tag so that the visitor will know what is in a picture. Alt tags that use target keywords also assist in bringing in web traffic. In short, your HTML code should be free from errors to avoid confusion.
- Each image has alt text
4. Make Your Site Accessible For All Operating Systems
Mobile device browsing statistics show that phones are an ever-growing portion of the web population, and therefore a large percentage of your audience could be using this medium. If you are not already supporting mobile browsing (iPad, iPhone, Android, etc.), you need to consider how to ensure that ADA compliance extends to users who are browsing on a mobile device. In this case, ADA compliance may include creating a separate mobile website or a downloadable app.
You must also consider the differences between Windows and Mac OS users and how these operating systems affect your website’s appearance on various web browsers like Safari, Google Chrome, and Firefox. Be mindful of using JavaScript, tables, frames, forms, pop-ups, and other applications that may be incompatible with specific web browsing software.
Ensuring mobile-friendly and accessibility on all operating systems can come with some technical challenges. During this stage, it can be a good idea to tap a developer that specializes in ADA compliance websites.
- Ensure your site is working properly on all operating systems and browsers
5. Provide A Navigation Tool
Website navigation tools are links that allow users to move from one page to another. They may also be a:
- Table of contents
- Search bars
- Site map
- Bread-crumb trail (link progression that displays a user’s location in a website)
- Aria-label to provide an invisible label (e.g. using aria-label=“close” to provide a name for the button that closes a popup block)
Verify that your website provides an easy-to-use and understandable navigation system. Easy-to-follow links will reduce the amount of time spent on each page and assist users with navigating between pages. Your internal searches need to be clear and logical as they will help gain traffic through search engines such as Bing, Yahoo, or Google. Lastly, keep all buttons, forms, and links visible so that they are clearly recognizable without having to hover over them or use a mouse-over function.
- Ensure navigation is clear
6. Prepare Audio and Video Transcripts
Ensure that your website uses captions on video clips as well as title descriptions within links. Text may include providing a transcript of the content or descriptions of images or objects in a video. Many people use screen readers to navigate websites, while others have difficulty listening due to background noise or sounds from other applications. Additionally, some users rely on captions to understand what is occurring in a video.
While YouTube automatically generates captions, the site often struggles with accuracy; it is best to do it yourself or hire someone else to caption your videos.
- Ensure audio and video files have transcripts
Put Us to Werk
If you have difficulty meeting these requirements or want to ensure that your site complies with ADA standards, reach out to a web development agency that specializes in it. We’ll customize a marketing strategy around your specific needs so that you can provide an optimal customer experience for all visitors—regardless of their abilities or disabilities. If you would like to learn more about our services, contact Werkbot today!