Inclusive nested list nomenclature

The native HTML list nomenclature and a lack of punctuation are a barrier to some readers. A little CSS and JavaScript improves the inclusive experience.

Problem

The native HTML ordered list architecture is flexible and accessible. It also needs inclusive digital design, writing, and coding. It takes effort to create the best reading experience.

How to create an inclusive nested list experience

Follow these two steps to elevate your “accessible” nested list experience to an inclusive one:

1. Modify the nomenclature.
2. Add punctuation to list items.

1. Modify the nomenclature

A useable, understandable, and useful nested list nomenclature is essential to readability. HTML allows us to add custom nomenclature, which some systems will ignore. CSS allows us to overcome most limitations and JavaScript allows us to automate the code needed.

Why update the vanilla HTML?

Nested lists authored using a CMS or Markdown may not add the custom HTML attributes we need to present a meaningful list nomenclature. We need to add them manually.

By default, each nested list follows the same counter (or marker) strategy as its parent. Visually, each level is perceived with an increased left margin. Following the nomenclature depth with a screen reader can be more challenging. When our consumer copies and pastes the list into a document, its nomenclature goes with it, too. There’s every reason and use case to update our ordered lists and make them more inclusive.

Add the type="" attribute

We can modify nested list nomenclature using the type="a" and type="i" attributes. The nested list item marker (or counter) presentation is then updated to one of our choice. Mozilla’s developer website lists alternative list types. 

The visual readability of, and inclusive orientation to the nesting is improved.

By example, VoiceOver in Safari and Chrome then reads the alphabetical attributes as “a to z”, and the Roman numerals from “i, ii, iii” to infinity. Screen readers may announce the first Roman numeral as “eye”, even when the context is clearly for an ordered list marker. That’s a shame. Worse still, browsers like Firefox and some CMS don’t acknowledge the  the type="a" and type="i" counters at all.

<ol>
  <li>Ideation starts when I am inspired by an event or situation.
    <ol type="a">
	<li>When it is a good idea, I progress it to Design.</li>
	<li>If it's a crap idea, it stays in ideation for more work.</li>
	<li>If improved with more work, I progress it to Design.</li>
	<li>If it is really crap. I bin it.
          <ol type="i">
	    <li>Caution. Don't bin the bin yet!</li>
	    <li>Binned ideas may fit another purpose. Recycle!</li>
          </ol>
       </li>
    </ol>
</li>
<li>Design work generally starts with pen sketching.</li>
</ol>

An inconsistent experience

When enabled, the counter types of "a" and "i" are not interpreted consistently by all screen readers across devices and browsers. By example, in the following recipe list, VoiceOver can read the first list item as, “abanana”. It should read, “a banana” and doesn’t. It fails to emphasise the space between the nomenclature of “a” and the list content, “banana”. People using a screen reader need to use cognitive power to discriminate between the nomenclature and the list content.

In this blog’s environment, the counter types of "a" and "i" are ignored. The default digits will present instead. 

The default audible experience of the nested digits nomenclature may be easier to understand than “abanana”? Yes, and it’s not the most inclusive strategy. We only need to backup the type="" attribute with some CSS. Enter our list-style-type: CSS rule.

Backup the experience using CSS

For reasons of modernity, the added CSS list-style-type: rule is better supported than the HTML type="" attribute. VoiceOver is forced to pause for breath between reading the counter and the list item. For example, “abanana” becomes “a banana”. Other screen readers may not play nicely, so always test where you can.

<ol>
   <li>Parent list item:
        <ol type="a" style="list-style-type: lower-alpha;">
	<li>Banana</li>
	<li>Ice cream</li>
        </ol>
   </li>
</ol>

Improve the visual experience

Nested list nomenclature can introduce difficulties for some people. Reading may already be difficult and adding an alphabetical code of letters and Roman numerals won’t help.

As an aide to cognition, we can add contents or space to list items using CSS.

In the following example, we’ve added parentheses to the nomenclature, which may improve visual readability. You can use a similar strategy to match your own consumers’ preferences or an alternative nomenclature style. If not needed, then you can omit this technique from your code.

ol {
  counter-reset: list;
  margin-left:-1rem;
}
ol > li,
ol ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ".) ";
  counter-increment: list;
}
ol ol > li:before {
  content: counter(list,lower-roman) ".) ";
  counter-increment: list;
}

Automate the process

JavaScript can automate the updating of nomenclature in a nested list. The following example identifies the ol elements and insert the type="" attribute depending on the depth of the nest.

<script>
    document.querySelector("ol ol").setAttribute("type","a");
    document.querySelector("ol ol ol").setAttribute("type","i");
</script>

The updated list

1. Ideation starts when I am inspired by an event or situation.
   1. When it is a good idea, I progress it to Design.
   2. If it’s a crap idea, it stays in ideation for more work.
   3. If improved with more work, I progress it to Design.
   4. If it is really crap. I bin it.
      1. Caution. Don’t bin the bin yet!
      2. Binned ideas may fit another purpose. Recycle!
2. Design work generally starts with pen sketching.
   1. First, I choose appropriate characters from the library to match the scene.
   2. Then I develop the script into the three frames. It’s the hardest part.
   3. And then I develop the layout.
3. Using Adobe Illustrator:
   1. The design is refined as necessary.
   2. The strip is finalized.
4. When ready, I Publish the strip to whatever media it fits.

2. Add punctuation to list items

When we fail to terminate each list item with punctuation, a screen reader may announce the items without a pause between them.

Writing guidelines often omit punctuation from the end of list items. This is believed to remove visual clutter when visual readers can discern the obvious end and beginning of each indented item.

Some screen readers like VoiceOver for iOS don’t discriminate the end of one list item from the beginning of another. Terminating each list item with punctuation is then essential to understanding. Although periods are the ‘natural choice’ for authors to add at the close of each item, any punctuation is possible. Recall, a bulleted or ordered HTML list only updates an inline list with a semantic format.

A shopping list may be written as; butter, eggs, and milk. We usually present the list as an unordered list as follows:

• Butter
• Eggs
• Milk

Some screen readers may announce, “buttereggsmilk”. We can improve the audible experience using some punctuation. In the following example, we use a shorthand combination of grammatically correct Oxford commas and a period.

• Butter,
• Eggs,
• Milk.

When we believe punctuation is useful and best omitted from the visual presentation, then we can make the punctuation invisible. We do need control over our HTML and CSS to do this.

The following shopping list is punctuated and styled to meet our visual-biassed guidelines. This improves the audible experience for most screen readers and pleases editors by making it invisible (not hidden) using CSS. 

• Butter,
• Eggs,
• Milk.

We can automate this process too.

Add automatic punctuation

To automate the adding of punctuation to list items, we only need some basic if {} and else {} conditions assigned to JavaScript. For example, for each list item test and action the following conditions.

Tip: Do you like where the following Yes and No list items have no nomenclature? That’s so much easier to read, yes? Use CSS to achieve this with the list-style-type:none; rule. (This can be automated too!)

Demonstration video

The following video demonstrates the strategies listed in this Post. The screenreader is VoiceOver recorded in 2020. Visit my student project site at dieux.learningtoo.eu for how these list strategies help make cartoons and infographics more inclusive.

Summary

Writing lists on a web page and expecting everyone to read them equally is editorial folly. Inclusive digital writing always needs some effort to design and to engineer. All digital writers and engineers should understand this and deliver the best possible reading experience.

Everyone chant the following: WCAG compliance is not the measure of an inclusive content experience.

References

• • Bureau of Internet Accessibility. (October 20, 2022). Make Your Website More Accessible: Break Up Long Bullet Points. (Web log). Retrieved from https://www.boia.org/blog/make-your-website-more-accessible-break-up-long-bullet-points