Screen reader users, let me share some work-arounds for this mess.
First, an apology for any users with disabilities. This page is purposely broken in ways that will frustrate you in weird and unpredictable ways. Here's why:
For years, I've been warning people not to get sucked into the unjustified promises of "overlay" products that claim to magically make your website accessible:
I'm not the only one with these criticisms. My feelings have been echoed by many others including Jim Thatcher - a legend in accessibility.
Unfortunately, well-meaning customers are still being duped by sales people claiming that their product "automatically transforms the website to meet 508 and WCAG 2.0 AA accessibility standards." These claims are false. I've developed this page to prove this point.
This page presents a large number of examples of inaccessible code that cannot be reliably fixed by an "overlay" product. Each of the examples is provided along with an explanation of why it is a problem and why an overlay cannot fix it.
Some overlay products need to be explicitly coded to the specific web site, which can make the overlay more effective, but also more brittle. Custom overlay solutions are quick to break when sites are changed during normal maintenance and modifications.
Although some of these examples might seem like weird edge-cases, they are not. Every one of the examples below are based on the most commonly logged issues across over 260 accessibility audits that included manual testing.
Happy hunting!
As I said in the explanation this page is horribly broken. I did this on purpose to prove a point. Please read the below carefully.
When you clicked the link to get to this information, we stopped and fixed the following:
That said, things are still going to be a little wacky. Here's how to understand the content. This page makes use of landmark roles. The examples are within the 'main' landmark. Each example starts with a heading-level-1 element. Below that is the example of an accessibility problem that overlays cannot fix. When you hear the word 'Explanation', what follows is the explanation of the example and why an overlay cannot fix it. The explanation will always have accessible markup within it so you can understand the problem.