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.
Transcript
Visual:
An audience sits side-by-side in a conference room. There are two audience members who stand out. One is a blonde Caucasian girl with a pink cropped jacket and blue jeans. She is attentive towards the presentation, smiling up at the presenter who we can’t see. Next to her is a slightly-tanned man with dark brown hair and sunglasses, leaning back relaxed in his chair, wearing a zip-up hoodie, grey shirt and beige trousers. He’s smirking. It is less clear if he’s paying attention.
Jessica, voice over:
One of my favorite audience participation moments in my presentations is when I ask the audience to close their eyes and imagine a website. Let’s do it together now.
Visual:
The blonde girl closes her eyes and we see her imagination appear above her head. A generic looking company website homepage is formed, with a navigation bar, login button, heading, and chat widget.
Jessica:
Got it in your head? Okay. Where is the login? Top right, yes? Where is the chat widget? Bottom right? We have expectations after decades of using the web.
Visual:
The girl appears satisfied that her imagined website matched universal standards.
Meanwhile, the guy’s imagined website looks a lot different. There are several navigation bars sliding across the screen at once, with the home button and the chat widget floating around.
Jessica:
Stop reinventing the wheel. You’re not edgy.
There’s a famous book on web design everyone should read. The title is just four magical little words: Don’t Make Me Think.
Visual:
The cover of the book written by Steve Krug. It’s the “revisited” version, with an updated sub heading “A common sense approach to web and mobile usability”
Jessica:
Welcome to What in the World is WCAG? 2.4 Navigable.
Visual:
Title card. 2.4 Navigable 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:
A quick note about this video. If you’re not familiar with keyboard navigation or focus, you’ll need to watch the Don’t Be Afraid of Keyboard Navigation video first and come back.
Focus visible.
Just like a mouse user gets a visual message that they put their pointer over something interactive on a page, users who are navigating without a mouse need the same thing. Every interactive element should have a clear focus state.
Visual:
A generic website. A mouse cursor hovers over a button, changing the cursor design from the default pointer to the hand pointer. Following that, we see a very clear focus state around the button with a bright contrasting colour, which achieves the same purpose as the hand pointer.
Jessica:
Focus not obscured.
Visual:
Same website as before. A focus state sits on one of the interactive elements in the navigation bar. Suddenly, a cookie banner appears from the top of the screen, with the text “This site uses cookies to do stuff. Is that okay?” and the two buttons say “OK!” and “Stuff?” The cookie banner hides most of the focus state on the navigation bar.
Jessica:
How much is too much? There are two separate criterion here. One is the version that allows for partial obscuring and the other is triple-A and doesn’t allow any. As it isn’t defined, I would say that it’s about clarity of purpose. If I can’t tell what I have in focus, it fails. This happens a lot with cookie banners.
Chat widgets also take up space, so make sure you’ve thought about where it is and how it might obscure the page at each breakpoint. And that’s even if you don’t have it open automatically.
Visual:
We travel down to the bottom right corner of the page where the chat widget is located. A pop-up message appears over the page content, with a cartoon resembling Clippy, a paperclip with eyeballs. It says “You appear to be browsing a website. Would you like help?”
Jessica:
Focus appearance.
You can argue that Focus visible and Non-text contrast get you here, but I like clarity.
Visual:
Screenshots of the Focus visible segment of this video, and the Non-text contrast segment of the 1.4 Distinguishable video.
Jessica:
The rules are a 3-to-1 contrast ratio, and the focus indicator must be at least as big as the area of a two pixel thick border around the element.
Visual:
Examples of ways you can design the focus indicator according to W3C, including a border around the element, or block colors that sit inside the element itself, with at least a 3-to-1 contrast.
Jessica:
That’s what WCAG says. And it’s triple-A. I say focus should be really obvious. Thick lines, bright contrasting colors.
Visual:
The focus indicators now change to be even thicker than W3C’s examples, and they all border around the element.
Jessica:
But if that’s not your thing, use the Oreo cookie focus from Erik Kroes, thus named because this universal focus state goes black, white, and black, so you always have good contrast. We’ll put a link in the video description.
Visual:
Examples of the universal focus state, with the code to create it:
:focus {
box-shadow: 0 0 0 .25rem white;
outline: .375rem double black;
border-radius: .125rem;
}
Jessica:
Bypass blocks.
This is all about being able to skip over blocks of content that are repeated across pages on a site, like the top nav.
Visual:
A generic website. This time, a focus state is tabbing across the top navigation, but there are a ridiculous amount of interactive elements to step through.
Jessica:
It shouldn’t require 51 button presses to get to a link in the content, or 174 button presses to get to the account login in the top right. Yes, those are real examples. Bypass blocks are not just skip links, but we’ll start there. Skip to Main Content should appear as the first tab stop on the page. Its job is to move the focus to somewhere like right above the H1.
Visual:
The website resets. Unlike before, the first thing the focus state lands on is a Skip to Main Content link. This allows the focus state to skip over the horrendous navigation bar from before and get straight to the meat of the page.
Jessica:
So just like you can skip past the top nav with your mouse, users without a mouse can too. Think about why users come to your site and put additional skip links in for the main things they would want to do, whether it’s login, search, or viewing their shopping basket.
But that’s not all. ARIA landmarks like navigation, search, main, and content info can help define areas of the page and make it easier to get to them quickly.
Visual:
We zoom out to see the entire webpage laid out, with highlighted areas representing the ARIA landmarks. Navigation is along the top, main is the majority of the page, search, which written as form role=”search”, is in the search field, and content info, written without a space in between, sits at the very bottom in the footer.
Jessica:
Making your menus expandable and collapsible is also a way to bypass blocks.
Visual:
The busy navigation bar now has drop down icons, making the majority of the interactive elements skippable.
Jessica:
And don’t forget nested headings in your content.
Visual:
Another web page on the website, with a big wall of text. The H1 is right at the top in the largest font, with a H2 and a H3 underneath in smaller and smaller font.
Jessica:
Focus order.
Visual:
Generic website with a diagram of the focus order, starting with the Skip to Main Content link, followed by the contents of the top navigation from left to right, then the main content below, working its way down.
Jessica:
When a user moves through the focusable elements on a page, they need to follow an order that makes sense. Typically, it follows the visual layout of the page, but the point here is to avoid confusion. Here’s an example of how this can go wrong.
Visual:
A form to sign up to a mailing list. On the left are text fields for the user to enter their address. On the right are checkboxes to decide what content the user receives, like newsletters and job listings.
Jessica:
This form was designed with checkboxes on the side, so the focus moves from the text fields to the checkboxes and back, which is weird and confusing. It isn’t recommended to mess with the tab index values unless you must, but good design practices should make focus order a lot simpler.
Visual:
After the focus state jumps between the address fields and the checkboxes, it resets and then follows a more logical order: all of the address fields first, then the checkboxes after.
Jessica:
Quick note: Apple’s OS makes up its own focus order based on the visual layout of the page, so you will need to check focus order on another operating system, like Windows.
Link Purpose (In context, or Link only)
If I presented you a link with the text: “A Short History of Our Company,” where would you think that link goes? To another page in the website about the history of the company, right?
What if I change the link text to: download A Short History of Our Company PDF? You would know it was actually a link to a PDF and what to expect, wouldn’t you?
Link text matters.
The single-A version of this is Link purpose (In context) which is to say, if you read the words around the link and can figure out where it’s going, it’s good.
Visual:
An example of a line of text that passes this criterion which says “To see the latest results of our survey, click here.” The part that says “click here” is the link.
Jessica:
The triple-A version says the link by itself has to make sense. Screen readers have an option to list the links on the page and choose one. So it’s worth giving some consideration to whether or not your links make sense, triple-A requirement or not.
Visual:
An example of text that passes this criterion says “See our latest survey results” and the whole line is a link. Other examples include “Learn about our mission” and “Find out why we’re the best” and “Sign up to our newsletter” and “View our kitten gallery” and “Become a Cat Crusader” and “Download our kibble recipe”.
Jessica:
Location.
When you’re browsing a website, how do you know where you are and how you got there? Here we are again, covering the triple-A requirements that matter! This one covers site maps, but we’re going to talk about breadcrumb trails. Yes, just like Hansel and Gretel!
Visual:
A grey cat dressed as Gretel, licking its paw, and a disgruntled orange cat dressed as Hansel. A trail of breadcrumbs is lined beside them.
Jessica:
This is something that W3C does well, so let’s take a closer look at their understanding docs.
Visual:
Screenshot of the navigation bar for a W3C webpage.
Jessica:
This is the understanding doc for Location, which is Success Criterion 2.4.8. The breadcrumbs have additional arrows to give you a better sense of where you are in the content. So we have the home link of all understanding docs. An upward arrow for the guideline Navigable, that Location is a part of. A left arrow for the previous success criterion Focus visible, and a forward arrow for the next success criterion of Link purpose. I quite like those arrows. I think they add something to this use case.
Typically you will find it’s just a greater-than symbol to represent the page hierarchy, so you can follow it back.
Visual:
A website breadcrumb trail, that reads “Shop, Cat toys, and Luxury ball of yarn” from left to right with greater-than symbols in between. The Luxury ball of yarn is under the Cat toys category, in the Shop part of the website.
Jessica:
Multiple ways.
We don’t all engage with content the same way. When you’re looking for something, do you prefer a list of links, a table of contents, a site map, or a search box? One way is the contextual links in the page content, but the answer is in the name. You need at least two, because it’s multiple ways.
Headings and labels.
Visual:
W3C’s own written description of Success Criterion 1.2.1 Headings and Labels, level double-A, which reads “Headings and labels describe topic or purpose”
Jessica:
Let me start by saying that this one is a little confusing because of how WCAG is laid out. This isn’t about using them or correctly identifying what’s a heading and what is a label in your code. There are literally three other success criteria that cover those things independently.
Visual:
The other three success criteria briefly appear: 1.3.1 Info and Relationships, 3.3.2 Labels or Instructions, and 4.1.2 Name, Role and Value. They’re all level A.
Jessica:
This one is here to remind you that if you do use headings and labels, they really do need to be good, or to use their language, clear and descriptive.
Let’s use the W3C’s example: an article on how to write well. That’s your top level heading. Then “Cut out useless words” and “Identify unnecessary words” are subheadings. It should be pretty clear what kind of content to expect in those sections.
Visual:
The top level heading “How to write well” is tagged as H1, and the two headings below are tagged as H2.
Jessica:
Page titled.
You’ve probably seen a page title and not realized it. They are visible in two main places: search results and browser tabs. Oh, and social media.
Visual:
A web browser window, on a search results page. The top result shows where the page title is written, which has the largest font size. A separate browser window, with a close-up of the browser tab along the top, also shows where the title is written, above the URL bar which says “creampuff-fans.com” and finally we see a mobile phone with a social media app open, and a sponsored ad with the page title written underneath an image of Creampuff the cat surrounded by stars. This ad also leads back to creampuff-fans.com.
Jessica:
This is one of the times that WCAG and SEO are truly aligned. But setting aside the value of the title tag for visual users and SEO, the page title tells everyone what the page content is about. Can’t stress this enough. It needs to be unique and related to the content.
And since we all love using our brand names in our page titles, consider putting the name after the description of the content, like: blog, hyphen, Silktide, or: request a demo, hyphen, Silktide. Front load the unique, important information.
Before you ask, no, WCAG doesn’t have any rules for page descriptions.
Navigable. Finding your way shouldn’t be hard.