Overlays Underwhelm

Hi there.

The title of this talk is "overlays underwhelm".

I had the title before I had the content.

You will see me try to shoehorn this over/under theme into the talk throughout.

And I'm protected from hearing your groans, thanks to the magic of one way audio.

Now we should consider what gaps accessibility overlays are filling.

The web has lots of accessibility bits built in.

There are more tools and features available to developers and end users than ever before.

After all, as Tim Berners Lee said, quote, the B4520 gets you there faster and bypasses that nasty roundabout outside Swindon.

End quote.

Let's first ask what is an overlay?

An overlay is a tool that provides some sort of accessibility or usability feature that may or may not be built into the underlying site.

Sometimes it replicates native features and sometimes it offers some other affordance.

They can also be referred to as widgets, toolbars, or add ons.

There were many tools that predated native features.

Or that we're created to fill gaps in technology, including assistive technology.

Some techniques and standards may not have been defined or even well-supported when these tools were created.

The risk is that these tools required users to learn them anew for every site with features that would not carry across sites.

Browsealoud is an early example.

It converts the text on a page to speech.

[Browseraloud speaks]GB flag.

Change region.

Products.

For education, read and write equatio, speech stream.

WriQ.

Fluency tutor, OrbitNote.

For Work.

Read and write.

[Adrian] As you can see it offers no context for what is being read visible or not.

It was never meant to replicate or replace screen readers.

Instead it is akin to a feature you can find built into browsers today, such as Edge's immersive reader.

Browsealoud requires a third party embedded script.

And back in 2018 was briefly hacked to mine cryptocurrencies.

Some widgets made an effort to replicate features already in browsers and operating systems.

These range from text sizing to contrast and lightness, to motion control and even zooming and magnification.

The, this text sizing widget shows how they can go wrong.

It's longer available on the site.

Assuming you could find it behind a gear icon.

The control only appeared when you were at the top of the page, the widget only resized article content, not headlines, not navigation, nothing else.

Since that article content was outside the viewport, it also made it near impossible to compare sizing options.

It does not retain the size as you navigate the site.

When you return to the site or even for the printer styles.

Better implementations have shown users how to change their browser or operating system settings instead.

However, this could be a useful, a useful stopgap feature to gauge if users regularly scale text, and then adjust those defaults as a result.

Some widgets exist because there is no native equivalent or the needs are not well-represented in what exists.

Success of those widgets comes down to how well they perform.

Hand talk is another add on.

It will load an animated avatar to sign the content of a page.

Like the text to speech example earlier, it presents the content of the page in sign language.

It still cannot offer the same context for what content is associated with what other content?

So the user may need to also read along.

I did not explore how many sign languages it supports.

To its credit it is not finger spelling everything that encounters, but I leave it to the audience to judge its value.

The current list of overlay vendors is not necessarily filling these gaps however.

They are capitalizing on a general lack of understanding of people and needs.

Focusing on selling quick fixes to businesses instead.

These companies include accessibe, Accessiway, Adally.

AudioEye, EqualWeb, FACIL'iti, MaxAccess, Purple Lens, User1st and UserWay.

There are also vendors that white label some of these products.

Overlays tend to overstate their abilities in technical reviews, they consistently underperform.

Automated accessibility testing tools are not perfect, but we can use them to get a sense of whether or not an overlay has improved WCAG compliance of a page.

I used an automated checker to compare the number of errors before and after an overlay was activated.

The pages had more detectable WCAG errors after the overload was activated.

The examples that follow are about a year old.

I opted not to retest because I have no interest in providing free testing.

Besides these vendors were claiming WCAG compliance when I tested.

So if they were lying, then there's no reason to assume they would stop now.

Deque's axe-browser plugin prides itself on no false positives.

As a result, it may be more lenient than a human tester would be.

After running an overlay on the vendor's own page, the number of detectable errors identified by axe tripled from four to 12.

TPGI's ARC toolkit plugin is less likely to be lenient.

When testing the same page the number of detectable errors doubled jumping from 19 to 38 when the overlay was activated.

ARC also jumped from 164 warnings to 193.

These do not represent clear WCAG violations, but instead do warrant manual testing.

WebAIM's WAVEchecker browser plugin returns no violations without the overlay active.

After the overlay was activated, a single contrast violation appeared.

I've written about my concern that accessiBe was spoofing WAVE, though I can not wade into the code to confirm this.

WAVE used to display the following message.

Quote, the third party accessibly integration on this page may temporarily modify content when WAVE is activated, resulting in interference with WAVE's detection of, and accuracy, identifying accessibility and compliance issues.

End quote.

We know that automated accessibility testing tools only identify about 30% of issues.

The number shifts based on complexity and other factors.

That 30% number acknowledges that much of WCAG requires human judgment based on context.

Overlay vendors claim they can address the other 70%.

That is a bold claim and it is easy to disprove.

The stop animations button on this overlay fails to stop the auto-playing background video.

To compound the confusion the button changes only its accessible name when pressed, does not use aria-pressed to indicate that it has been activated.

I tried the keyboard navigation feature of one vendor.

Since it's unaddressed navigation violates one dot four dot 13 "content on hover" and two dot four dot seven "focus visible", even after I activate the feature focus styles are still missing.

Eventually a new box appears with different links.

I was tabbing so much already.

I tabbed past the item that displayed the instructions.

To drive home the point it drops me into a defecto keyboard trap in its cookie pop up.

It's not just the claimed fixes that don't work.

The tools themselves present barriers.

The button in the background video that I showed is one example.

In other cases, screenreader users have noted they hear sounds from the overlay with no explanation what they mean.

The tools don't even prevent their own customers from making new WCAG violations.

Here the overlay's very tall, so the image captures four screen fulls.

It shows how the contrast of the controls is so light it is hard to determine if one is active or at what degree it is active.

Some of the text and icons are illegible.

The language selector, which commits the internationalization sin of using flags to choose a language provides no alt attributes for those flags.

The overlay violates at least three WCAG success criteria from a few seconds of examination.

Part of this is because the configuration options for the overlay customer do not prevent them from choosing colors that clearly fail contrast checks.

Here are the white text on the pink background as a contrast ratio of 1.2 to 1.

The overlay vendor allowed its customer to do this.

Here we can see that the browser's default focus ring is active, but then the browser alert, prompting the user to activate the overlay appears.

If the user declines, that focus ring is somehow removed.

The only clue that focus is changing is in the browser status bar or when the page jumps in order to scroll down [chime sounds].

Here I navigate an overlay vendor's site.

And as the new page is loading it greys itself as if a modal will appear and then some hidden audio starts playing.

[Computer audio] Hi, I'm Ronnie from accessiBe, the number one fully automated ADA and WCAG compliance solution.

In this video, you will learn how accessiBe's AI powered technology makes any website accessible and compliant with the WCAG 2.1, the ADA [...]. You could see that I clicked on the gray area in the hopes maybe a hidden video modal would disappear.

I scrolled around looking for player controls.

I also hit the escape key with no luck.

The page itself is a good example of a 1.4.2 audio control violation.

And 1.2.1 audio only and video only prerecorded violation.

The following examples are from accessiBe.

The reason accessiBe is more prominent in my tweets and posts is because it seems to be the loudest at using its venture funding to promote its product.

It took a year for accessiBe to update the terms on its site after I flagged these.

I have no idea what terms are written into the contract however.

And those contracts may retain this language.

Other vendors have made similar compliance promises and may have similarly mooted those promises in their terms.

From the accessiBe homepage, question "does accessiBe protect me from lawsuits?" The response.

"Absolutely.

accessiBe turns inaccessible websites into WCAG and ADA compliant websites".

But not only that, accessiBe provides you with a litigation support package in case you need to prove your ADA website compliance and guides you through the process.

And another from the homepage, "does accessiBe cover all accessibility requirements?

Yes.

accessiBe covers the WCAG web content accessibility guidelines.

version 2.1 at the AA level success criteria and in certain areas, even level AAA.

This is a step beyond what legislation requires." But that differed from the accessiBe terms and conditions page here captured from December, 2020.

In this section, accessiBe is defining the word "standard" to mean specifically, quote "WCAG 2.1 level AA success criteria", end quote.

But from the accessiBe terms, quote, "the functionality of the accessiBe systems requires that the licensee website in which they are embedded, be websites based solely on HTML files and tags, and that the source code be written according to the standard of the worldwide web consortium, W3C, without any errors or validation warning in W3C's troubleshooting inspections".

"Please note that licensee changes to such website may impact the functionality of the service by way of example, accessiBe systems do not support other components, such as canvas, flash and or SVG." Essentially your site must be WCAG compliant to conform to accessiBe's terms.

For a product guaranteeing to make your site WCAG compliant.

accessiBe then goes on to exempt PDFs, flash, SVG files, and even any mobile devices not running Android eight or iOS 10.

To remind you that accessiBe is not the only one making these claims.

Here's something from UserWay's site.

It says it will make your site ADA compliant, which is not a thing.

It brags about the lack of lawsuits mentioning it.

It claims to have a strong reputation in the disability community.

It asserts its privacy chops and it claims it is secure by not tracking people with disabilities.

UseWay may be right about lawsuits not mentioning its products.

I could not find any, but I do not have a Lexus/Nexus subscription.

However, I can say that many lawsuits do not name the overlay vendor.

Many of these vendors claim they can protect their customers from lawsuits.

accessiBe's CEO has even written quote, "never not once had encountered a company that got sued because of accessiBe" end quote.

Yet in 2020, over 250 companies were sued after investing in overlays.

The lawsuit pace picked up to almost one per day by the end of the year.

Here are just five examples, at least one of which mentions the vendor by name.

Four of them mentioned accessiBe, despite its CEO's claims.

Cosar versus Buyit LLC.

Thomas Klaus and Robert Shahada versus Upright Technologies.

Blair Douglas vs.

Masterbuilt manufacturing LLC.

Murphy versus Eyebobs LLC and Fisher et al versus Dora homes.

Sometimes a company relies on the overlay as its only way to become accessible to its customers.

But what happens when the script will not load?

Malwarebytes jave block them.

Ad blockers have blocked them.

Firefox enhanced privacy protection blocks them.

What if the script has an error?

Or the network chunks?

Is your site quote, protected end quote, are the users helped?

This screenshot of browser dev tools shows that the overlay script has not loaded.

Worse the accessibility link in the footer is just a div with a tab index and a button role.

It does nothing else when clicked because the overlay script is supposed to replace it with a real control.

On the Malwarebytes forum, a user wanted to know if the script from an overlay vendor was a tracker or now.

The Malwarebytes staff acknowledged it had been blocked.

Until the user asked the question Malwarebytes had blocked the overlay for all its customers for potentially years.

The claims of no privacy risk are spurious at best.

A data protection impact assessment, DPIA, is a process to help you identify and minimize the data protection risks of a project.

You must do a DPIA for processing information that is likely to result in a high risk to individuals.

The vendors do not provide one.

As a result, any claimed GDPR compliance is in question.

Remember that these overlay scripts, must parse all the content on the page, essentially reading what you were surfing.

Some of them keep your settings from site to site by setting tracking cookies.

Here in a tweet, Léoni Watson demonstrates how cavalierly overlay vendors treat this compliance.

Quote hello, accessiBe.

I've asked you by DM and by phone for a copy of your data protection impact assessment, DPIA, and you have not responded.

Since asking discretely has not worked, I am now asking openly for you to share your DPIA since you claim GDPR conformance.

Thank you.

End quote.

She asked on April 1st, 2021 and has still not heard back half a year later.

Overlay vendors will over promise in their marketing, making claims about the utility and popularity while under delivering on them.

These vendors rely on a combination of fear, uncertainty and doubt.

They know many website owners do not understand accessibility laws, even as users complain about the problems with these products, the vendors use astroturfing techniques to drown it out.

This is an advertisement from one of the overlay vendors.

It is a cartoon of a man at a computer, happily exclaiming "finally, my website is up".

Two men in suits suddenly appear next to him, holding legal papers and say "not so fast".

"Nice website, but it's not accessible.

You've been served." The website owner now crying hands up in the air, says "I'm broke now why bother?" And the background, the two men can be seen walking away, carrying bags of money.

Overlay vendors use fear of lawsuits to sell their product, not a desire to help users.

The cartoon is careful to not show disabled people as the villains, but the implication is clear.

The laws that protect disabled people will cost you money,unless you pay for the vendor's help.

One vendor cited that a quote, silent majority end quote of users like the overlay product and that a result, the complaints that appear online are only exceptions.

Here, Chancey Fleet tweets, "the founders of accessiBe are interpreting the complacency of non-disabled customers and the bone deep fatigue of disabled users to mean that a 'silent majority', their actual words is grateful for and enjoys accessiBe.

Let's not be silent then." It was in reply to a tweet from Marco Salsiccia, who says "pretty much as well as citing their silent majority of blind users who approve and quote 'test their product'.

I ran into so many issues just going through their example sites alone, I didn't want to give them a fully free audit of how much they were doing wrong." In addition, these vendors have a history of astroturfing review sites, social media, and the Web in general.

The effort is to ensure only their message appears.

And they have the money, SEO chops, and lack of integrity to do it.

I have links to Twitter spam, Medium articles, paid promotion pieces at industry sites, questionable reviews on other platforms, even Wikipedia entries that were flagged by the moderators as spam.

The image here shows a headline from WP Tavern.

When one vendor had all the fake reviews for its plugin removed.

In addition to individual complaints, there has been press coverage of these companies.

Users with some standing in the disability community have spoken about overlay failures in general.

Some users are so frustrated they share tips and tools to block overlays.

One vendor has even threatened users with lawsuits.

NBC news ran a story with a headline "blind people, advocates slam company, claiming to make websites ADA compliant".

Vice also ran an article, headlined "people with disabilities say this AI tool is making the web worse for them.

The Mosen at large podcast devoted an entire episode to the question of the value of overlays.

Episode 105 asked "can AI make the web fully accessible in a few short years, or might it make matters worse?" A chunk of a followup episode was devoted to more frustrations from users.

Other community podcasts have discussed these tools as well.

Usually in a negative light.

Some users are so frustrated that they have written tools to block overlays.

accessibegone gives instructions for how to block overlays using ad blockers or by editing your hosts file.

AccessiByeBye is a browser extension to disable overlays in the browser.

One overlay has opted to fight back.

In April FACIL'iti's attorneys started sending letters demanding removal of any criticism.

This letter to Koena shows two tweets about FACIL'iti.

Koena declined to comply with their request and wrote about why.

Another disabled user, who I am not naming here, but I have shared their plight on Twitter, was subpoenaed to appear in court.

FACIL'iti has asked for 5,000 euros in damages, 5,500 euros in fines, and an order to cease comments that may quote discredit the FACIL'iti solution end quote.

I cannot think of a better way to prove your product helps disabled users than by suing disabled people who say it does not.

Overlay vendors also claim that organizations love them.

But community and industry organizations have been clear that they do not.

National Federation of the Blind after accepting one as a sponsor for its annual event went so far as to not only drop the sponsor, but then issue a statement rebuking its very existence.

This part of the statement stood out to me.

Quote in particular is the opinion of the board that accessiBe peremptorally and scornfully dismisses the concerns blind people have about its products and its approach to accessibility.

Donations blind will not be placated, bullied, or bought off.

Therefore, the board revoked accessiBe's sponsorship of the convention on June 22nd, 2021.

The CSUN assistive technology conference briefly had an overlay on its site and it was met with rapid and vocal anger, and it was dropped immediately.

It may very well have been implemented without anybody's knowledge, based on this tweet, which reads quote, "the accessibility overlay has been removed.

It was implemented without our approval.

The conference does not endorse this product.

And we apologize for the situation which has now been corrected." The Olympic committee created the We The 15 site in an effort to promote the Paralympics, but in doing so used an overlay.

After responses from users in the disability community, the overlay was removed within a couple days.

That same overlay is still on the main Olympics website, which may be a function of the vendor promoting it so heavily in its marketing materials.

One of the We the 15 tweets in response: thank you for alerting us about these issues.

We're disappointed too, that we've fallen short in this area.

We've gathered together some new experts who are helping us to fix this.

It would be great to have your support going forward to make the next iteration a complete success".

Many overlay vendors claim that detractors are really frustrated competitors.

The overlay fact sheet disproves that.

Over 600 people have signed it.

They represent web specification contributors, internal accessibility experts from companies and higher education, lawyers for the disabled, contributors to assistive technology and end users with disabilities.

I encourage you to visit the site at overlayfactsheet.com and read through the information and links.

It identifies strengths and weaknesses of overlay widgets, and automated repair.

It also touches on technical and privacy concerns.

In addition to the signatures, there are statements from users.

As we have seen overlays cannot make your site or your brand better overnight.

To wrap this talk, I want to cover some steps you can undertake without overlays.

Plan ahead, hire a consultant who has some experience in this space.

They can help you choose a vendor who prioritizes accessibility and write this into your contracts.

They can also direct you to technologies that have been vetted.

Some platforms have accessible featuresa already.

For example, WordPress offers 114 free accessibility ready themes built with a baseline of compliance already in place.

Add some free online resources.

When you create your content, you have all you need to get going.

There's even a free tool to generate an accessibility statement for your site provided by the very organization that sets accessibility standards.

What if you already have a site?

You can use one of the many free, automated accessibility checkers on the market.

Assuming you aren't interested in getting into the browser's own tools.

There is ARC, Axe, Lighthouse, WAVE and WebHint among others.

While they will not catch all the issues, only about 30%, they will at least give you a sense where you stand.

Where you have gaps, document them, identify what is wrong, and put together a plan and timeline to address them.

Publish it on your site when you generate an accessibility statement.

And as long as you honor the timelines you provide, you can choose what your ongoing budget will be to address them, even if it's only a thousand dollars per year.

To wrap up the session, I have posted links to some of the material I referenced through out.

You can get to it by scanning the QR code on your screen, or by going to this URL, R O S E L dot L I slash web dash Directions again, that's R O S E L dot L I slash WebDirections [rosel.li/web-directions].

Thank you.

And feel free to ask me questions.