Is it ok to use h1 and then h3 instead of h1 and then h2?

Question

I am doing an accessibility review on a site but I have never done that before. I read the WCAG 2.0 document which said that the headings have to be in logical order.

There is a page with h1s and then h3s, I am wondering if I need to ask the devs to change the h3s to h2s or is it unnecessarily literal? Because I believe the assistive technology will still read it in order, h1 and then h3, or am I missing something?

Cheers!

Answer 1

It's not the end of the world if you skip headings in this manner because users will most likely still find the content, but it does go against the general structure of the content and adds a bit of a barrier to users accessing using assistive technologies.

One way to look at it is to think of a trio of military chaps in a room; a General, a Sargent, and a Private. If the Sargent leaves the room does that mean all the hierarchy in the room stops making sense? No, the private still falls under the General. It just means his direct line of responsibility is broken - he'll still take orders from the General but would prefer if they came from his direct line of superiority.

So the page hierarchy is similar. Everything will mostly still work, but it'll be a bit more confusing and probably unnecessary.

Taking screenreader NVDA as an example there are several ways to read the content of the page.

1. Starting at the top of the page, selecting insert+down will start reading from the top right until it gets to the bottom (unless you stop, pause or anything like that).
2. Having started to read the page pressing the H key you will jump to the next heading in the markup, regardless of whether it's an H1, H2, H6...
3. Pressing 1 will jump you to the next H1 in the page markup, pressing 2 will jump to the next H2 in the markup, pressing 4 will jump you to the next H4... (You can also Shift+2 to jump backwards up the order to go to the previous H2).

Now for most of these situations having the headings out of order isn't really going to make much difference. However for the third option above this does make it a bit less clear where the content is if you've skipping elements in the heading order. (Bearing in mind that you can't know which navigation method people prefer to use with screenreaders - it's all down to personal preference at the time).

Take this example if you have an <H4> directly inside an <H2>:

• User jumps straight to the H2 pressing 2.
• They hear what that says 'Descriptions of Kittens in Jumpers` for instance, think "ooh, that sounds interesting, I'll dive further into this".
• They press 3 to jump to the next heading, but there isn't one so it responds there is no next H3 (or similar wording, I can't recall exactly what it says).
• "Oh", they think. "Perhaps there isn't any content here. But there must be, because the heading hintend there would be". So they have some options now.
  • Either just pressing insert+down to start reading from where they are (that H2),
  • They could press 2 to jump to the next H2 (therefore missing out on the H4 content)
  • they could try pressing 4 to see if there are any other headings there,
  • or just hit h to jump to the next heading...

So they still have options here, and they'll probably find the content in the H4 but that's the problem - they have to sit back and think about what their next step is, thus breaking their flow of concentration.

Perhaps a better option for you is to find out why the H3 is there instead of an H2. As with most things there's probably a reason for it. (If the styling of the H2 is too bold then create a new class for H2s in this situation, for example).