CAPTCHA is a drag and should be dropped — WCAG 2.2 in the wild

Once you know what inaccessible is, you’ll encounter it everywhere.

Erin Beel
UX Collective

--

Today I learned (TIL)

Ever learnt something and then immediately start seeing it everywhere? Sometimes it’s the Baader-Meinhof phenomenon.

But when it’s the new Accessibility criteria (or tropes like the colour grading of Michael Bay movies) — it’s more like the… Badder Mine-EYES phenomenon.

demotivational poster meme featuring a picture of a wide-eyed cat and the phrase in caption — WHAT HAS BEEN SEEN Cannot be un-seen.
This also applies to that revoltingly awful play on words I just attempted

I learnt WCAG 2.2 and now cannot unsee

This lunchtime, I attended a lunch and learn about the new inclusions in the Web Content Accessibility Guidelines (WCAG 2.2).

3 hours later, I spotted my first 2.2 failure in the wild.

I got an email notification and tried to log into ProtonMail.

Blocking my path was a CAPTCHA — my nemesis.

…we meet again

Now, if you’ve followed me for a while, or had more than a passing conversation with me, you’d likely know I have a grudge against CAPTCHAs.

They are mostly inaccessible, a terrible user experience and really — just shouldn’t exist. I’ve written about this many times before. (1)

This grudge was formed over years. I encounter CAPTCHAs daily — likely because my web browsing style is similar to a bot. (2)

Because of these frequent encounters, I have developed a fascination with the bizarre phenomenon that is CAPTCHAs, and collect them in a folder ( Gotta CAPTCHA them all) which I call my CAPTCHA Zoo. I’m not weird at all.

ProtonMail and the CAPTCHA loop of infuriation

For reasons unknown, Proton have developed their own bespoke CAPTCHAs, despite there being multitudes of variations already in existence. Sometimes you just have to re-invent the wheel, and make it a slightly worse wheel, I guess?

I don’t often check this email account, so these CAPTCHAs are a new encounter for me and another specimen for my Zoo.

The first CAPTCHA I encountered is a puzzle where you must drag a puzzle piece across to a puzzle piece shaped hole. A very common CAPTCHA trope.

Drag and drop (as I learned this morning) is a new inclusion of success criterion in WCAG 2.2 AA, called 2.5.7: Dragging movements.

It reads:

“All functionality that uses a dragging movement for operation can be achieved by a single pointer without dragging…”

This Proton CAPTCHA (below) relies solely on dragging. Uh oh. We have encountered our first accessibility issue #1 (3)

Screen capture of a CAPTCHA. It reads: Human Verification — To fight spam and abuse, please verify you are human. Complete the puzzle by dragging the puzzle piece to the correct position. There is a puzzle piece and a puzzle piece shaped hole. The buttons below say “Next” and “Reset puzzle piece” (

I enabled the Accessibility function menu on my Android phone and tried various controls, which didn’t move the puzzle piece.

Annoying. Inaccessible.

Let’s try another one

I hit ‘Next’ as there was no other option listed for an alternative version beyond just giving up, trying again or ‘reporting a problem’. Issue #2 (4)

I ‘failed’ (see image below) and chose the “Try a different challenge” option.

UI that reads: Human Verification — To fight spam and abuse, please verify you are human. Sorry, you did not pass the challenge. There are two buttons “Retry” and “Try a different challenge”. Below is a link that says “Issue with ProtonCAPTCHA? Report it here.”

Next up, I was shown an options screen. Two CAPTCHA options were shown — the one I had just failed, and a new one called “Align Beams”.

UI that reads: Human Verification — To fight spam and abuse, please verify you are human. Please select a CAPTCHA challenge to solve: 1. “Align beams — Align two rectangles to pass the challenge.” and 2. “Complete a puzzle — Move a puzzle piece to the correct position.” There is one button “Next” and a text link that reads: “Visually impaired? Solve a different challenge.”

I chose the beams option.

This CAPTCHA involved another dragging interaction, but this one claimed to work with up and down keys — yay!

UI that reads: Human Verification — To fight spam and abuse, please verify you are human. Align the two rectangles by dragging the right rectangle up/down, or by using your up/down arrow keys. A dotted line is shown, and a line with up and down arrows below it There is one button “Next” below.

I turned to my Android’s Accessibility functionality and tried various inbuilt functions like the up and down soft key, keyboard and volume key functions. They didn’t work.

I ‘failed’, again. Issue #2, encounter #2. (4)

Starting to get pretty frustrated, I then chose the “Visually impaired? Solve a different challenge” link.

A link that, ironically, also failed AA minimum accessible colour contrast — which is a criterion literally designed to help people with visual impairments. SIGH. Issue #3 (5)

The “Visually impaired” link was broken, and redirected me to a 2-step verification instead.

I opened my authenticator, copied the code and pasted that in.

I was returned to the login screen, only to find out I had mis-typed my password and had to start the process all over again.

(╯°□°)╯︵ ┻━┻

Above — the ye olde table flip emoticon

Phone Reaction GIF by MOODMAN — A man angrily destroys his mobile phone with a hammer
I’LL SHOW YOU HUMAN!!!

CAPTCHAs damage accessibility

These two CAPTCHAS also fail the new WCAG criterion Accessible Authentication (Minimum) (Level AA) and Accessible Authentication (Enhanced) (Level AAA)

The CAPTCHA is a cognitive function test, and there is no alternative to using it and no (working) assistive mechanism to support users.

Issue #46 , and Issue #5 (7).

Now, AAA criteria are (sadly) not used by many as it’s seen as ‘too hard’ to comply with. Which is a partial truth. But, even if you’ve committed to level AA, that doesn’t mean just you can’t try to comply with some AAA.

Bart Simpson talking to Lisa Simpson: I can’t promise I’ll try, but I’ll try to try
Project Managers when you ask for some AAA compliance to be scoped in

Particularly if it’s things like CAPTCHAs, which really shouldn’t exist if you are designing a usable interface and value your users enough to not want to p*** them off.

My story ended here.

I did not get to log in and gave up. What a fabulous use of my time.

Undignified access

Now, just to remind you — I went through this whole process to simply CHECK MY EMAIL. A mundane and routine task should not make the user want to smash their mobile device in frustration.

This is a great example of undignified access in digital.

The Australian Network on Disability defines Dignified Access as:

Providing dignified access means designing your physical [or any] environment for people with disability, to make your workplace [or anywheere] a navigable and welcoming environment for everyone.

Un dignified access is simply the reverse:

Providing undignified access means not designing your physical [or any] environment for people with disability, to not make your workplace [or anywhere] a navigable and welcoming environment for everyone

For example — having a building’s wheelchair access via a dank service entrance versus the lovely foyer that all non-wheelchair users get.

Online, undignified access is making people with disability jump through hoops to access information that other people can access easily. For example, throwing a bunch of inaccessible captchas that infuriates them and means they have to contact support. To simply check their email.

The CAPTCHA Experience

To keep on the meme theme — let’s sum this up in the internet’s haiku, greentext (8):

>Am person with disability
>Try to check emails
>Must prove am human first
>Cannot drag puzzle piece
>Humanity check not accessible
>Fail humanity check
>Am now not human
>Am now a robot
>Do not have human rights as am robot
>Human’s right of access to information does not apply to robots
>Right to check email denied
>Would feel bad but since am robot have no emotion
>At least I don’t have to read emails ever now

Footnotes

  1. Other articles about CAPTCHA:

CAPTCHA and the B.I.T.C.H-100

HALT! Before you continue your journey, I’d like to introduce you to the worst CAPTCHA I’ve ever encountered.

2. I open every interesting link on a page in a new tab, then look at them all — in order. It’s like doing all the side quests in a game before doing the main quest. It also means I’m really fantastic at crashing browsers and triggering CAPTCHAs.

3. Issue #1 — Dragging Movements

WCAG 2.2 Success Criterion 2.5.7 (Level AA)

Goal — Don’t rely on dragging for user actions.

What to do — For any action that involves dragging, provide a simple pointer alternative.

Why it’s important — Some people cannot use a mouse to drag items.

4. Issue #2 — Conforming alternate version

WCAG 2.2 Conformance requirement 5.2.1 (Level A)

For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

A Conforming alternate version:

conforms at the designated level, and

provides all of the same information and functionality in the same human language, and

is as up-to-date as the non-conforming content, and

for which at least one of the following is true:

the conforming version can be reached from the non-conforming page via an accessibility-supported mechanism, or

the non-conforming version can only be reached from the conforming version, or

the non-conforming version can only be reached from a conforming page that also provides a mechanism to reach the conforming version

5. Issue #3 — Contrast (Minimum)

WCAG 2.2 Success Criterion 1.4.3 (Level AA)

he visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text — Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental — Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes — Text that is part of a logo or brand name has no contrast requirement.

6. Issue #4 — Accessible Authentication (Minimum)

WCAG 2.2 Success Criterion 3.3.8: (Level AA)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative — Another authentication method that does not rely on a cognitive function test.

Mechanism — A mechanism is available to assist the user in completing the cognitive function test.

Object Recognition — The cognitive function test is to recognise objects.

Personal Content — The cognitive function test is to identify non-text content the user provided to the Web

7. Issue #5— Accessible Authentication (Enhanced)

WCAG 2.2 Success Criterion 3.3.9: (Level AAA)

A cognitive function test (such as remembering a password or solving a puzzle) is not required for any step in an authentication process unless that step provides at least one of the following:

Alternative — Another authentication method that does not rely on a cognitive function test.

Mechanism — A mechanism is available to assist the user in completing the cognitive function test.

8. Not an endorsement of 4chan by any means. I’m a Xennial and, as such, best communicate in my culture’s languages — internet memes and Simpsons references.

Originally published at https://erinbeel.substack.com.

--

--