The correct way to add separators in lists

Viewed 96

I’m adding a thematic break inside a unordered list and I’m wondering what is the correct way to do that that will keep the list accessible and semantically correct.

What I would like to do would look something like this:

<ul>
  <li>These</li>
  <li>Items</li>
  <li>Are of</li>
  <li>One kind</li>

  <hr />

  <li>But these</li>
  <li>Are of</li>
  <li>Another kind</li>
</ul>

However the <hr> element is not allowed as a child of <ul> even though it is semantically correct as a thematic break in the list items.

Another option would be to include the <hr> inside an extraneous <li>:

<li><hr /></li>

However that would be lying about the number of list items. I only have 7 items in the example above, but this would announce 8.

My third option would be to change the role of the <li> to separator:

<li role="separator"></li>

This both semantically correct and allowed in the spec, but I’m wondering if this is accessible. I.e. will assistive technology announce the correct number of items in the list and convey the thematic break among the list items.

1 Answers

Personally I would break it into 2 lists, perhaps with a surrounding one to keep them semantical related.

<ul>
  <li>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
  <li>
    <ul>
      <li>...</li>
      <li>...</li>
    </ul>
  </li>
</ul>
Related