Your website's framework may not be ADA-compliant!
These days a lot of our clients are using robust website frameworks and/or CMS platforms for their websites, and these platforms sometimes have some built-in (or turned on by default) features that prevent the website from being ADA-compliant. You can easily do some tests to see if this is the case!
I'm mainly talking about two important functionalities that we need to make sure are available to users:
1. Navigating with the keyboard
When viewing any webpage, the user should be able to navigate with the tab key. This is an ADA requirement for people who cannot use a mouse. As you press tab repeatedly, all the links throughout the page should become highlighted, in order, with a visible focus, and then you can press enter to activate the link and go to the destination page.
Some frameworks are set up to hide the visible focus. It's there, but invisible; in theory you can navigate with the tab ket, but you can't see what link is currently in focus; not good! This can often be corrected with some simple tweaks to the css file — i.e. giving some visual style to a:focus for all links.
You may find that, even with visible focus working correctly, certain elements cannot be reached with the tab key at all — i.e. you can tab through the links and see them get highlighted one by one, but at some point, one or more links are skipped entirely. This may be a larger problem and might require some more significant coding to remediate. It's definitely something to discuss with dev and the rest of the team and make sure we're addressing.
Another thing to watch out for is tabbing in popups. The correct funtionality is that, when you tab to a link that opens a popup, and you press enter to open it, the next tab should begin highlighting the links that are in the popup. You can tab through them, and tab to the close button, and close the popup. However, a lot of sites have this set up wrong, where you tab to the link that opens the popup, press enter, the popup opens, and then your next tab highlights a link in the background! Like, you can see the page in the background start to scroll behind the popup as you tab through all the links on the page. This is definitely an issue that dev needs to address.
Okay, that's it for tabbing issues; next up...
2. Browser zoom
When viewing any webpage, a user should be able to manually increase the size of all content, up to 200%, with no visible errors on the page. This is an ADA requirement. By default, web browsers facilitate this with Control-plus (for Windows) or Command-plus (for Mac). However, some website frameworks, templates, and CMS platforms disable this functionality.
If you have a website, go to it right now and try to increase the text size: click somewhere in the blank space of the website (to make sure that area is in focus, rather than the browser interface, or another app that's open) and then press Control-plus (Windows) or Command-plus (Mac).
Did it work? Text got bigger? Great! Try going all the way up to 200% and confirm that nothing looks broken, no elements are crashing or flowing off-screen, etc. If the zoom worked, but some things are amiss, then you've got to talk to the team about fixing those individual issues in dev.Did it not work at all? Then your website's code is actively preventing this required functionality, and your site is not ADA-compliant.
How can one correct this?
If you're lucky, it may be a setting in your website's admin area (aka dashboard) that can simply be turned on or off; this would be unusual, but it's a possibility. Or, a web developer may be able to manually edit the code of your framework, template, or CMS platform to unblock this functionality. This might entail an easy edit of a few lines of code, or it could turn out to be a real nightmare and require a partial or complete overhaul of your site. There's no way to know until the dev can get in there and do some digging, to determine what exactly is preventing the zoom from working.
Another option, of course, is to switch your site over to a different framework, template, or CMS platform that does allow this functionality. It's possible to search specifically for a platform that's advertised as ADA-compliant, and that should cover this.
These options may ultimately be expensive, but ask yourself: is it better to spend the money to address this problem asap, or risk an ADA lawsuit down the line? And keep in mind, an ADA lawsuit may come with the added baggage of some very bad PR for your company or brand.
Why on earth would some website platforms block this content-zooming functionality? It's honestly hard to justify. It may be that the developer wanted to retain complete control over how content is viewed. It might even be a simple mistake or oversight; some left-over and ignored code that got picked up from something else. I really can't think of a concrete reason why a website owner should want to block this built-in browser functionality when it exists specifically to help people consume your content more easily. But we see it all the time.
If you didn't know, now you know!
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.