CODEWITHSUNDEEP
javascripthtmlwcag2.0
thebjorn
thebjorn

Reputation: 27351

How to achieve hierarchical heading organization when dynamically creating html?

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?

Upvotes: 0

Views: 443

Answers (1)

Tae
Tae

Reputation: 1695

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.

Upvotes: 2

Related Questions