Below are areas where I strive for accessibility compliance. Often there are exceptions that are not compliant though, that are signed off by the client. And, this list is by no means a complete list of requirements for WCAG compliance.
Appearance
- Text at least 14 px in size
- Minimum color contrast rules are followed
- States are not communicated just by color
Keyboard Access
- All links are keyboard-accessible
- All navigation (menus) are keyboard-accessible
- All dynamic elements (i.e., accordions, tabs, etc.) can be operated by keyboard
- Keyboard focus is visible
Links
- <a> tag is used for links
- Links in body are distinguished from surrounding text (usually by underlining)
- Link text is descriptive
Structure
- Only one h1 per page
- Headings should be in sequence
- Heading levels should not be skipped
Images
- Images have relevant alt text or captions unless purely cosmetic
- Images do not have title attributes
Videos
- Video does not auto-play
- Video can be paused
- Video has accurate transcript or captions (read how to edit YouTube captions)
Forms
- Fields have label tags
- Fields are keyboard-accessible
PDFs
- PDFs are accessible or have HTML equivalents. Note that making PDFs accessible is the responsibility of the client. Check out this guide on how to make PDFs accessible. Here are PDF techniques for WCAG 2.0 from W3C.
As I mentioned, this is not a comprehensive list, but rather some of the “biggies” that can have a really obvious effect on your site’s accessibility.
Resources
- This Medium article is a good overview of accessibility laws.
- The A11y Project has an excellent checklist for compliance.
- WebAIM’s accessibility checklist.
- Here’s an “easy checks” accessibility checklist from the W3C, and a more comprehensive accessibility checklist from W3C.
Tools
- TPG ARC is a great online testing tool and will generate reports of accessibility failures. It’s free but requires a credit card.
- On Divi sites, I use the Divi Accessibility plugin to help with compliance and identify violations.
- Need an accessibility statement? Here’s a tool from W3C that generates an accessibility statement based on your inputs!
Some Common Website Features that Are Not ADA Compliant
I don’t know of a third-party slider carousel that meets WCAG guidelines. The accessibility professionals who I’ve asked have told me not to use carousels on sites that need strict accessibility compliance.
Most social embeds and embedded ads are not accessible. Animation effects may not accessible, and auto-playing videos are not allowed.
Any linked PDFs need to be re-generated with accessibility in mind, and all embedded videos need captions or transcripts.
A Note About Overlays and Instant Compliance
You might have heard of services that claim to make your website “100% accessibility compliant” instantly by adding a button or “overlay”. The vast majority of accessibility experts see these services as snake oil which don’t work. Worse, they may make your site an even bigger target for accessibility litigation:
nearly all of the functionality provided by these tools has no impact on your level of WCAG conformance whatsoever. Furthermore, these overlays provide little or no additional legal protection for your website. In fact, in recent lawsuit filings, screenshots of these tools are being used to build the claim against websites that are not also seeking a holistic approach to ADA compliance. It is also a common belief that these tools may increase your risk with regards to security, and many company’s security policies prohibit the installation of widgets like these.
Michele Landis, Kelly Heikkila, Jason Webb, Accessible360
So obviously, I don’t advocate using services, whether free or paid, that promise instant accessibility simply by installing a plugin or code snippet. As the quote says, it takes a wholistic approach to many aspects of the website itself, as well as offline resources like videos, embeds, and PDFs.
Staying in Compliance
It is very easy for a website to drift out of compliance as people add content. New font colors are added that don’t meet the minimum contrast guidelines, for example. Or, someone adds new images without adding alt tags. Accessibility compliance is not a one-time deal; any updates to the site must be made with accessibility in mind if you want to stay compliant.
Conclusion
Although I do not guarantee 100% WCAG compliance for my websites (and as I explain below, such a thing doesn’t really exist), I do try to make them compliant in the ways that are most important for accessibility. The goal here is to make the site more accessible and less-attractive for accessibility litigation than the other guy’s site.
If you do require strict WCAG compliance, I have a third-party firm that specializes in accessibility that I can work with to get your site more compliant.
Note that there is actually no formal certification process you can go through to have your website definitively declared “100% compliant”. There are just a set of guidelines that are somewhat open to interpretation and a continuum of compliance levels.
Let me know if you have any questions or comments about this topic! – Brian
I am a freelance web developer and consultant based in Santa Monica, CA who uses WordPress, PHP, and JavaScript to create websites and web applications for businesses, nonprofits, and organizations.
0 Comments