Accessible lists

Sunday, Aug 25, 2024
generic list

Alright, let’s talk about one of my favorite things - lists! For me, there are few things more satisfying than jotting down a list of tasks. Of course, actually doing those tasks is a whole other thing… 😅

On the web, lists are everywhere. There are ordered lists, where there’s a clear sequence or order of priority. There are also unordered lists, where you just have a related group of items, often under some sort of heading. The latter can easily sneak up on you when you’re building or designing an app. Generally, if you’re iterating over any array of data values, and creating similar-looking visual elements for each of those items, that might just be an unordered list! (or it could actually be a table, which is a whole other ballgame - but that’s for another day…)

Lists can be as simple and common as the navigation links at the top of a website, or as complex as a list of chat messages with profile images, reactions, status icons, etc.. While it might be clear to most users that a list of items belongs together structurally, it might not be clear to folks using screen readers or other assistive software. Because of this, when building an app on the web, we’ll want to ensure that we use semantic HTML elements to properly identify lists.

Fortunately, this is quite simple. We’ll want to make sure to use either the <ol> or <ul> element as a wrapper around the list, depending on whether this is an ordered or unordered list respectively. Then, we use the <li> element for each item in the list. You can put whatever you want inside those <li> elements (including more lists, for some list-ception!), but you’ll just want to make sure that the <li> elements are the direct children of the <ol> or <ul> parent element. This ensures that the list structure is properly recognized and announced by assistive software.

There are some default browser styles that come with these HTML list elements. Generally, something like this will clear out those default styles, and then you can customize from there. As always, be sure to test in different browsers and environments!

ul.my-list {
  margin: 0;
  padding: 0;
  list-style: none; /** or choose another built-in style */
}


ul.my-list > li {
  display: flex; /** or whichever display property you want for the items */
}

Then, the HTML would look like this:

<ul class="my-list">
  <li>
    <h2>Item 1 heading</h2>
    <div>Item 1 detail</div>
  </li>
  <li>
    <h2>Item 2 heading</h2>
    <div>Item 2 detail</div>
  </li>
</ul>

Again, the items themselves - the stuff inside each <li> - can be as complicated and intricate as you want, as long as that basic outer structure is there: parent <ul> or <ol> element and direct child <li> elements.

That’s it, folks! List away!!

Further Resources