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:
A black woman with dreadlocks, a green shirt, pink and purple necklaces, and a yellow headband, sits relaxed at her desktop computer, casually moving her mouse around.
Jessica, voice over:
When it comes to your computer and surfing the web, you’re probably pretty reliant on your mouse. I know I am.
Visual:
The screen wipes and now we see the same woman standing from her desk and crossing her arms, annoyed.
Jessica:
But what if you couldn’t use a mouse? And I don’t just mean because you needed to plug it in.
We pan over to the desk. Her mouse is upside down, plugged into a charging cable. Now we cut to the title screen.
Jessica:
Welcome to What in the World is WCAG? 2.1 Keyboard accessible.
Visual:
Title card. 2.1 Keyboard accessible 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:
Keyboard.
Everything you can do by clicking with the mouse, tapping on a touchscreen, or using other pointing devices, you should be able to do just using the keyboard.
Visual:
A generic website with a focus state stepping through the navigation bar along the top and interacting with a drop-down menu.
Jessica:
This means you can use keys like Tab to move between buttons and links, Enter to select something, and arrow keys to navigate in dropdown menus or scroll through a page. Note that while this is called Keyboard, there are other methods like buttons and sip-and-puff that use the same basic functionality.
No keyboard trap.
Visual:
The same website as before, but now the focus state moves much further through the website, covering buttons, links, and text fields.
Jessica:
When using a website, you should be able to move forward and backward through all of the interactive elements like forms, links, and buttons without getting stuck on any part of the page.
Visual:
The focus state highlights a text field to enter an email address. However, the focus state is now stuck here. There’s an error message that says “Error: Enter a valid email address!”
Jessica:
If you can get into a part of a web page using a keyboard, you should be able to get out of it using a keyboard too. And I do mean all interactive elements from modals to buttons. Some just doesn’t cut it.
Visual:
The website fades to dark, and a cookie disclaimer pop-up appears. It says “This website uses cookies. You’re cool with that, right?” and the options are “Yes, go away!” and “Wait, what? No!” The focus state jumps between the two options with nowhere else to go.
Jessica:
There are circumstances where you want to make a keyboard trap. For example, if the cookie banner requires interaction, you should make a keyboard trap that keeps the focus inside the banner to make it easier for keyboard users.
Character key shortcuts.
If a website uses keyboard shortcuts that involve letter, number, or symbol characters, like pressing P to print, there should be a way to either turn them off, remap them to include a non-character key like Control or Alt, or only have them active when that part of the page is focused.
Visual:
A ginger cat sitting on a laptop keyboard. We can see on the screen the cat is keyboard spamming a Word document.
Jessica:
This is important because it prevents accidental activation of shortcuts, especially when a user is typing.
Visual:
Suddenly, the entire video goes dark, and a pop-up appears over the cat, saying “Do you wish to save your project? All unsaved progress will be lost.” The 3 options are: Save. Seriously? And, Cancel.
Jessica:
You’ve probably experienced this yourself at some point.
Keyboard accessible. Because not everyone uses a mouse.
By the way, there’s a video on keyboard navigation in our Don’t Be Afraid of series. It’s worth a watch.