ADA Compliance in Website Design

I’ll get this out of the way from the start–one thing ADA Compliance is NOT is simply adding a widget to your website that adds “controls” meant to be used by those with disabilities to get around your website. While I think these services have improved over the years and there still may be a place for them, when I learned that many disabled persons already have software on their computers that offer the same things, I knew I wanted to dig further into how JVM could provide a better web experience to ALL viewers with every site we design and program.

For designers, it’s a real balancing act to take this criteria and make it work with say, a company’s specific brand colors. If we didn’t create that company’s logo and branding to begin with, the previous designer might not have taken things like proper color contrast into consideration. I still see a lot of white text on light colored backgrounds, for example, which is a nightmare for certain visual impairments. Light colored text on light colored backgrounds can even be problematic for site visitors who simply don’t have 20/20 vision. So our attention to creating more usable websites starts well before we do any programming.

When actually programming a website with a system like WordPress, it’s not as if WordPress itself is a compliance disaster, but many themes out there can be. There is a lot of JavaScript running in the background for specific site functionality. JavaScript can absolutely enhance user experience, but it can really get in the way if it’s used at all for essential content or functionality. Also, the more plugins that are added for specific functionality, the more complicated the programming gets, the more the chances of programming conflicts rise and consequently, the more chances to trash your compliance increase. As a general rule, we try to go with the “less is more” approach when it comes to plugins. Sometimes, it’s unavoidable, so again, we’re performing a balancing act between client needs/requests, functionality, and mindfulness to ADA and overall site functioning.

Here’s a short list of the basic criteria that we strive for when building out our WordPress sites:

• Sufficient visual contrast (we’ll often use an online contrast checker, such as contrastchecker.com, to test colors before beginning design
• Avoid relying purely on visual cues in the design
• Proper html structure
• Proper ALT (alternative) text on images and icons. We also encourage clients who utilize video as part of their content to offer Closed Captioning and transcriptions.
• Proper formatting for headlines
• Utilizing a menu option that includes proper keyboard accessibility and Aria labels (and the developer of the menu system does make every attempt to strive for accessibility in the programming)

What about FULL compliance?

FULL compliance is a very time consuming (read: costly) operation which requires expertise and constant reevaluation that all standards are being met. It simply can not be achieved by installing a single plugin. Below is “Level A” and “Level AA”. We try our best to adhere to at least Level A when designing and building a site. My caveat is that we don’t profess to be experts in WCAG. Whena client absolutely has to have 100% compliance, we will pull in a company who has that expertise to achieve full compliance without the use of any kind of “overlay” (accessibe, UserWay, etc.) services.

To achieve Level A conformance (basically, the bare minimum) under WCAG 2.1, a website must meet all of the following success criteria:

Perceivable

• Non-text Content: All non-text content must have a text equivalent that conveys the same information.
• Text Alternatives: Text alternatives must be provided for any non-text content that conveys important information.
• Audio-only and Video-only (Prerecorded): Audio-only and video-only content must have transcripts or captions.
• Captions (Prerecorded): Prerecorded audio content must have captions.
• Audio Description (Prerecorded): For media that presents visual information essential to understanding the content, audio descriptions must be provided.
• Captions (Live): Live audio content must have real-time captions.
• Audio Description (Live): Live video content must have audio description.
• Info and Relationships: Information, structure, and relationships of a webpage must be programmatically determinable.
• Meaningful Sequence: Content must be presented in a logical sequence.
• Adaptable: Content must be adaptable to different presentation needs, such as screen readers.
• Use of Color: Color alone must not be used to convey important information.
• Contrast (Minimum): Visual content must have sufficient contrast between foreground and background colors.
• Resize Text: Text must be resizable without assistive technology.
• Images of Text: Text presented visually must also be available in a textual format.
• Contrast (Enhanced): Visual content must have sufficient contrast between foreground and background colors, especially for low-vision users.

Operable

• Keyboard: All interactive elements must be operable using a keyboard.
• No Keyboard Trap: Users must be able to navigate away from any focus trap.
• Keyboard Shortcuts: Keyboard shortcuts must not be ambiguous.
• Focus Visible: Keyboard focus must be visible.
• Timing Adjustable: Timing mechanisms for timed responses, automatic submissions, and user-initiated actions must be adjustable or stoppable.
• Pause, Stop, Hide: Time-sensitive content must allow users to pause, stop, or hide the content.
• Pause, Stop, Hide (Audio): Audio content must allow users to pause, stop, or hide the content.
• Keyboard Trap: Web content must not trap focus.
• Three Flashes or Below Threshold: Flashing content must not exceed three flashes in any one second.
• Three Flashes or Below Threshold ( Seizures): Flashing content must not exceed three flashes in any one second, and the flashes must not be larger than 0.5 degrees of visual angle.
• Bypass Blocks: Users must be able to bypass blocks of repetitive content.
• Page Titles: Web pages must have titles that are informative and unique.
• Focus Order: Focus order must be logical and predictable.
• Focus Visible: Focus must be visible when navigating via keyboard.
• Multiple Ways to Interact: Web content must be operable through various input modalities, including keyboard and touch.
• Headings and Labels: Headings and labels must be used appropriately to help users navigate and understand the content.
• Focus Order: Focus order must be logical and predictable.

Understandable

• Reading Level: Content must be written at a level appropriate for the target audience.
• Language of Page: The language of the page must be declared.
• Readable Content: Content must be readable and understandable.
• Meaningful Sequence: Content must be presented in a logical sequence.
• On Focus: When a component receives focus, it must be identifiable.
• Labels or Instructions: Labels or instructions must be provided for form controls.
• Consistent Navigation: Navigation mechanisms must be consistent throughout the website.
• Consistent Identification: Components with similar functionality must be consistently identified.
• Error Identification: Errors must be identified and described to the user.
• Error Suggestion: Suggestions for correction must be provided for errors.
• Error Prevention (Legal, Financial, Data): Mechanisms must be in place to prevent errors that could have serious financial or legal consequences.
• Error Prevention (All): Mechanisms must be in place to prevent errors that could lead to loss of data or tasks.

Robust

• Parsing: Web pages must be parsable.
• Name, Role, Value: Name, role, and value must be programmatically determinable.

To achieve Level AA conformance under WCAG 2.1, your website must meet all of the following success criteria, in addition to all Level A criteria:

Perceivable

• Contrast (Minimum): Visual content must have sufficient contrast between foreground and background colors.
• Resize Text: Text must be resizable without assistive technology.
• Images of Text: Text presented visually must also be available in a textual format.
• Contrast (Enhanced): Visual content must have sufficient contrast between foreground and background colors, especially for low-vision users.

Operable

• Timing Adjustable: Timing mechanisms for timed responses, automatic submissions, and user-initiated actions must be adjustable or stoppable.
• Pause, Stop, Hide: Time-sensitive content must allow users to pause, stop, or hide the content.
• Pause, Stop, Hide (Audio): Audio content must allow users to pause, stop, or hide the content.
• Page Titles: Web pages must have titles that are informative and unique.
• Focus Order: Focus order must be logical and predictable.
• Focus Visible: Focus must be visible when navigating via keyboard.
• Multiple Ways to Interact: Web content must be operable through various input modalities, including keyboard and touch.
• Headings and Labels: Headings and labels must be used appropriately to help users navigate and understand the content.
• Focus Order: Focus order must be logical and predictable.

Understandable

• Reading Level: Content must be written at a level appropriate for the target audience.
• Language of Page: The language of the page must be declared.
• Readable Content: Content must be readable and understandable.
• Meaningful Sequence: Content must be presented in a logical sequence.
• On Focus: When a component receives focus, it must be identifiable.
• Labels or Instructions: Labels or instructions must be provided for form controls.
• Consistent Navigation: Navigation mechanisms must be consistent throughout the website.
• Consistent Identification: Components with similar functionality must be consistently identified.
• Error Identification: Errors must be identified and described to the user.
• Error Suggestion: Suggestions for correction must be provided for errors.
• Error Prevention (Legal, Financial, Data): Mechanisms must be in place to prevent errors that could have serious financial or legal consequences.
• Error Prevention (All): Mechanisms must be in place to prevent errors that could lead to loss of data or tasks.

To learn more about AAA compliances, you can research that in the WCAG 2.1 Understanding docs here.

There’s also a great checklist over at A11y Project here.

If you’ve got a WordPress site and would like to individually check pages and posts for accessibility, you can try the Accessibility Checker plugin from Equalize Digital.