Headings

Moving to headings. Headings are super important. So important that in the...

Headings are super important. They are so important that in the page structure tutorials,

they got their own page. And this is because many people use them for navigation,

but also to understand what's actually going on on the website. So what are headings? Headings

are basically summaries of what comes after them. So for example, here headings is the heading

of this page. So this is the rank level one heading, so the most important heading. And then

you go through and you go have headings level two, level three, level four. And just FYI, I use rank

and level interchangeably. They mean the same thing. I think ranks is a little bit easier to

understand. So I try to use that language. So basically, a rank one heading is the highest

rank and then you have second rank, third rank, fourth rank, fifth rank headings. And in HTML,

it goes down until heading rank six or heading level six. And that is basically how you want to,

to structure it. So if you have headings here, if heading ranks here, this would be in H2,

Then you have exceptions, which would be H3. Then this goes back one rank to be on the same rank as heading ranks.

So this would be an H2, this would be an H2, would be an H3 again

Help me, like here we have the table of contents and that is basically generated from those heading levels.

So as I have read them, H2, H3, H2, H2, H3, H

That jumps them directly to the first heading on the page.

And then they can press H more to go to the next headings.

And if it's nested nicely, it will be announced to them and they can get a better image of like the organization of the website, especially if it is like a complicated website.

Quickly look at the success criteria that apply to headings.

They're pretty simple, I think.

Just when you're using headings, you need to make sure that the headings and the labels, headings and labels is the success criterion we're talking about.

But now we're talking about headings first and foremost.

That headings and labels describe topic or purpose.

So it's not allowed to have a heading that just is big text and says like sale and then there's no sale information underneath it or there are no items for sale underneath it.

So it's not meant to mean big and, you know, with a lot of like big text and attention grabbing or something like that.

A heading is there to describe a section on the page, the topic or purpose of that section.

And the second one is section headings.

And this is a AAA success criterion.

And that basically says you need to use headings to organize the content.

You don't need to do that if you're only going to level AA.

And as you have seen, there is no requirement to have headings strictly adhering to a level.

But what I recommend and what you should be doing, no, this is the right page.

What you should be doing is making sure that when you go down from H1 to H2 to H3, that this is consistent and you don't jump around.

You don't go from H2 to H5 because that would mean that somewhere in there, like, order is lost.

But you can, when you go through, you go to H5 down.

You can then go up two levels to H3 because that basically just means, like, oh, you're not in that subsection of a subsection of a subsection.

And that's what I would recommend.

But if you're testing against WCAG, you don't need to be super strict about that.