Removing list styles without affecting semantics.

posted on

Some people, I guess primarily developers and not actual users, don’t like the fact that Safari removes list semantics of lists that don’t look like lists (list-style: none). Scott O’Hara provided a fix in “Fixing” Lists, where he suggests setting role="list" explicitly on the list to re-add list semantics. 

<ul style="list-style: none" role="list">
  <li>…</li>
</ul>

That works, but I found a way of removing list styles without affecting semantics.

I learned in my post (lol) “Here’s what I didn’t know about list-style-type” that you can use a string as the value of the list-style-type property.

Yesterday, I tried setting it to an empty string, and voilà, list style gone, semantics kept.

ul {
  list-style-type: "";
}
  • A
  • B
  • C

This “solution” probably needs thorough testing, but I get the same results as with the role solution in the following screen readers and browsers:

Here's an open Codepen and a debug version you can use for testing.