DIY Digital Accessibility Compliance Guide

The DIY Digital Accessibility Compliance Guide was created to help you improve your brand and customer loyalty, Search Engine Optimization, and achieve digital accessibility compliance!

Table of Contents

• Here’s Why Digital Accessibility Is Important To You & Your Business
• DIY Digital Accessibility Compliance Guide Methodology
• How To Learn Where And What Digital Accessibility Violations Are In Your Code
• How To Perform Automated Digital Accessibility Testing
• How To Perform Manual Digital Accessibility Testing
• How To Test For Accessibility Violations & Get Compliant
• 1. Informative Images & Alternative Text Descriptions
• 2. Nested Headings For Structure & Organization
• 3. Adequate Color Contrast
• 4. Form Fields & Appropriate Labels
• 5. Captions, Audio Descriptions, & Transcripts
• 6. Data Table Accessibility
• 7. Descriptive Page Titles
• 8. Website Link Accessibility
• 9. Accessible Notifications and Alerts
• 10. Keyboard Navigation & Interactive Elements
• 11. Name Your Frames Appropriately
• 12. Avoid Keyboard Traps
• 13. Accessible Skip Links
• 14. Set Your Website’s Language
• 15. Avoid Content That Causes Seizures
• 16. Enable Visitors To Report Digital Accessibility Issues

Here’s Why Digital Accessibility Is Important To You & Your Business

Brand, SEO, compliance, Costs.

• Organizations inclusive of people with disabilities are more liked and trusted by customers
• Digital accessibility improves your website’s SEO, conversions, and overall UX
• Accessible code is clean, compliant code that mitigates your risks
• Bundling marketing services with compliance lowers your monthly costs

Talk to an Expert - Get a Quote 

DIY Digital Accessibility Compliance Guide Methodology

This Guide contains the specific areas you will need to work on to improve digital accessibility compliance according to the Americans with Disabilities Act (ADA) and the Web Content Accessibility Guidelines (WCAG).

3 things must be accomplished to bring your website into digital accessibility compliance:

1. Learn where and what accessibility violations are in your code
2. Know how to fix the code
3. Make the change to your code

How To Learn Where And What Digital Accessibility Violations Are In Your Code

You must test your website in 2 ways to learn where and what digital accessibility violations are in your code:

1. Automated digital accessibility testing
2. Manual digital accessibility testing

*Note. A combination of automated testing software and manual testing approaches are required to ensure you achieve digital accessibility compliance. This is detailed below.

Automated Digital Accessibility Testing

Fixing digital accessibility violations you find through automated digital accessibility testing is the best first step to protect yourself from a digital accessibility lawsuit. This helps you quickly identify and fix the “low-hanging” digital accessibility violations that can be found using software-the primary tool used by the lawyers of plaintiffs in “drive-by” digital accessibility lawsuits. Nearly 5000 digital accessibility lawsuits are filed each year. The average settlement cost is between $4000-$7500 plus legal fees.

The increase in lawsuits is driven by greater awareness of digital accessibility issues, increased regulatory focus, and a growing number of plaintiff law firms specializing in this area. The anticipation for 2024 and 2025 is a continued upward trend, with a significant number of new lawsuits filed every week as businesses continue to grapple with compliance.

There are free and paid automated digital accessibility testing tools. All are browser extensions, but some have additional user interfaces and or capabilities.

Download one or more of the below browser extensions for automated digital accessibility testing. Then run accessibility tests across your website starting with the homepage.

Digital Accessibility Report & Test Suite (DARTS)

WAVE Evaluation Tool

Accessibility Insights

*Note. You may need help finding the right color contrast with your brand colors. The Accessible Web Color Contrast Checker is a free tool that can help. Color contrast ratios are covered in detail later.

How To Perform Automated Digital Accessibility Testing

If you have hundreds of webpages, focus on the pages most critical to your website’s intended purpose and function. For example, if you have an online store, then run tests on your product pages, shopping cart, and checkout pages. If you have a content-driven marketing strategy, you will want to be sure to run automated tests on every new release, campaign, and blog or vlog post.

Prioritize fixing the most severe digital accessibility compliance violations first. These have the greatest impact on your visitors with disabilities. Additionally, these violations usually have the biggest impact on your website’s UX, SEO, and conversion rates.

Most severe accessibility violations, also known as “road blocking” violations, are found through manual digital accessibility testing. The reason is because automated testing only tests the static state of your website at any given time. Once a visitor begins interacting with your website, it begins to dynamically change. It is here, after the website has changed, by which many severe and “road blocking” accessibility violations present themselves.

Manual Digital Accessibility Testing

Manual Digital Accessibility testing takes 2 forms-testing with assistive technology and manual keyboard testing.

There are various types of assistive technologies for sensory, motor, and cognitive disabilities, but the most efficient and comprehensive tool for manual digital accessibility testing is a screen reader. Screen readers are used by the blind and dyslexic to read content on websites, as well as perform other daily tasks such as shopping, checking email, social media, banking, etc.

NonVisual Desktop Access, commonly known as NVDA, is free, the most widely used screen reader in the world, and AccessAbility Officer’s recommended screen reader for manual digital accessibility testing on the desktop.

Download NVDA here.

VoiceOver is Apple’s built-in screen reader on Mac OS and is used by less than 10% of screen reader users. More importantly for digital accessibility compliance, VoiceOver has browser compatibility issues with Chrome and Firefox that create test data reliability and validity issues. VoiceOver is strongest testing websites in the Safari browser. Turn on VoiceOver with the keystroke combination of ‘Command + F5’.

Narrator is Microsoft’s built-in screen reader for Windows and provides auditory feedback to users who are blind or have low vision. It reads aloud the text on the screen and describes actions, such as opening apps, navigating the web, and interacting with different elements in the interface. Narrator is a considerably basic screen reader and is not recommended for use in manual testing digital accessibility compliance. Turn on Narrator with the keystroke combination of ‘Control + Windows Key + Enter’.

JAWS, the second most popular screen reader in the world, is a paid screen reader software for Windows. JAWS is a strong screen reader for manual digital accessibility testing and does offer a “free” 40-minute version that allows users to run JAWS for 40 minutes before having to restart their computer in order to use it again. You can download a free version of JAWS here.

For manual digital accessibility testing on mobile, VoiceOver on the iPhone is the recommended and most widely used test environment on mobile. However, Android’s accessibility features for those with mobility disabilities are making Android devices more and more popular for individuals with significant disabilities like complete paralysis or ALS (Amyotrophic Lateral Sclerosis).

How To Perform Manual Digital Accessibility Testing

An experienced digital accessibility agency will be able to perform comprehensive digital accessibility tests, remediate accessibility violations for you, and managed accessibility compliance on-going. Comprehensive digital accessibility testing that would be performed by an experienced digital accessibility agency is more complicated and complex than what is found in the DIY Digital Accessibility Compliance Guide. This approach includes certified experts and certified testers with disabilities performing automated accessibility tests, manual screen reader tests, and keyboard navigation tests.

Basic manual digital accessibility testing can be done using just a few different keystrokes and combinations. When performing manual accessibility testing on a website using NVDA or keyboard navigation (no NVDA or other assistive technology), the following keystrokes and combinations will be essential for navigating and interacting with your website.

• Tab

Function: Moves the focus forward to the next interactive element on the page.

Purpose: Helps test the focus order of interactive elements like links, buttons, and form fields. This ensures that users who navigate by keyboard can move logically through the content in a meaningful sequence. It also allows testers to check whether all interactive elements are reachable by keyboard alone.

Wait! What’s “Focus”? Good question.

When an element has focus, it typically receives a visible outline or highlight, known as a "focus indicator." This visual cue shows users where they are on the page and which element they are interacting with. When a button has focus, it might have a colored border, a box shadow, or some other change in appearance to indicate its focus state. Interactive elements like links, buttons, form fields, and menu items can receive focus. Non-interactive elements like plain text or images without links generally cannot.

• Shift + Tab Combination

Function: Moves the focus backward to the previous interactive element.

Purpose: Allows users to navigate in reverse order through interactive elements. This is important for ensuring that keyboard users can move backward as well as forward, which is essential for usability and accessibility, especially if a mistake is made or the user needs to recheck something.

• Alt + Down Arrow & Alt + Up Arrow Combinations

Function: Opens and closes dropdown menus or selects the next/previous option in a dropdown.

Purpose: Used to interact with dropdowns in forms or navigation menus. Testing this ensures that dropdowns are accessible and that users can navigate through options using the keyboard.

• Up and Down Arrow Keys

Function: Moves the focus or selection upwards and downwards within a list, menu, or other navigable elements.

Purpose: Used to navigate vertically within dropdowns, lists, menus, or any other interactive element that supports up and down navigation. It's important for testing that users can navigate these elements efficiently and that the correct item is selected when navigating using up and down arrows.

• Left & Right Arrow Keys

Function: Moves focus or selection horizontally within navigable elements, such as sliders, carousels, or tabs.

Purpose: Enables users to navigate within horizontal elements like tabbed interfaces or sliders. Testing ensures that users can easily move between items in such controls.

• Enter

Function: Activates the currently focused element.

Purpose: The Enter key is used to interact with elements like buttons, links, and form submissions. It is crucial to test that pressing Enter activates the correct action, such as submitting a form, following a link, or triggering a button's action.

• Spacebar

Function: Activates buttons and toggles checkboxes or other togglable elements.

Purpose: The Spacebar is often used to select or toggle elements such as checkboxes, radio buttons, or buttons. Testing this ensures that these elements can be activated without a mouse and that their state changes as expected when toggled.

• Escape

Function: Closes modals, dropdowns, or other interactive elements that can be dismissed.

Purpose: The Escape key is commonly used to exit or close modal windows, dropdowns, and other overlay elements. Testing this ensures that users can easily dismiss these elements and return to the main content without requiring a mouse, which is critical for maintaining flow and usability.

Now that you understand the basic mechanics for how to perform automated and manual digital accessibility testing, let’s put this into action.

How To Test For Accessibility Violations & Get Compliant

To meet and maintain digital accessibility compliance, you must know which success criteria to test, how to test, and then how to fix those issues.

There are 50 success criteria your website will need to comply with according to WCAG 2.1 AA under Title II of the ADA, but 16 areas have been strategically prioritized in the DIY Digital Accessibility Compliance Guide for businesses to focus on.

The 16 focus areas of the DIY Digital Accessibility Compliance Guide were prioritized according to:

1. Level of impact on ADA and WCAG compliance
2. The severity impact violations have on users, and
3. The level of difficulty to find and fix violations.

*Does not include legal fees

All public facing websites owned by businesses that can be accessed in the United States are responsible for meeting and maintaining WCAG 2.1 AA compliance. Case law for WCAG 2.2 compliance is expected in 2025.

All public-facing Government agency websites currently must adhere to WCAG 2.0 AA, but have been mandated to bring their websites into compliance with WCAG 2.1 AA by 2025.

1. Informative Images & Alternative Text Descriptions

Alt tags provide alternative text descriptions for informative images that convey information required for a user to understand its purpose and function. Individuals who are blind, print disabled, and or have a cognitive disability can benefit from alt tags through the additional context and clarification provided. These tags and image descriptions make the content more understandable and reduce cognitive load.

How To Perform Digital Accessibility Testing For Alternative Text Descriptions

You can use accessibility automation software to quickly check which images on your website do not have alt tags, but automated testing cannot determine if the text description of the image is adequate to achieve digital accessibility compliance. This requires a manual check by a human.

Using NVDA and a mouse, simply bring the NVDA cursor close to the image by clicking right before it, either just above or just to the right. Then press the down arrow key to listen for NVDA to navigate to and read the image’s alt tag. If there is an image description, it will be read.

If you hear a file name that begins with https://... Or “blank”, then the image’s alt tag is missing an appropriate text description, which is required to achieve ADA and WCAG digital accessibility compliance.

How To Write Alt Tags & Text Descriptions For Your Images

Deciding whether an image needs an alt tag with an informative text description or if it should be marked as decorative depends on the image's purpose and context within the content.

If the image conveys essential information that is not fully provided by the surrounding text, it requires an informative alt text attribute. Good examples include diagrams, charts, or graphs, photos that contribute to the meaning or context of the content, and icons or buttons that trigger actions like search or submit buttons. In this instance, insert a clear, concise description in the image’s alt attribute that conveys the image’s purpose or meaning.

If the image is purely decorative and does not add any meaningful information to the content, it should be marked as null. For example, background images, images used for layout purposes, and other decorative images should be  marked as null.

To mark the image as decorative, use an empty alt attribute (alt=""). Notice nothing between the quotes. This is an empty alt tag. This empty alt tag enables screen readers to skip over unimportant images that do not functionally contribute to the user’s experience, the website’s purpose, or function.

For complex images like infographics or charts where a detailed explanation is needed, the alt text may not be sufficient to convey all the information. Instead, the alt text should briefly describe the image and refer users to a longer description elsewhere on the page or provide the key takeaway from the complex image that the author wants the user to know within the tag.

Your Alt Tag & Text Description Digital Accessibility Checklist

• If informative, use descriptive alt text
• If decorative/redundant, use alt="" (null alt text)
• If functional, use alt text to describe the function
• If complex, provide a brief alt text and refer to a more detailed description or provide the key takeaway right in the tag

2. Nested Headings For Structure & Organization

Nested headings are a way to organize content on a webpage in a logical, hierarchical structure from 1 to 6. Similar to the headings in The DIY Digital Accessibility Compliance Guide, headings within a webpage help both people and search engines understand where content is located and how it is organized.

Correct all heading accessibility violations and you will significantly improve SEO as well as navigation and orientation for all visitors. Here’s how to organize your heading structure.

How To Organize Your Heading Structure

Every page on your website should have a single H1 heading. This is the main title of the page, similar to the title of a book or chapter. It tells users what the page is about. Usually your page’s title will match the page’s H1 heading.

For example: <h1>Main Title</h1> or <h1>Healthy Eating</h1>

Use H2 for major sections across each page. For example, if your page’s title H1 heading is “Healthy Eating,” an example list of H2 headings might be “Benefits of Healthy Eating,” “Healthy At-Home Recipes,” and “Eating & Traveling Healthier.”

For example: <h2>Major Section3</h2> or <h2>Eating & Traveling Healthier</h2>

Use H3 for subsections within an H2 section. If you have a H2 titled “Benefits of Healthy Eating,” an appropriate list of H3 heading sections might be “Physical Benefits of Healthy Eating,” “Mental Benefits of Healthy Eating,” “Financial & Family Benefits of Healthy Eating.”

For example: <h3>subheading2</h3> or <h3>Mental Benefits of Healthy Eating</h3>

If you are compelled to break down your content further, use H4, H5, and H6 headings. However, the need is rare to go beyond H3 on most websites. However deep your heading structure is, the important thing is to maintain logical order.

No skipsies! Following a logical heading order means do not jump from using an H2 heading down to an H4 heading without having an H3 heading in between. Note the example above. Your headings should flow down each page naturally, as if following the table of contents.

How To Perform Digital Accessibility Testing On Nested Heading Structures

Tools like Digital Accessibility Report & Test Suite (DARTS), WAVE Evaluation Tool, and Accessibility Insights are effective at evaluating the structure and accessibility of headings in a webpage, but automated accessibility tools have limitations of identifying visual headings that are styled using CSS.

CSS visual styling doesn't provide the semantic HTML tags these tools check for in the code, so automated accessibility tools cannot detect these visual headings. Even though your website looks stunning, we need to perform both automated and manual testing.

First, run an automated accessibility test, locate your website’s heading level and role accessibility violations, and then fix them.

Next up is manual testing of your headings. Here’s what you need to do:

1. Inspect the page's HTML code to determine if the heading is correctly tagged

Right-click on the text that looks like a heading and select "Inspect" or "Inspect Element" from the context menu. This will open the browser's developer tools and highlight the HTML element associated with the text.

If the text is visually styled like a heading but is not within a proper heading tag – (For example <h1>Title Heading Text Here</h1> or <h2>Major Section Heading Text Here</h2>, etc.) it's a strong indication that CSS is being used to create a visual heading – For example, if the text is inside a <div>, <span>, <p>, or any other non-heading element.

2. Test if NVDA reads the heading’s programmatic level.

Click your mouse near the heading to bring NVDA’s focus there, and then use up and or down arrows to determine the headings level and content. If a screen reader doesn’t recognize the text as a heading, it’s likely that CSS is being used to style it rather than proper heading tags.

3. Adequate Color Contrast 

Appropriate color contrast is required to achieve digital accessibility compliance as poor color contrast makes text difficult to distinguish from the background, leading to eyestrain, fatigue, and decreased readability. 

Want the Entire DIY Digital Accessibility Compliance Guide?

There’s 16 areas businesses must get right in order to protect themselves from drive-by digital accessibility lawsuits.