0

One of the wcag 2.0 rules is that heading elements, i.e. h1/h2/h3/etc., should indicate document structure. This means that you can't skip a level, e.g.:

<h1>main heading</h1>
...
<h3>subheading</h3>

is not valid since there is no h2 element between h1 and h3. This is valid (according to http://achecker.ca/checker/index.php), even though the h2 is inside a section element:

<h1>Structure test: h1</h1>
<section>
  <h2>section heading: h2</h2>
</section>
<h3>2nd sub-sub-heading: h3</h3>

the following example is invalid because the last h3 follows an h1:

<h1>Structure test: h1</h1>
<h2>sub-heading: h2</h2>
<h3>sub-sub-heading: h3</h3>
<section>
  <h1>section heading: h1</h1>
</section>
<h3>2nd sub-sub-heading: h3</h3>

I'm writing javascript that will add content containing heading elements, and I'm wondering how I should select heading elements (which level) I should use so I don't invalidate the document?

thebjorn
  • 26,297
  • 11
  • 96
  • 138

1 Answers1

2

In HTML5, you can use h1 elements inside section elements to define your structure:

<section>
    <h1>Blah</h1>
    <p>Asdf asdf...</p>
    <section>
        <h1>Bleh</h1>
        <p>Asdf again...</p>
    </section>
</section>
<section>
    <h1>Another header</h1>
    <p>Qwerty...</p>
</section>

It is harder to apply styles to it (because you would need to rely on classes or a mess of section>section>h1 CSS selectors), but I think is the easiest way to solve your problem.

Tae
  • 1,665
  • 5
  • 24
  • 45
  • Doesn't work. Even if I enclose the last example in section tags, it doesn't validate. – thebjorn Nov 30 '13 at 23:31
  • 1
    I don't know what's the algorithm of that validator, maybe it's to old? The only up to date validator of HTML5 that I know is http://html5.validator.nu/ And, if you want to be sure the code is accessible, you should try it on real software. By the way, now I remember that, as for the spec, it's perfect valid to have something like

    .     – Tae Nov 30 '13 at 23:42
  • I think html5.validator.nu is an html validator, not a wcag validator... (it validates my first example too). – thebjorn Nov 30 '13 at 23:59
  • @thebjorn Tae's example validates perfectly for me at the achecker.ca validator (once the right HTML5 boilerplate is added). – Zero Piraeus Dec 01 '13 at 00:19
  • @ZeroPiraeus well, yes, but his example doesn't have any headings that are out of order (they're all h1). My third example does not validate, even if I wrap it in a section element (but maybe I'm misunderstanding something..?) – thebjorn Dec 01 '13 at 00:44
  • 1
    The HTML5 algorithm understands that section > h1 is a header with more hierarchy that section > section > h1. Read this: http://coding.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/ My point about the validator you are using is that maybe maybe it is out of date, so it doesn't understand what to do with the sectioning. – Tae Dec 01 '13 at 00:55
  • 1
    @thebjorn I believe the implication of her answer is that you're going to have fewer headaches if you *either* use `h1` - `h6` *or* use `h1` elements inside `section` elements, rather than mixing them. That said, there's nothing wrong with your code - if either the validator or WCAG itself say otherwise, they're wrong (or, more charitably, haven't caught up with modern best practice). – Zero Piraeus Dec 01 '13 at 00:58
  • Ah, ok. I tried the TotalValidator plugin for Firefox, and it validates :-) wcag 2.0 seems to be from 2008, so I wouldn't be surprised if it isn't up-to-date with modern best practices ;-) – thebjorn Dec 01 '13 at 01:03