Removing list-style on lists and the accessibility implications that follow

Safari ruins a well-known CSS snippet for everybody, but here’s how you can fix it

The problem

Let’s say you have a list of items, perhaps for a product page or something, like this:

<ul class="list">
  <li><article>Something</article></li>
  <li><article>Something else</article></li>
</ul>

Semantically it makes sense to put these items within an <ul> because it is, in fact, a list of content. For users who use screen readers this could be vital information.

As you’d imagine you don’t want the default styles for this <ul> to apply, with disc markers next to each item. Therefore you might go for this CSS solution in order to remove the list styling:

.list { 
  list-style: none
}

Familiar? Sadly, list-style removes a list’s semantic meaning in Safari(!)

And it’s not a bug.

As stated in MDN’s documentation for the list-style property:

Safari does not recognize ordered or unordered lists as lists in the accessibility tree if they have a list-style value of none, unless the list is nested within the <nav> navigation element. This behavior is intentional and is not considered a bug.

This means that we need to change the way we remove list styles in CSS.

The solution

Thankfully there are ways to remove these styles. In modern browsers lists (<ol>, <ul>) generate a selectable psuedo-element called ::marker. This element’s sole purpose is to apply styling to a list item’s marker box, meaning the value of it's list-style-type property.

• <ul> has a default of list-style-type: disc
• <ol> has a default of list-style-type: decimal

The type is not important, what’s important is that these are the elements we’re trying to get rid of: the markers.

So that’s what we’ll to: hide the marker, instead of removing the list-style.

Since it’s a selectable psuedo-element we can do this:

.list ::marker {
  font-size: 0;
}

Why font-size: 0 and not display: none? Well, the ::marker psuedo-element doesn’t work like normal HTML tags. It only supports a limited number of CSS properties, as stated in MDN’s documentation:

All font properties

The white-space property

color

text-combine-upright, unicode-bidi, and direction properties

The content property

All animation and transition properties

Therefore it’s easiest to just scale down the font size.

In conclusion

Safari does a weird little thing and changes a list’s semantic meaning depending on its list-style. Hiding the list’s ::marker instead is a simple workaround.