You might have noticed my year and post lists are ordered lists. How did you notice that? Well, as part of my re-architecting of the site, I had basically no custom CSS. So those reversed ordered lists had the default list styles, which meant Arabic numerals.

How do we get rid of those numerals?

In my younger, more naïve days, I would have slapped a list-style: none; on that ol and be done.

But Safari will then remove the list semantics from the accessibility tree. They call it a feature.

There are a few ways to solve this problem. At first, I was going to use the approach put forth by Manuel Matuzovic:

ol {
	list-style-type: "";
}

This is a simple one-line CSS fix. In theory, this works perfectly. And it might work best for you. I initially chose it over the solution proposed by Scott O’Hara, wherein you add a role of list to the ol. My thought was: this requires changing the markup, why not go with a CSS-only approach?

The problem with that line of thinking was: I’m not going to apply Manuel’s technique to the bare ol selector. I will need to add a utility class, something like .unstyled (then have my selector be :where(ul, ol).unstyled).

Do you see the flaw in my pure CSS logic? Using a utility class means I have to update the markup. I might as well use role of list then.

Because then I can use this little snippet of CSS I learned from Andy Bell in his A (more) Modern CSS Reset post:

ul[role="list"],
ol[role="list"] {
	list-style: none;
}

Although with modern CSS, I simplified it a bit:

:where(ul, ol)[role="list"] {
	list-style: none;
}

What I like about this is you’re both fixing the Safari “feature” and making it clear in the markup that you know this is a list and should be presented as a list. And when you’re explicitly adding the role of list, that means you don’t want the styling that comes with a list normally. While we’re at it, I also want to remove that default padding in this situation, so the full snippet of code looks like this:

:where(ul, ol)[role="list"] {
	list-style: none;
	padding-inline-start: 0;
}

That’s it. Cheers.