meta_pixel
Tapesearch Logo
Log in
Syntax - Tasty Web Development Treats

674: A11y Treats - Heading Design

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.91.2K Ratings

🗓️ 2 October 2023

⏱️ 28 minutes

🧾️ Download transcript

Summary

In this Hasty Treat, Scott and Wes talk about headings on your website, why you should care, how to structure your headings, and what tooling is there for testing your website? Show Notes 00:26 Welcome 01:21 Syntax Brought to you by Sentry 01:41 Why do we care about Headings? How-to: Accessible heading structure - The A11Y Project 03:12 Heading design provides an outline for your website 08:45 Using H1 classes? 10:28 Is the logo an H1? 13:03 Giving an ARIA level 17:14 Can headings be visually hidden? 21:00 Benefits of good heading design 22:27 Tooling Heading outlines - ADG HTML Standard Polypane, The browser for ambitious web developers HeadingsMap - Chrome Web Store HeadingsMap – Get this Extension for 🦊 Firefox (en-US) Tweet us your tasty treats Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets Wes Bos on Bluesky Scott on Bluesky Syntax on Bluesky

Transcript

Click on a timestamp to play from that location

0:00.0

Monday. Monday. Day. Open wide dev fans. Get ready to stuff your face with Javascript CSS.

0:08.2

Node modules. Barbecue tips. Get workflow. Break dancing. Soft skills. Web development.

0:12.8

The hastiest. The Carrazius. The tastiest. Web development treats. Coming in hot.

0:18.4

Here is Wes Barakuda. Boss. And Scott El Torro Lugo. Tolinsky.

0:26.0

Oh, welcome to syntax on this Monday hasty treat. We're going to be talking about

0:31.4

headings and HTML. That's right. H1 through H6. They might be the first

0:37.3

element you learned, but they are more interesting than many people give them credit. And

0:43.3

perhaps they're one of those things that a lot of people get wrong. So we're going to be talking

0:46.8

all about common issues that you might face. We're going to be talking about do's and don'ts.

0:52.3

We're going to be talking about why you need good heading structure with the benefit is and then

0:57.2

perhaps some tools to help you along there and some further reading. My name is Scott Tolinsky.

1:01.5

I'm a developer from Denver. With me as always is Wes Boss. What's up, Wes? Not too much.

1:07.0

Just got done recording a really good one with Chris Lattner. So I'm buzzing on that one. That was

1:13.0

awesome. Yeah. I'm straight up. It's B movie over here. I'm buzzing like crazy. I'm feeling it.

1:19.9

That was a great episode. You know, if you want to be buzzing like the B movie,

1:23.6

you might want error handling and exception tracking in your application. So you'll want to check

1:28.9

out sentry.io forward slash syntax. And you can sign up for sentry and you can get all

1:36.0

elected stuff in your application because this podcast is presented by sentry. All right. Let's

1:40.4

get into it. So we're going to be talking all about heading design and websites and how you do it.

1:46.7

But first and most important, and we'll get into this in greater detail after we learn some

1:51.5

of the facts is why? What do we even care about the stuff? And the big reason is for two things.

1:57.1

One, accessibility. Headings are extremely important for screen readers specifically in accessibility.

...

Please login to see the full transcript.

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.

Copyright © Tapesearch 2026.