Here’s a full transcript of the video, complete with detailed descriptions of the visuals. For visual users, we’ve included screenshots to show how transcripts are structured and why they’re such an important part of accessibility. Whether you prefer to watch, read, or both, we’ve got you covered.
Video transcript
Visual:
Jessica, a red headed white woman with glasses, ginger pigtails with mis-match hair bobbles, and a black Silktide hoodie, sits in the back seat of a moving car, looking down at her phone. She seems confused and slightly annoyed.
Jessica, voice over:
There I was, sitting in the car on the way to the airport, trying to check in for my flight. The form was long… And no matter what I did, it just wouldn’t submit.
Visual:
Jessica’s phone screen. The form is filled in. She taps the Submit button with her thumb multiple times and nothing happens.
Jessica:
I kept prodding the button, wondering what was wrong. Turns out there was an error about halfway up the form, but there was no way to know that without hunting for it.
Visual:
Jessica scrolls up the form, and stops at a text field that has an error, telling her the flight number she entered is invalid.
Jessica:
So. Frustrating. Eventually I figured it out and then had to explain it to my coworker who ran into the exact same issue.
It made me think, why wasn’t this form designed to help me figure out what went wrong?
Welcome to What in the World is WCAG? 3.3 Input assistance.
Visual:
Title card. 3.3 Input assistance is scrawled onto a sticky note, which is slapped onto the screen by a cat’s paw. Now, we’re entering a presentation-style format.
Jessica:
Labels or instructions.
Let’s say you’re filling out a field labeled “Name.” Easy, right? But does that mean your full name, just your first name or something else?
Visual:
A text field for name. Different variants of the name “Abraham Lincoln” cycle through the text field, including just “Abraham” and “Mr Abraham Lincoln” and “Xx_Ep1c_Pr3sident_xX.”
Jessica:
Without clear labels or instructions, users are left guessing, and for those using screen readers, the lack of clarity can make navigating forms even more frustrating.
This criterion helps everyone by requiring that input fields have explicit labels or instructions, either visible near the field or accessible via assistive technology.
Visual:
The text field for name now specifies “First name.” We then see a different set of fields, this time for date of birth, in the format of month, day and year. The date 02, 12, 1809 is entered.
Jessica:
Whether it’s “First name (As it appears on your ID)” or “Enter your date of birth in this format,” clear guidance ensures users know exactly what’s expected.
Error identification.
Visual:
A generic website form, with all the fields filled. The user hovers their mouse over the Submit button and clicks.
Jessica:
Have you ever submitted a form and nothing happened? No confirmation, no helpful hint, just… nothing? It’s frustrating, right? Now imagine you’re using a screen reader or navigating without a mouse. Tracking down the problem becomes an even bigger challenge.
When a user makes a mistake on a form, the error must be clearly indicated and easy to find.
Visual:
This time when the user clicks Submit, an error message appears underneath, saying the user didn’t write a matching email address. The user scrolls up the form and notices an empty email address field with error indicators, and a reminder that this field is required.
Jessica:
This might mean highlighting the problematic field, adding an error message like “This field is required,” or providing an icon to signal where the issue is. It’s about giving users the feedback they need to fix the problem quickly.
Error suggestion.
Identifying errors is step one, but what happens next?
Imagine picking out a new password and getting an error message that just says “Invalid password.” That’s not exactly helpful, is it?
As an example, if your password is rejected, a more useful message might say “Password must be at least eight characters long and include a number.” Or if you forget to enter your email address, the form could say “Please enter a valid email address in the format: example@domain.com.”
Visual:
An email address is entered into a text field “TaffyCat@BiscuitMakers.com.”
Jessica:
Clear suggestions like these take the guesswork out of fixing mistakes.
Error prevention: Legal, Financial, Data. And, Error prevention: All.
We’ve all been there. You’re about to submit a form for something important like booking a flight, paying a bill, or signing a contract. The stakes are high, and the last thing you want to do is hit Submit and realize you made a mistake you can’t undo.
Visual:
A black person’s hand holding a phone with a completed form. They’re hovering their finger over the Submit button, but keep hesitating, and scrolling back up the page to double check the information they entered.
Jessica:
That’s where Error prevention comes in. for legal, financial, or data related actions, Error prevention level AA requires safeguards to help users avoid costly or irreversible mistakes.
Visual:
Finally, the person hits the Submit button, which takes them to a new screen that asks them to confirm all their details one last time, giving this person relief. There’s also a button to go back to the previous page.
Jessica:
This could mean offering a confirmation page to review details before submitting, or having an undo option, so users can fix errors after submission.
At level AAA, this success criterion expands beyond high stakes actions to include all user inputs, giving users the chance to confirm or correct their input before any major change takes effect.
Think of a shopping cart that asks “Are you happy to complete this purchase” before completing the order.
Visual:
A shopping cart with the heading “Are you happy to complete this purchase?” In the cart is a shopping item “Gourmet cat food” which costs $10 each with a quantity of 10. Postage is free, so the total is $100. The user can click to buy now, or edit their basket. Taffy the Siamese cat looks at the shopping cart with excitement.
Jessica:
It’s a simple step that prevents accidental clicks from turning into unintentional purchases, so give users peace of mind, reduce anxiety, and make it easy to fix mistakes before they become problems.
Redundant entry.
Visual:
A generic webpage following a sequence of Delivery address, Billing address, Payment details, and Confirmation. The user is on the Billing address page, faced with many text fields to complete, despite having already completed the Delivery address.
Jessica:
But my billing address is the same as my shipping address!
Why do I have to type this in twice? Why couldn’t you just put that little tick box in that says “Billing address is same as shipping address” and save me the hassle?
Visual:
A tick box that says “Same as delivery address” appears. Once the user clicks it, the form is completed automatically.
Jessica:
Asking users to type in the same information more than once isn’t allowed, nor should it be.
There is an exception for confirming email addresses and passwords, because doing it twice is for our own safety.
Accessible authentication: Minimum and Enhanced.
Visual:
A bright, colorful webpage for a website called Pizza Time. The user enters their email to log in.
Jessica:
The other night, I ordered pizza. I thought I’d be logging into the site, but after it asked for my email, it didn’t ask for my password. Instead, it told me to check my email. They sent what’s known as a magic link. Clicking it logged me in with all my save details, ready to go. No password to remember, just pizza on the way.
Visual:
The user goes on a journey of opening their email inbox, clicking the link sent by Pizza Time, and being directed to a new web page on the Pizza Time website that congratulates them, because it’s now pizza time.
Jessica:
That’s the beauty of accessible authentication.
At the minimum level, this success criterion ensures that users don’t have to rely on memory or tricky cognitive tasks like solving math equations to log in.
Options like magic links or password managers are great for everyone.
But there are still challenges. Multi-factor authentication, CAPTCHA, and transcription can still trip people up.
On the plus side, devices like smartphones are getting even better at making these accessible.
Visual:
A mobile phone with a webpage open, asking the user to enter a code that has been sent to them. A text message notification appears at the top of the phone screen, including the code. The code is then automatically entered into the webpage without the user’s input, and it successfully logs in the user. A smiley face appears.
Jessica:
My phone recognizes codes from emails and text messages automatically, making the process smoother than ever. Now if only my desktop would catch up…
At the enhanced level, things get even better. It removes some of the more tedious and inaccessible methods like transcription tasks and CAPTCHAs entirely.
Instead, it prioritizes user-friendly options like biometric authentication. Fingerprints, face recognition, or voice authentication. These methods don’t just eliminate barriers. They also provide independence and security for users who might otherwise struggle with traditional login methods.
If you want a deeper dive on this one and to learn about cognitive function tests, check out our WCAG 2.2 video on Accessible authentication.
Input assistance. Because mistakes happen.