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:
Dramatic music. The W3C webpage for WCAG 2.2, zoomed in on the list of guidelines in the side bar, focusing on how there’s 13 criteria under 1.4 Distinguishable. A black cat clutches its head and shakes with fear at the sight of it.
Jessica, voice over:
This one is huge. I even made a joke about 1.4.1 Use of Color covering a lot of ground in the Don’t be Afraid of WCAG video. And that’s just one of the 13 success criteria in this guideline. But we’re going to break it down to make this easier to understand.
Welcome to: What in the World is WCAG? 1.4 Distinguishable.
Visual:
Title card. 1.4 Distinguishable 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:
(Visual) Contrast.
Choose your text and background colors wisely. They need to stand out from each other like black text on a white background.
Visual:
A black cat on a white background, with the hex values showing #000000 for black and #FFFFFF for white.
Jessica:
That one is a 21 to 1 ratio, by the way. There are plenty of other combinations that will fulfill the WCAG requirements.
Visual:
Various other cats with solid colors appear on different color backgrounds, with contrast ratios that meet WCAG requirements. 11.9 to 1, 5.3 to 1 and 4.7 to 1.
Jessica:
It may be easiest to just aim for at least 4.5 to 1 universally.
WCAG does allow for 3 to 1 ratios if the text is above 18 points or is 14 point and bold. But really, the more contrast the better.
Visual:
A photograph of opened cans of paint on a white table. Overlaid on top of the photo is some white text, which is difficult to read.
Jessica:
And when it comes to shoving text on top of an image, consider using a scrim. That’s the fancy word for the layer underneath the text.
Visual:
Under the white text appears a dark strip, which is barely see-through. Now the text is visible, and it says “Can you see me now?”
Jessica:
These can be semi-transparent, but the point is to make the text easier to read by ensuring the contrast is decent no matter what part of the image the text happens to sit on, as this can change.
Non-text contrast.
This is about color contrast for everything else. Checkboxes, form fields, buttons, focus states, toggles dropdowns, icons, charts, graphs, symbolic text characters, and even infographics.
Visual:
Jeeves, a black and white maine coon, pokes his head into the frame, looking quite bewildered by the exhaustive list that was just read out. He looks at you, the audience, then slowly exits stage right.
Jessica:
The contrast ratio of 3 to 1 is the baseline.
A few examples to illustrate the point. Expandable menus should have a downward arrow icon to make it clear what they do and have good contrast, so it’s understandable. The underline on links should have good contrast with the background color, and form fields should have borders that make it clear where they are.
We will cover focus appearance in the navigable video, but it is here and the focus state has to have the 3 to 1 contrast on whatever it touches.
Visual:
A focus state, with a black and white frame, highlights a website logo home link.
Jessica:
As this one comes up a lot, we’ll put a link to Erik Kroes’ universal focus state, a bit like an Oreo cookie, in the description.
Low or no background audio.
Okay, so this is a triple-A one, but I’m including it because it’s worth bearing in mind if you make audio content, like a podcast recording.
Visual:
Maximus the Third, a grey cat with blue eyes, meows repeatedly.
Jessica:
The speech content needs to be four times louder than the background music. And ideally there should be an option to turn off the background music entirely.
Visual:
A volume icon has a line strike through it, and the music in the video mutes for a brief moment.
Jessica:
It doesn’t cover videos, but let’s face it, it’s the same problem. And TikTok has this everywhere.
Reflow.
Visual:
The classic Twitter homepage, circa 2010, with m.twitter.com in the URL bar. The Twitter page has a text field that simply asks the user “What’s happening?”. In the feed below the text field, another user has made a tweet, saying “Starting to love this website. Hope it never changes!”
Jessica:
If you’re old enough, you might remember the days of M dot sites. As a solution to the increase in smartphones, even Twitter had a separate mobile website. These days we just plan for it and call it responsive design. Reflow is about making the content adjust to fit the screen size. It actually serves two purposes.
The first one WCAG intended, which is that you can zoom the page by 400% on the average desktop. Since they set that at 1280 by 1024 pixels, it meant that your site needed to adjust itself to fit into a 320 by 256 pixel frame, which just happens to match the iPhone 5.
So we get sites that work on small mobile devices without scrolling in two dimensions, which is to say it should scroll up and down, or left to right, but not both at the same time. Neat, eh?
Resize text.
I’d like to say the answer is in the name, but we’re living in the future.
Visual:
A generic website. The text on the page expands and retracts repeatedly, while the images surrounding the text adjust accordingly.
Jessica:
The key here is 200%. If you can increase the size of the text on the page by 200% and still use it, you’re good. Note that WCAG is specific here, and it’s the text that must be flexible on size, not images.
Firefox is one of the only browsers that can just make the text bigger, rather than enlarging all of the content.
Images of text.
Visual:
An image of a promotional banner for a fictional upcoming event. It has a Siamese cat next to a bunch of text. It’s very pixelated and difficult for anyone to read, but apparently, the text says: “Kitty meetup! July 12th to 13th 2024. Grand Hotel, 4th Street, Mew York. Due to last year’s incident, we would like to remind guests that tigers are banned from attending.”
Jessica:
This ties into Resizing text. Here’s the thing. When you put text into an image, it’s burned in there the way it is. The text can’t be made larger or have contrast increased on demand. So don’t do it. Note that this doesn’t apply to logos.
Text spacing.
Visual:
Taffy, the Siamese cat, is asleep on a pillow.
Jessica:
This part’s a bit dry, but it matters, so let’s break it down.
Visual:
A big block of Lorem Ipsum text.
Jessica:
The space between lines should be at least 1.5 times the font size.
In between paragraphs, it should be 2 times the font size.
Visual:
The words “Spaced out” fill the screen, with small gaps between each letter.
Jessica:
Spaces between the letters should be at least 0.12 times the font size and between words should be at least 0.16 times the font size. Lest we forget, WCAG doesn’t have a minimum font size.
So now that we’ve identified the required ratios, know that if you don’t set these at the default, you have to make sure that if someone needs to make them meet these minimum numbers, the text needs to remain inside the bounding box. It can’t be cut off or overlap.
Visual:
Text that reads “For father’s day” expands within a small box, so that some of the letters go outside of the box and can’t be seen. The text that remains says “For fat day.” A cat puts a warning sign onto the text.
Jessica:
Content on hover or focus.
Sometimes when you hover your mouse or tab to something with your keyboard, more content shows up. It might be a tooltip or an expandable menu. There are three things to bear in mind for content that appears and disappears. Let’s break it down.
If I’m zoomed in, the area of the page I can see is limited. If new content appears on top of the existing content on the page, I need a way to get rid of it quickly without disrupting what I’m doing, like hitting the escape key. That’s Dismissible.
But what if I want to read the new content? I need to be able to move my mouse around the new content as it may be blocking my view. Or perhaps my screen reader is responding to where I put my mouse pointer. That’s Hoverable.
I also need time to take in this new content and I may need to pan around to get the content into my field of view. It should remain visible until I choose to dismiss it. That’s Persistent.
Dismissible, Hoverable, Persistent. The trifecta for content that appears on demand.
Don’t rely on color.
Websites must use more than just color to convey information. For instance, a form might use an asterisk and a message saying “Required field” instead of just making the text red, or put patterns into a bar chart.
And my favorite, making links easier to spot by underlining them. Links are not just blue, my friends.
Distinguishable. Separating the signals from the noise.