How to apply accessible header styles

How to apply accessible header styles

Applying header styles in the correct order is an accessibility conformance requirement. This means you should always apply headings and in order as you enter your content.
Heading order

Watch this video on where to find your header styles and how to apply them to your section or page block headers.



Transcript:

0:02 Hi everyone. In this video we're going to be talking about why heading order is so important on a page. So let's start there with that question.

0:10 Why is heading order so important? Well basically it kind of just boils down to accessibility and mainly for people who are using screen readers.

0:22 So screen readers, what they'll do is they know how to navigate a page based on heading order. And if headings are out of order, then that content can't be interpreted the way that the author of the content intends it to be.

0:39 So, you know, it's kind of like if you're reading a book that has, you know, missing pages or the pages around of order, it can get super jumbled and super confusing.

0:48 To illustrate this on your page, let's take a look here at this example page that I have. 

0:54 So you only need one H1 on your page, which is basically going to be your page title right here.

1:00 So for mine it's Lauren's Test Page, and then underneath here this welcome to Nashville I know is in H2.

1:07 So it's following this kind of sequential order of H 1, followed by H 2 3, 4, 5, all the way down to 6.

1:14 And I'm gonna show you on the back end here how I know that this is flowing the right way. So if I go up to the top here in this hero box your title, this, it's automatically formatted to be an H1, so you don't have to worry about that.

1:32 On the front end, if we scroll down here, I know this is an H2 because I have this selected here in our dropdown and our heading dropdown, and this is where you can select all of your headings when you're entering content is this heading box here.

1:46 And to kind of further illustrate how we can nest different like H3s and H2s I'm gonna use the columns card block for that cuz that one that's where it comes up.

1:59 Probably the most often when you're entering content. So I have my example doc here. I am going to copy this content here, go back here, and then I'm gonna paste as plain text.

2:13 You can see my other video on why that's important. So again, I'm gonna make this my H2 and for flair, you know what, I'm gonna make that some intro text.

2:24 Okay, so now for my card, so because I used my H2 up here, that means the content and these two cards have to be H3s.

2:31 So I'm just going to, for brevity, I'll just use a couple different examples instead of doing all of them kind of format that guy here.

2:44 So now I'm gonna make that an H3. Beautiful. Go back to my doc, we'll do this to the food one.

2:54 Copy paste this plain text, move 

2:59 That around paragraph each three. Awesome. So let's update that and let's see what that looks like when you refresh. So there you go.

3:13 So again, doesn't look very pretty, but we have our H2, another H2, and then these are your H3s.

3:22 And then when you start a new section, if you have nothing else to add you just, sorry, start over with another H2.