Related Resource: Website Redesign
Website ADA compliance is an often-overlooked but increasingly important aspect of web design and development. An ADA-compliant website focuses on ensuring content and markup are accessible for users with disabilities. Users with disabilities use screen readers and other assistive technologies to navigate a website.
Recently, it has become more common for websites to become the targets of lawsuits in which plaintiffs attempt to force the business to adhere to ADA compliance guidelines or risk fines or expensive litigation. It can be frustrating trying to understand what needs to be fixed if your site has accessibility issues. Even worse — the guidelines themselves can be somewhat vague and difficult to understand.
What does it mean for our website to be ADA compliant?
An ADA compliant website has content and markup specifically designed not only to show the website normally for a typical user, but to also accommodate for ease of use with assistive technologies such as screen readers. Further, an ADA-compliant website uses styles and branding that are carefully tuned to be readable on any device.
Is website ADA compliance difficult to achieve ?
Auditing the ADA compliance of a given site requires understanding how a particular content area or user interface element is used by each assistive technology. This understanding is not immediately available just by inspecting the website visually. Fortunately, tools like the WAVE compliance testing tool are available to dive deep into a site’s structure and content to identify problems.
Some examples of ADA website compliance problems:
- Navigation: Sites should be easily navigated via keyboard only (tab navigation).
- Navigation landmarks: Navigation menus should include proper markup to help users quickly navigate to sections of the website that they wish to visit.
- Semantic markup: Sites should use proper semantic html elements wherever possible (section, aside, ul/ol lists, etc.) and elements should be formatted properly (for example, anchor tags/buttons should not be empty, forms should have clear labels).
- Headings: Headings should progress logically from H1, H2, etc. These elements help give the document better layout structure and are useful for screen reader software.
- Text: Text should be clearly readable, have proper contrast to avoid problems with color blindness and other vision impairments, and if color is used to convey meaning, there should be fallback markup to convey meaning as well.
- Images: Images should not be used for text content and should have descriptive and concise alt text so that vision-impaired users will understand what is being displayed.
Screen readers and ARIA
Semantic HTML usage goes a long way to properly infer what elements are being used for navigation, content, and more, but they don’t always provide the level of information we would like for users. A standard called Web Accessibility Initiative’s Accessible Rich Internet Applications specification (WAI-ARIA, or ARIA) was developed for the purpose of better accessibility.
ARIA markup can help explain further the purpose or intent of a particular element on a page.
Some examples of ARIA markup:
- Checkboxes (aria-checked=”true”)
- Labeling (aria-label=”screen readers can see this label”)
- Semantics (role=”scrollbar” aria-controls=”main_content”)
- Live updates (aria-live=”true”)
Accessible color contrast
Text readability is important for human eyeballs as well as assistive technologies. There do exist ADA guidelines for contrast colors. There are specific contrast ratios for different text sizes that will help with readability. There are a many contrast testing tools available that can help you fine tune your branding colors to be as readable as possible.
Accessible content
Content should be accessible such that screen readers and assistive technologies can properly navigate the page. This includes using <h1> – <h6> in the correct hierarchy and for properly dividing your content into readable chunks. Avoid all caps and acronyms, and limit usage of italics whenever possible. For links, try not to use vague terms like “click here” or “read more” as this text is too vague and may not convey properly where the link will direct the user.
For images, alt text is extremely important and often overlooked. Alt text should be concise and describe what the photo is presenting on the page. For decorative images, you can use an empty alt tag and role=”presentation” to help screen readers understand that it is descriptive and not informational. Provide captions where possible.
It can be tricky to find and diagnose the changes required to make your site into ADA compliance. Yet, as these types of issues become more common for potential legal trouble, it is worth your time to begin to check your site’s compliance issues and deploy fixes as soon as possible. The upside of this extra work will be that your site accessibility will improve greatly, bringing greater access to your entire site and more users who may not have been able to use your site before. This will benefit your lead conversions, improve SEO (search engines will love your markup improvements), and will help you avoid legal penalties.
Do y0u have questions about how to bring your Magento, WordPress or other website into compliance with ADA standards? Let’s have a chat!
