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:
Tabitha, the ginger tabby cat, is lying down belly-up on a comfy green pillow. Her eyes are closed, and she’s purring happily.
Slowly, a Caucasian person’s hand appears, and begins reaching for Tabitha’s soft, exposed belly.
Jessica, voice over:
There’s an old saying: The definition of insanity is doing the same thing over and over again…
Visual:
Once the hand makes contact with Tabitha’s belly fluff, her eyes shoot open and her ears perk up. A shrill violin chord is played.
The screen goes black, and we hear the sounds of violence. Comic book-styled text appears “Slice! Bite! Claw!” The screen returns to Tabitha, who is back to the same peaceful state as before.
Jessica:
…and expecting different results. So your websites shouldn’t do that, either.
Visual:
The hand from before returns, visibly injured and twitching. Still, it reaches for Tabitha’s belly, and it seems events are about to repeat themselves.
Jessica:
Welcome to What in the World is WCAG? 3.2 Predictable.
Visual:
Title card. 3.2 Predictable 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:
On focus.
Simply moving focus to a new element shouldn’t cause any unexpected changes on the page.
Visual:
A focus state tabs through the top navigation of a webpage. Once it focuses on one particular menu item, a dropdown menu appears without warning, and the focus state moves over to it automatically. An animated red cross indicates this behavior is wrong.
Jessica:
When users navigate through forms, buttons, or menus, they should be able to focus on an item without worrying about a sudden page shift or a new section opening up automatically.
Visual:
Another example. A user tabs through a form on a webpage. When the focus state reaches a payment option called PawPal, suddenly a pop-up window appears asking the user to login to PawPal. Again, this is marked as wrong with a red cross.
Jessica:
This one is especially important for accessibility, as it maintains a sense of control and predictability. If something does need to change, it’s best to trigger it on a user’s action, like clicking or pressing Enter, instead of automatically when focus is applied.
Visual:
The previous examples of the navigation dropdown, and the payment option in the form, are played again, except this time the actions are triggered by the user pressing Enter.
Jessica:
This way, users can move around your site without worrying that they’ll lose their place or think they’ve activated something accidentally.
On input.
So here I was, filling out a form, again, but when I clicked choose an option in this dropdown, I was whisked away to a new page without any warning.
Visual:
A webpage, with a British flag icon in the top right, displaying a form in the main content area. A dropdown is activated, showing a list of languages. The user chooses English (US) which triggers a pop-up to appear. It says “Hey, buddy! Switching to the US site…” Now the user is dropped onto a new page entirely. Their form has disappeared.
Jessica:
That’s not just confusing. I lost my place entirely. How do I get back? And why did it do this? Make sure that any time a user’s input changes their context, like jumping to a new page, displaying a pop up, or loading new content, it is triggered only after the user confirms their choice, rather than automatically on selection.
Visual:
The previous scenario is replayed. This time, when the user selects English (US), they stay on the same form page, and it’s not until they complete the form and click Submit that the website asks if they wish to switch to the US website. The options are “Switch to US” and “No thanks, old chum.”
Jessica:
Give users control over when change happens. No one likes being caught off guard.
Consistent navigation.
Repeated navigation elements like menus, headers, or sidebars should stay in the same order across pages.
Visual:
An e-learning website, with top-level navigation. From left to right, there’s a home link, links labelled Courses, Student portal, About, and Contact. To the far right is a login button. As we transition to different pages on this e-learning website, the elements in the top navigation stay the same, with the items in the same order from left to right.
Jessica:
This consistency is especially helpful for users who rely on memory aids, keyboard navigation, or screen readers, as it allows them to learn the layout and navigate confidently without any surprises.
Consistent identification.
Visual:
An e-learning website with a login button on the top right. A cursor hovers over it, indicating it’s interactive.
Jessica:
See this lozenge-shaped thing with the text in it? That’s a button on this website.
Visual:
The cursor glides over to a button in the main content area, labeled “Enrol today.” Again, the cursor changes to a hand icon, indicating it’s interactive.
Jessica:
This is a button, too.
Visual:
The cursor glides to another element that looks like a button. There’s text that reads “We cover everything. Medicine, the arts, computing, mathematics, history…” Under this text, is more text that reads “And more” which is styled to look like the buttons from before, except clicking on it doesn’t do anything.
Jessica:
But this… is not a button? Don’t tease me like that. Repeated elements like icons, labels, and buttons need to be identified the same way across pages. If the “More information” icon looks and behaves a certain way on one page, it should stay that way on the others.
Visual:
The user scrolls down a bit, to a small body of text about a virtual tour. The user clicks on a small circle with a lowercase I. A tooltip appears with more information about the virtual tour.
Jessica:
This is especially important for users with cognitive disabilities or anyone who depends on familiarity to navigate. But frankly, it’s just better for everyone.
Consistent help.
Support options, whether it’s a phone number, chat, FAQ, or self-help resources, should be placed in the same location across pages.
Visual:
A chat icon is placed in the bottom right corner of a website. Cycling through other pages on this website, we notice the chat icon stays in the same place.
Jessica:
It’s all about making sure everyone can find the help they need without the frustration of hunting for it.
Predictable. Because consistency is comfortable.