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:
The screen is divided into three columns. The right-most segment shows a mobile phone being held and tapped. The left-most segment shows a desktop webpage with a Tab key and an Enter key. A focus state steps through some buttons, before the Enter key is pressed on the final button. Lastly, the middle portion of the screen shows a partially-obscured computer screen with a generic website homepage open.
Jessica, voice over:
When you click a button or select an option, you expect it to just work, right? But behind the scenes, there’s a layer of code making it all happen.
Visual:
The middle segment now fills the screen. We watch a mouse cursor hover over a button, when the webpage suddenly unveils all the code that created it. In front of the screen, two cats appear, looking at all the code. The right cat, Benson, who is grey with white blotches, turns to Cream Puff, the beige, striped cat on the left, before turning back. Cream Puff then turns half way to the viewer.
Jessica:
For users relying on assistive technologies like screen readers or voice commands, that code isn’t just important, it’s everything.
Visual:
A drizzle of neon-green ones and zeros falls from the top of the screen, creating a transition to the title screen.
Jessica:
Welcome to What in the World is WCAG? 4.1 Compatible.
Visual:
Title card. 4.1 Compatible is scrawled onto a torn-up sticky note, which is slapped onto the screen by a tiger’s paw, who roars. Now, we’re entering a presentation-style format.
Jessica:
Parsing, obsolete and removed.
Let’s bid a fond farewell to Parsing, one of the original WCAG criteria that’s now officially retired.
Visual:
The video becomes dull and grey. We enter a gloomy cemetery, with a gravestone that reads “R.I.P. Here lies Parsing, 2008 to 2023.”
Parsing was designed to ensure that code was error-free enough for user agents, like browsers and assistive technologies, to process it without breaking.
Visual:
The camera flips to reveal Taffy, a Siamese cat, hugging Tabitha, an orange tabby, who sits solemnly before the gravestone.
Jessica:
Essentially, it was all about clean, consistent HTML.
Visual:
Both cats start to imagine what clean HTML looks like. The clouds in the sky begin to clear.
Jessica:
Let the happy feelings wash over you.
Visual:
Taffy thinks to himself “Remember when <div> meant something?” and Tabitha is thinking “We used to have standards.”
Jessica:
Anyway… In WCAG 2.2, Parsing was retroactively set to always passes under WCAG 2.1 and completely removed in 2.2.
Why?
Visual:
A website’s code, which is neatly indented, sparkles and shines gracefully.
Jessica:
Modern browsers and tools have become much better at handling messy or imperfect code, making this criterion less relevant for today’s web. Hey, it’s that Robust principle in action!
Name, Role, Value.
Visual:
A fake website called Catbook, with the top heading of the page that says “Popular cat profiles.” Underneath are a couple of cat profiles for Taffy the Siamese cat, and Cream Puff, the beige cat from earlier. In the top nav is a home link, a notifications icon, and a profile icon. Each of these are interactive, and we see a focus state jump between them.
Jessica:
Let’s talk about screen readers and how they make sense of a website. Every interactive element like buttons, checkboxes, or menus, needs to provide three key pieces of information:
Its name— what it is.
Its role— what it does.
And its value— its current state.
Visual:
The focus state interacts with the profile icon.
Jessica:
Here’s a dropdown menu. A screen reader should announce “Menu collapsed” when it’s closed and “Menu expanded” when it’s open. Make sense?
Visual:
The focus state jumps further down the page, into the text next to Taffy’s profile image.
Jessica:
Links do the same thing. “Read more about Taffy – Link, unvisited.” This success criterion ensures that interactive elements are coded clearly and consistently, so assistive tech knows exactly what to do.
And what’s that old saying? If it ain’t broke, don’t fix it. This one’s mostly for people coding their own components. If you’re using HTML and ARIA appropriately, you’re probably already covered.
Status messages.
There’s lots of little visual cues you probably rely on without noticing.
Visual:
A button for an online shopping basket. There’s an icon of a shopping cart, with the number of items written in the cart itself. The number keeps increasing, until it’s so big that it awkwardly has to rotate in order to fit.
Jessica:
Whether it’s a number change on a shopping cart icon when you add an item, or a progress bar slowly ticking along, these status messages need to be available to people who can’t perceive them visually, too.
Important updates like “five search results” or “upload complete” need to be coded so that assistive technologies can announce them properly. This is all about keeping everyone informed, no matter how they interact with your website.
Compatible. Break barriers, not compatibility.
We just wanted to take a moment to thank you for joining us.
Visual:
We’re now presented with a slide show of characters from the intros to previous videos in this series. The braille display user from the 3.1 Readable video pets her grey cat happily at her desk, while listening to her screen reader.
Jessica:
We hope these videos have made the Web Content Accessibility Guidelines feel a little less intimidating, and a lot more practical.
Visual:
Then we see the old man from the 2.3 Seizures and Physical reactions video using his desktop PC, contentedly adjusting his glasses, knowing that there are no flashing lights. Cream Puff stands next to the keyboard and watches the screen, too.
Jessica:
Our mission is to help make the web a better place, one step at a time, and we’re so glad you’ve been part of that journey.
Visual:
The woman from 2.4 Navigable is cradling Taffy in her left arm, who’s lying on his back like a baby. In her right arm, weighed down by a shopping bag, she’s trying to complete a form on her mobile phone. Though she appears to be smiling through her struggle, the Submit button is large enough, and spaced well away enough from other buttons, for her to press with her thumb.
Jessica:
Remember, it’s about keeping the digital doors open wide.
Visual:
Lastly, we see the woman from 2.1 Keyboard accessible, whose mouse is still unusable as it’s being charged, trying out the Tab key to navigate her desktop computer. Tabitha the ginger tabby is seen peeking out from behind her chair.
The final end screen is the Silktide logo, under some large text that reads “Thank you!” Along the bottom are headshots of the cats who have appeared throughout the series.
From left to right: Benson, Cream Puff, Jeeves the tuxedo cat, Tabitha, Taffy, Lily the Scottish fold, Sasha the black cat, Maximus III who is a grey Russian blue, and Oreo the sphinx cat.