HTML lists are boring. They don’t do much, so we don’t really think about them despite how widely used they are. And we’re still able to do the same things we’ve always done to customize them, like removing markers, reversing order, and making custom counters. Show There are, however, a few “newer” things — including dangers — to know when using lists. The dangers are mostly minor, but way more common than you might think. We’ll get to those, plus some new stuff we can do with lists, and even new ways to approach old solutions. To clarify, these are the HTML elements we’re talking about:
Ordered lists, unordered lists, and interactive lists contain list items ( 0) which are displayed according to what kind of list we’re dealing with. An ordered list (<ol> ) displays numbers next to list items. Unordered lists (<ul> ) and menu elements (<menu> ) displays bullet points next to list items. We call these “list markers” and they can even be styled using the ::marker pseudo-element. Description lists use description terms ( 4) and description details ( 5) instead of 0 and don’t have list markers. They‘re supposed to be used to display metadata and glossaries, but I can’t say I’ve ever seen them in the wild.CodePen Embed Fallback Let’s start off with the easy stuff — how to correctly (at least in my opinion) reset list styles. After that, we’ll take a look at a couple of accessibility issues before shining a light on the elusive Resetting list stylesBrowsers automatically apply their own User Agent styles to help with the visual structure of lists right out of the box. That can be great! But if we want to start with a blank slate free of styling opinions, then we have to reset those styles first. For example, we can remove the markers next to list items pretty easily. Nothing new here:
But modern CSS has new ways to help us target specific list instances. Let’s say we want to clear markers from all lists, except if those lists appear in long-form content, like an article. If we combine the powers of newer CSS pseudo-class functions 8 and 9, we can isolate those instances and allow the markers in those cases:
Why use 8 instead of 1? The specificity of 8 is always zero, whereas 1 takes the specificity of the most specific element in its list of selectors. So, using 8 is a less forceful way of overriding things and can be easily overridden itself.UA styles also apply padding to space a list item’s content from its marker. Again, that’s a pretty nice affordance right out of the box in some cases, but if we’re already removing the list markers like we did above, then we may as well wipe out that padding too. This is another case for 8:
OK, that’s going to prevent marker-less list items from appearing to float in space. But we sort of tossed out the baby with the bathwater and removed the padding in all instances, including the ones we previously isolated in an 6. So, now those lists with markers sorta hang off the edge of the content box.CodePen Embed Fallback Notice that UA styles apply an extra 7 to the <menu> element.So what we want to do is prevent the list markers from “hanging” outside the container. We can fix that with the 9 property:CodePen Embed Fallback Or not… maybe it comes down to stylistic preference? Newer accessibility concerns with listsUnfortunately, there are a couple of accessibility concerns when it comes to lists — even in these more modern times. One concern is a result of applying 0 as we did when resetting UA styles.In a nutshell, Safari read ordered and unordered lists styled with 1 as actual lists, like when navigating content with a screen reader. In other words, removing the markers also removes the list’s semantic meaning. The fix for this fix it to apply an ARIA 2 role on the list and a 3 role to the list items so screen readers will pick them up:
Oddly, rather than a bug. Basically, users would report that screen readers were announcing too many lists (because developers tend to overuse them), so now, only those with 4 are announced by screen readers, which actually isn’t that odd after all. Scott O’Hara has a detailed rundown of how it all went down.A second accessibility concern isn’t one of our own making (hooray!). So, you know how you’re supposed to add an 5 to 6 elements without headings? Well, it sometimes makes sense to do the same with a list that doesn’t contain a heading element that helps describe the list.
You absolutely don’t have to use either method. Using a heading or an ARIA label is just added context, not a requirement — be sure to test your websites with screen readers and do what offers the best user experience for the situation. In somewhat related news, Eric Bailey wrote up an excellent piece on why and how he considers 5 to be a code smell.Wait, <menu> is a list, too?OK, so, you’re likely wondering about all of the In the early days of the semantic web, I mistakenly believed that menus were like 0s before believing that they were for context menus (or “toolbars” as ) because that’s what early versions of the HTML spec said. (MDN has an interesting write-up on all of the deprecated stuff related to <menu> if you’re at all interested.)Today, however, this is the semantic way to use menus:
Personally, I think there are some good use-cases for Are menus absolutely necessary? No. Are they HTML landmarks? Definitely not. But they’re there if you enjoy fewer 4s and you feel like the component could use an 5 for additional context.Anything else?Yes, there’s also the aforementioned But let’s not end things on a negative note. Here’s a list of super cool things you can do with lists: |