Accessibility
Making Headings and Lists More Accessible
with Clarissa Peterson, Strategy Director at Forum One
Learn how to make the headings and lists in your HTML documents more accessible for everyone in this tutorial.
Transcript
Making Headings and Lists More Accessible
with Clarissa Peterson
Clarissa Peterson: Headings and lists are two key parts of HTML that can be used to make content on a web page more accessible. In this tutorial, you’ll learn how to use heading levels to help screen reader users navigate a page, as well as the three types of HTML lists and the correct use case for each.
(Best Practice) Headings are very important to helping users navigate a web page — all users, not just those with disabilities. But while most people could figure out their way through a page without headings, a user with the screen reader may not be able to get through it at all. Each page should have a top-level heading, usually h1, that describes the page. This is usually similar to the title element for the page, but may be slightly different. For example, if our title element is About Fluffy’s Pet Shop, the h1 element that shows up on the page might be About Us.
<html>
<head>
<title>About Fluffy’s Pet Shop</title>
</head>
<body>
<h1>About Us</h1>
</body>
</html>
Most pages, unless they are very short, should have additional heading levels to break the page into sections. This helps screen reader users because they can scan through the headings to find the information they want.
<body>
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>
</body>
Screen Reader: heading level 1 — heading level 2 — heading level 3 — heading level 3.
Clarissa Peterson: Make sure to use the heading levels in order without skipping any. If your main heading is h1, the next level down should be h2. If you need additional sections within the h2, use an h3. Heading levels go all the way down to h6, but you will almost never need that many levels on one page.
(Best Practice) Subheadings within a page should, like titles, be descriptive and start with the most important or unique words. Screen reader users can tab quickly through all the headings on the page and often will hear only the first few words of a heading before deciding it’s not the right one and skipping to the next one.
For example, on my pet shop website, I may have a page called Pet Adoption. If each subheading started with the word “adopting” — Adopting Dogs, Adopting Cats — the reader user would have to hear the word “adopting” over and over again.
<h1>Pet Adoption</h1>
<h2>Adopting Dogs</h2>
<h2>Adopting Cats</h2>
<h2>Adopting Bunnies</h2>
Screen Reader: heading level 1 “Adopting Dogs” — heading level 2 “Adopting Cats” — heading level 2 “Adopting Bunnies”.
Clarissa Peterson: Better subheadings would be simply Dogs, Cats, Bunnies, all under a higher level heading of Adoption. This helps the screen reader users, but it also makes it easier and faster for sighted users to skim through the page and find what they need.
<h1>Pet Adoption</h1>
<h2>Dogs</h2>
<h2>Cats</h2>
<h2>Bunnies</h2>
Screen Reader: heading level 1 “Pet Adoption” — heading level 2 “Dogs” — heading level 2 “Cats” — heading level 2 “Bunnies”.
Clarissa Peterson: (Best Practice) Also make sure the supplementary sections of the page, like sidebars, have headings. For example, related links.
Screen Reader: heading level 2 “African Spurred Tortoise” — heading level 2 “American Alligator” — heading level 2 “Related Links” — You are currently on a heading level 2.
Clarissa Peterson: (Big Idea) Lists are also pretty important for screen reader users, as it makes it easier to skim than if it were just a big block of text.
Screen Reader: list five items — list four items — list four item — You are currently on a list inside of web content. list four items — white bullet “Capybara” — white bullet “Cheetah” — white bullet “Collared Peccary” — white bullet “Common Eland” — You are currently on a text element.
Clarissa Peterson: There are three different types of list in HTML — ordered, unordered, and description lists. Ordered lists are the ones where the list items are numbered 1, 2, 3, A, B, C, or whatever. Use this only when the order of the list items matters, such as in an instructions list on a recipe as you see here.
<h2>Recipe Steps</h2>
<ol>
<li>Combine the dry ingredients.</li>
<li>Add eggs, milk, and butter.</li>
<li>Pour into a 9×12 baking pan.</li>
</ol>
On the page, you’ll see steps 1, 2, and 3. You don’t have to enter the numbers.
Recipe Steps 1. Combine the dry ingredients. 2. Add eggs, milk, and butter. 3. Pour into a 9×12 baking pan.
Unordered lists are often called bulleted lists. Use an unordered list if the order doesn’t matter, like you see here.
<h2>Pets available for adoption</h2>
<ul>
<li>Bunnies</li>
<li>Cats</li>
<li>Dogs</li>
</ul>
or…
<h2>Pets available for adoption</h2>
<ul>
<li>Cats</li>
<li>Dogs</li>
<li>Bunnies</li>
</ul>
The default formatting in the browser looks like this, but you can change it however you want using CSS.
Pets available for adoption • Cats • Dogs • Bunnies
Definition lists, sometimes called description lists, are a little bit different and many web developers don’t realize when they should be using them. Use this type of list when you have two parts to each list item, the item and a description. Here, the first item is Hawaiian Pizza, and a description, Ham and pineapple. Each list item has two sections — dt for the definition term, the letter “t”, and dd for the definition description.
<h2>Pizza Options</h2>
<dl>
<dt>Hawaiian Pizza</dt>
<dd>Ham and pineapple</dd>
<dt>Canadian Pizza</dt>
<dd>Pepperoni, bacon, and mushrooms</dd>
</dl>
The default formatting in the browser looks like this, but you can change it however you want using CSS.
Pizza Options
Hawaiian Pizza
Ham and pineapple
Canadian Pizza
Pepperoni, bacon, and mushrooms
For more tips, check out our Resources for links to articles and other tutorials that can help you expand on the concepts we’ve covered here. Thanks so much for watching. Don’t forget to check out the other Take 5 videos, as well as the entire course catalog here at Gymnasium.
