Can an ordered list item contain a heading and is that accessible?

148 views Asked by At

My content creators want numbered headings for articles like "Top 10 tips"....

1. First tip name

blah blah

2. Second tip name

blah blah

But according to WCAG all numbered items should be in an ordered list. If I put them in an ordered list like this....

  1. First tip name

    blah blah

  2. Second tip name

    blah blah

Is it WCAG accessible to have headings inside list items? Apparently this messes with the document outline as the scope of the heading would include the start of the next list item? Does this mess up SEO of heading and sub-heading crawl too?

What's the best, most accessible and WCAG compliant way of handling this one?

1

There are 1 answers

0
slugolicious On

A list of headings is perfectly fine. It's semantic HTML that a screen reader will understand.

I definitely agree that if your headings look like a list, that is, they have numbers in front of them, then they needed to be coded as a list. That would satisfy WCAG 1.3.1 Info and Relationships

<ol>
  <li>
    <h2>First tip name</h2>
    blah blah
  </li>
  <li>
    <h2>Second tip name</h2>
    blah blah
  </li>
</ol>