Headings

All right, let’s talk about headings and what you actually need to know about headings right now. This information is adapted from atomica1y.com, atomic a 11 y.com, and from TheBookOnAccessibility.com.

Now, you’ll notice this lesson isn’t entitled accessible headings, because if you created headings that aren’t accessible, then all you really did was create crappy decoration, and that’s not what we’re here to do today.

So let’s begin. Now, listen, we can’t actually cover every accessibility every rule, every success criterion, but we can cover the practical basics about headings. There are more complete demos and code examples on atomica11y.com for design, web, iOS, and Android headings.

To make sure we’re talking about the same thing. Visually speaking, headings give structure to the page. So when I look at this coffee roast guide, if you ask me to explain the most important things in sections on this page, I’d say, well, the number one most important thing is that it’s coffee roast guide. And the number two most important pieces of content are about light roast, medium roast, medium dark roast, dark roast, etc. And beneath each of those sections is a third level of hierarchy that goes into each roast, like blonde roast, cinnamon roast, New England roast.

But here’s the thing you might not know about headings. They also structure the page programmatically. Headings utilize the heading tag. So the most important number one heading on the page will be the H1 tag. Each of The second level headings will be the H2 tag, and the third level of headings will be the H3 tag. The headings create a logical structure to the page. To create accessible headers, we must make sure we’re not creating barriers for people with disabilities. People with low vision are using their desktop device, they’re using their smartphones, but they may be adjusting the default font size on their device. They may be using a magnification tool or on a handheld device, pinching zooming to get a better look at content. To accommodate cognitive disabilities, we want to think about people who may have difficulty remembering information, handling complex online tasks, or may just need additional time to complete tasks. For people with motor disabilities, we’re talking about people who may not be able to use a mouse or tap on their screen or may not be able to do so with precision. They may be using a keyboard or may be using a Switch device, which is something like a game controller, or they may be using voice commands to control their device.When we’re talking about blindness, we’re talking about people who are using their desktop machine, they’re using a smartphone, but they’re using an application called a screen reader in combination with a keyboard or with a series of taps and swipes on their smartphone.

Beginning with low vision, we want to accommodate people who adjust the text size on their device. Text must be able to resize up to 200% with no loss of information. People who adjust their smartphone text size would say they don’t even have a disability. They’re just trying to make their device easier to read. Now, notice this is not the same as hitting Command or Control plus on your browser to zoom in. We’re talking about literally changing the default font size.

For people with low vision, we must follow the rules about minimum contrast ratios. Small text must have a 4.5 to one minimum contrast ratio. An optically large text must have a three to one minimum contrast ratio. Now, why do I say optically large text? Not every font is scaled the same way. Here’s a very simple example. You can see that 16 pixel Arial when compared to 16 pixel Garamond is much larger. In fact, the Garamond comes out to about the same size as 14 pixel Arial text. 24 pixel Garamond is sized more like 21 pixel Arial. Font scaling matters. All things being equal, text smaller than 24 pixels and normal weight must meet a 4.5 to 1 contrast ratio. Anything greater than or equal to 18 pixels and bold can have a 3 to 1 contrast ratio or text greater than or equal to 24 pixels, and normal weight can also have a 3 to one contrast ratio.

On your desktop browser, content must be able to zoom 400% without horizontal scrolling. If you look up the exact rules around this in the WCAG spec. It can be a little bit difficult to understand. Now, here’s the magical thing about that. If you are designing responsive mobile first, starting with 320 pixels as your mobile size, you’re covered here.

We want to left-align content. All people scan the page looking for the scent of what’s going to solve their problem. We begin by scanning our eyes along the left side of the page and moving left to right, looking for the information that we want. This is often called the F scanning pattern. If you’re unfamiliar with this, you really need to go look this up.

Centering content does not make you a design visionary. We are making tools that are supposed to help people find information and solve the problems they need to solve. You’re creating a website, not a concert poster. The reason why centering content is so bad for people with low vision is because some people use what’s called a magnifying tool. These applications zoom way, way in on the web page. So when they come to a page with centered content, it may just end up looking like this, and now they have to scroll left and right to determine what is on the page. Needless to say, this is a really frustrating process and doesn’t actually make the experience better for any user.

To help people with cognitive disabilities, we want to front load your headings with the most important details. So all of these headings have additional text that isn’t very helpful. In journalism, they have a saying, Don’t bury the lead. Let’s rewrite this a little bit and move the most important words to the beginning of these headings. There’s no additional text. The most important words are at the beginning of the headings, and it’s very easy to skim and scan and find what you need.

Let’s talk about design systems for a minute. It is crucial that you to separate style and token names from HTML semantics. Design is a system of communication to describe the user experience you want to happen in code. People are going to use that system to understand what your intent is, but people will misunderstand the system in every possible way. When you’re creating style names, don’t create style names that look like this, where you assign styles directly to heading tags. It leaves no opportunity to adjust the visual hierarchy of the heading tags. So you might say, I already know about this. Here’s the way I do it. I create a class called H1, and then we can assign it to any heading. The problem with this is that whenever a developer sees this class name being assigned to a visual text element, they will assign the heading level one tag to that element, whether it’s supposed to be a heading level one or not. Let’s look at what to do instead.

When we separate our style and token names from semantics, we can give them names that don’t relate to heading levels. Here’s one example of normal, medium, large, huge. You might say display, massive. You might give it some other nomenclature like Greek letters or the NATO alphabet of Alpha, Bravo, Charlie, Delta, Echo, and so on.

Let’s imagine that we’re creating a dashboard for our coffee company. The heading level one is letting us know that we’re on Charlie’s dashboard. That’s important information, but it’s not visually crucial to understanding the page, but it is helpful for someone using a screen reader. The next section of the page might be Charlie’s Favorite Coffees, and that’s great. We can make that our medium-sized text, but we also have featured roasts that we want to really, really push in the dashboard to get more sales. So we make that a little bit larger text, even though, hierarchically speaking, it is just as important as my favorites. And lastly, maybe we have a big animated text down below that isn’t a heading, it’s just fun text or some marketing effort that’s being made to make the page more interesting. You’ll notice that heading level two for my favorites and heading level two for featured rows are the same level of hierarchy, but they have different font styles, and that’s okay to do that.

For people using assistive technology, there’s a specific set of interactions we need to accommodate. For people using a keyboard, when they press the tab key, nothing happens because headings are not focusable. When they use the arrow keys, the the screen is browsed up and down, just like anybody scrolling with a mouse. For people using a screen reader, when they hit the tab key, again, nothing happens because headings are not focusable. Arrow keys move line by line through the page, but that’s different from focus. That’s simply browsing the content. People using a mobile screen reader will swipe left and right to read the content line by line. For people using a screen reader, they must hear the name and role of the heading, and it must to logically fit within the group of the entire page. The heading’s purpose and level must be clear. It must identify itself as a heading, and it should be logically ordered starting with that single heading level one with major sections titled by a heading level two and subsections with a heading level three.

For people using a keyboard, headings should not be focusable. You can see here the focus moves through the navigation to each focusable link, and then it falls all the way to the bottom of the page because headings are not focusable.That’s the way it’s supposed to be, and that’s okay.

Let’s listen to a screen reader navigate headings on a page. To begin with, I’m just going to let the screen reader read through the page.

Heading level one, coffee roast guide. Heading level two, light roasts. Heading level three, blonde roast. List four items. Black square flavor, mild, with hints of fruit and floral notes. Black square acidity, high. Black square body, light. Black square caffeine Heading level, higher than darker roasts. Heading level three, cinnamon roast.

Now, obviously, it gets a little tedious reading through every single thing line by line. Let’s use the shortcuts menu.

Heading’s menu. Two, medium roasts. Three, American roast. Three, city roast. Three, breakfast roast. Two, medium dark roasts. Three, full city roast. Three, Vienna roast. Two, dark roasts. Heading level two, dark roasts.

Now that I’m in the dark roast section that I’m looking for, now I just want to skip precisely by heading, again using shortcuts.

Heading level 3, French roast. Heading level 3, Espresso roast. Heading level 3, Italian roast.

Because the page is structured, logically according to heading levels, it’s easy to navigate the page by menu you or by shortcuts.

For people using a screen reader or for people who have difficulty reading, it’s important that we write headings that are clear before we’re trying to be clever. Let’s imagine for a minute that our coffee company wants to have some clever heading here about buying bulk coffee. Much to love and less to spend. While I will not begin to evaluate the poetic prose of this headline, it’s important to understand that this headline is not actually very descriptive of what’s going on here, nor is that call to action down below. For someone using a screen reader or someone who comes to this page and maybe doesn’t understand English as their first language, this is difficult to understand. Writing headings that get to the point and are clear is very, very important. Get 50% off your first bulk order is easy to understand and very navigable as a heading.

Sometimes we write headings that sound actionable, like shop bulk deals. For people using a screen reader, this feels like something they should be able to click on. There’s no reason why you can’t put a link inside of the heading Shop Bulk Deals. This increases the ability for everybody to understand that this is what they’re looking for, to click on it and not have to look for another secondary call to action to Shop Bulk Deals.

Let’s look at some reasons to break the rules. When is it okay to deviate and do something that’s not accessible? Well, maybe you saw Apple or Google do something. Listen, just because Apple and Google are big, successful companies doesn’t mean everything they do has people with disabilities in mind from the beginning. Maybe your manager thinks that an inaccessible pattern just looks cooler. Look, as a designer, as a developer, it’s your job and responsibility to advocate for the people using your product. Let’s do the right thing. Maybe people are telling you that we’re on a tight deadline and we don’t have time for accessibility. It doesn’t take any longer to write accessible headings than it does to write inaccessible headings. Or maybe your developers are telling you that it’s not possible to add proper heading structure into this website that you’re working on. That’s just nonsense. There are plenty of examples on atomica11y.com they can use to understand how headings work.

And that’s the end. Go forth and come back when you need help. You can always find code and examples on atomica11y.com for design, web, iOS, and Android. And if you’re building an enterprise accessibility program, thebookonaccessibility.com is for you. Thank you.