Video transcript
Visual:
A grey cat with yellow eyes peeks over a workdesk, twitching its ear and looking at a laptop.
The camera zooms out to reveal an east-Asian woman sitting at the desk, with neck-length black hair and white headphones. Her hands are resting on a braille display connected to her laptop. We can see on her laptop’s screen that her screen reader is highlighting a Skip to Main Content link on a website.
Jessica, voice over:
If you’ve ever wondered why accessibility experts say to use the text “Skip to main content” instead of just “Skip to content” it’s because of how screen readers pronounce words.
Screen reader:
Link: Skip to main con-tent.
Jessica:
I know we wish we could skip to happiness, but that’s not what it offers to help you do.
Visual:
The woman smiles dreamily as sparkles, love hearts, a rainbow and a sunflower float around the word “content.”
Jessica:
Heteronyms, words that are spelled the same but have different pronunciations that change their meaning, are common in English. Like bow and bow or tear and tear. As the saying goes, say what you mean, and mean what you say. But how?
Visual:
Emoji-style images for bow and tear. Bow is shown as a ribbon, and also a person bowing. Tear is shown as a paper being torn, and also a person shedding a tear.
Jessica:
Welcome to What in the world is WCAG? 3.1 Readable.
Visual:
Title card. 3.1 Readable 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:
Reading level.
Think about the last time you read something with language so dense you felt like you needed a dictionary to get through it. Reading level is all about making sure your content isn’t one of those head scratchers.
Visual:
A generic terms and conditions page on a website, which is just a big wall of text. Jeeves, the black and white maine coon, leans in with a raised eyebrow.
Jessica:
The goal is to write so that readers of all backgrounds and abilities can easily understand what you’re saying.
One tool to check readability is The SMOG Index. That’s the simple measure of gobbledygook. No, I’m not kidding. It estimates the years of education needed to understand your text based on the number of complex words.
Studies suggest that the average reading level in both the U.S. and the UK is about ninth grade, or around age 14 to 15.
Here’s a fun fact. One of the UK newspapers hits a reading age average of eight. Writing at that level while still keeping content engaging is hard. It’s about balancing simplicity with substance.
Visual:
A fictional tabloid newspaper called The Hairball, Britain’s number one kitty news. The front page declares that cats are better than dogs, according to cat owners. The main headline says in big bold letters “Every dog had its day.” Next to the headline is a picture of a very confused dog. Further down the page is a smaller article with the headline “No proof Sasha ate all that chicken.” There’s a picture of Sasha, a black cat with an angelic halo above her head.
Jessica:
So keep your language straightforward. Avoid jargon and long-winded sentences. It doesn’t have to be basic, just clear and easy to follow. Just so you know, this video is around age 13 or grade 7.
Language of page.
Did you know that screen readers can speak many languages?
Visual:
A generic website for an online learning course. The H1 says “Realise your potential” with British spelling. Surrounding the website are small speech bubbles containing different nations’ flags, including France, Denmark, Germany, Sweden, Wales, United Kingdom, The Netherlands, and Spain.
Jessica:
It matters because you don’t want your English content sounding like it’s being read in French. Putting the ox-sont on the wrong see-lah-bull, and making no sense at all. This is why it’s important to use the lang attribute in your HTML tag to define the language of the page.
And don’t just make up language codes. There’s a list of two letter ISO language codes from the International Organization for Standardization you should check.
Visual:
A list of language codes appears for the countries we saw earlier, written in lowercase. DA for Danish, ES for Spanish, SV for Swedish, DE for German, FR for French, CY for Welsh, and NL for Dutch. The website’s lang attribute is written as lang=”EN”.
Jessica:
For example, “EN” is for English, which is usually enough for a screen reader, but there are also regional variants like “EN-GB” for British English or “EN-US” for American English if you need to specify.
Visual:
The website updates to American English for “Realize your potential” and so the lang attribute changes to lang=”EN-US”. Note that EN is written lowercase, but US is capitalized.
Jessica:
This setting applies to the entire page, and it’s a level A requirement, different from Language of parts, level double-A, which we’ll cover next.
Language of parts.
Visual:
A mobile phone with an online course page opened. The heading reads “Your cooking career starts here” and further down the article is text that reads “Our cooking courses are some of the best on the web today. Bon appétit!” The whole page is given an American English language attribute.
Jessica:
When you set the language for the whole page, how do you handle a bit of French or Italian mid-sentence? Without marking those language changes, a screen reader will just keep reading in the original language. Imagine hearing “bon appétit” pronounced “bone appuh-tit”.
Visual:
Sasha the black cat slowly appears from the bottom of the screen, giving you a very startled stare.
Jessica:
Not exactly what you intended, right? So make sure that whenever there’s a language switch, it’s clearly marked in the code. This helps screen readers adjust pronunciation instantly so that bon appétit sounds like bon appétit, instead of, well, something awkward.
Visual:
Recommended code for this example, written as: <p>Our cooking courses are some of the best on the web today. <span lang=”FR”>Bon appétit!</span></p>.
Jessica:
For each phrase or word that doesn’t match the page’s main language, just add the right lang attribute. Say you’re listing someone’s credentials and they mention they attended Goethe-Universität. Adding “DE” for German ensures the screen reader will get it right.
It’s a quick way to keep things clear and prevent those unexpected accents on the wrong syllable.
Unusual words.
Every now and then, you’ll stumble on a word like quixotic, mercurial, or even schadenfreude.
Visual:
Quixotic, mercurial and schadenfreude appear in speech bubbles on screen, surrounded by question marks.
Jessica:
For some people, these words might be fun, but for others, they’re stumbling blocks, especially for folks with cognitive disabilities, language learners, or anyone who’s just unfamiliar with them.
Visual:
Suddenly, we hear a light switch, and the screen goes dark. A projector screen appears, and covers the speech bubbles and question marks.
Jessica:
That was…
Quixotic. Foolishly impractical, especially in the pursuit of ideals.
Visual:
Projected onto the screen is the definition of quixotic, along with a cartoon of Maximus the 3rd, a grey cat, giving a lecture to a room of other cats. The chalkboard says “Step 1: Put mouse corpse on human’s bed. Step 2: Receive love and praise.”
Jessica:
Mercurial. Subject to sudden or unpredictable changes of mood or mind.
Visual:
A new projection. Now it’s the definition of mercurial, with a 2 panel comic strip. The first panel is Cream Puff, a beige stripey cat, being scritched under her chin by a Caucasian human hand. She appears to love the affection, until the second panel, where Cream Puff suddenly tries to bite the human.
Jessica:
Schadenfreude. German. Taking pleasure in someone else’s misfortune.
Visual:
The definition of schadenfreude, with a cartoon of Taffy the Siamese cat, grinning with a paw held to his mouth, as the Caucasian man behind him clutches his head in confusion and distress. His vacuum cleaner has leaked dust and cat hairs everywhere. The vacuum cleaner has scratch marks.
Now, the lights have returned, and the projector screen retracts and disappears.
Jessica:
Anyway, this one’s triple-A, but I encourage you to provide definitions for complex or technical terms right there on the page. This can be as simple as a tool tip, a linked definition, or even just a brief explanation in parentheses.
Imagine you’re reading and come across “shibboleth,” a word or phrase that distinguishes insiders from outsiders. It gives everyone a chance to understand the content without feeling left out, or having to interrupt their flow to look something up.
I was going to say “reach for the dictionary” because, well, I’m old. But then I thought about my Kindle and how I can just hold down my finger on a word to look it up on the fly without leaving the page.
So if you love to use unusual words or technical jargon, think about adding a quick definition to keep everyone on the same page.
And just so you know, I’m definitely keeping “concatenation.” Linking things together in a series or chain.
Abbreviations.
We all run into abbreviations like PIN, NASA, or FAQ. If you know them, they’re convenient. If you don’t, they can leave you scratching your head. And for screen readers, abbreviations can be a real curveball, often reading them letter by letter when they are typically pronounced as a word.
Visual:
A speech bubble attempts to pronounce NASA by reading out each letter individually: N A S A. Suddenly, a light switch darkens the screen.
Jessica:
Did you know…?
Visual:
Once more, a projector screen unravels and covers the video. Written on the screen is the text “Here we go again…”
Jessica:
Not all abbreviations are created equal. Here’s a quick breakdown of the main types.
Abbreviation. A shortened form of a word or phrase by removing letters. For example: O R L Y for “Oh really?” Or M G M T for “Management.” Abbreviations streamline the original, but can sometimes be hard to decipher.
Acronym. A type of abbreviation that takes the first letters of a multi-word term and pronounces them together as a word. Think OPEC for Organization of Petroleum Exporting Countries, or NASA for National Aeronautics and Space Administration. Acronyms can roll off the tongue once you know them.
Initialism. Similar to acronyms, but each letter is pronounced separately. Common examples are FBI or CIA. Unlike acronyms, you don’t blend the letters into a single word.
Visual:
The lights return and the projector screen retracts. Now we’re looking at a very densely-written article on a webpage, with some acronyms and initialisms that are explained with parentheses.
Jessica:
It’s not hard to expand the full meaning of any abbreviation the first time it appears on a page, so screen readers and all users can follow along without confusion. Think of it like a quick introduction. NASA (National Aeronautics and Space Administration.) PIN (Personal Identification Number) or MI5 (Britain’s security service.)
Visual:
We zoom out of the page to reveal the heading, which reads “The most random article ever.”
Jessica:
That way, everyone’s on the same page and you’re not leaving anyone behind in a haze of alphabet soup.
QED. Latin phrase “quod erat demonstration.” Written or said after an argument to show that you have proved something you wanted to prove.
Visual:
A black cat’s paw reaches into the screen, holding a microphone. It drops the mic with a thud and some feedback, then disappears again.
Readable. Simple words for complex ideas.