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
Jessica, voice over:
Imagine you have a box of Lego.
Visual:
A box of Lego falls from the sky, landing with the sound of many plastic pieces crashing together. The box then vibrates, the lid bursts open and a rainbow erupts from inside, with many Lego creations assembling one after the other.
Jessica:
You can stack them up in lots of different ways to build a castle, a spaceship, or even Cloud Cuckoo Land.
The Adaptable guideline says websites should be like that, too. They should be flexible so people can customize them, like making the text bigger, or changing the colors on their own devices.
Welcome to What in the World is WCAG: 1.3 Adaptable.
Visual:
Title card. 1.3 Adaptable 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:
Info and relationships.
If you can’t see the screen, how can you tell how the content is organized? This is a code thing. You need to ensure you use the correct HTML tags, the right ARIA landmarks, and put labels on your form elements so that screen readers can understand the page and relay it back to the user.
Visual:
A website with HTML tags highlighted, like headings and list items, ARIA landmarks like a Navigation area, and a correctly-labelled form for entering an email address, which reads <label>Your email</label>.
Jessica:
Orientation.
Your site should work whether I have my device in portrait or landscape. Some people will have their screens mounted so they can’t be moved.
Visual:
A mobile phone appears at a vertical angle. It rotates horizontally and the website responds accordingly. The phone then rotates back to portrait mode, and a mount clamps it into place. Now it cannot rotate and is forced to stay in portrait mode.
Jessica:
Mobile First has been a design philosophy for over a decade now, so this shouldn’t come as a surprise.
Autocomplete and Identifying input purpose.
Visual:
A generic website form, with text fields for entering personal details like names and addresses. Once the user begins typing into a field, a dropdown with saved information appears. The mouse cursor clicks on the dropdown to auto-fill the rest of the form.
Jessica:
Setting autocomplete values for form fields helps all users by reducing the friction involved in filling out forms. I see you, marketers.
Visual:
Lilly, a Scottish fold cat, appears and stares into the soul of the viewer.
Jessica:
Identifying the purpose of input fields in the code like personal information or payment details helps the browser auto fill those fields correctly. It’s just awesome. Do it.
Meaningful sequence.
Think of a document with two columns of text. It really shouldn’t just read straight across the top line, should it?
Visual:
A generic document with a title along the top and two columns of body text underneath. A screen reader highlights the title, then the first line of the text in the left column, followed by the top line of the right column. This is marked as an error.
The screen reader instead returns to the left column and steps through the text by paragraph, before moving onto the right column. This is marked as correct.
Jessica:
Websites and PDFs need to present information in a logical order. You can check this for web pages by turning off the CSS in your browser.
Sensory characteristics.
Click the green square on the right.
Visual:
A webpage with the previous instruction written on the left. To the right of the text is a 3 by 2 grid of colored squares.
Jessica:
Oh, wait. What if I can’t perceive the colors? What if I’m looking at this on mobile?
Visual:
Now we see the same webpage in black and white. Then we see the webpage on a mobile screen. The grid of colored squares is now underneath the text that reads “Click the green square on the right.”
Jessica:
It’s not on the right then, is it? Don’t use language like this. Instructions should be clear for everyone.
Adaptable. Ensuring everyone can access information in the way that suits them best.