Making stylish lists accessible

You know those HTML lists with the plain look and that little dot as a default bullet point? Sure, they’re not that bad, but we often use this CSS snippet to get a clean slate when we want to style our lists.

ul {
  list-style: none;
}

But did you know that by doing this, you also remove the semantic meaning of the list in older versions of Safari? The list will no longer be detected as a list in the accessibility tree. But don’t worry, we have a solution, role to the rescue!

<ul role="list">
  <li></li>
  <li></li>
</ul>

With the help of ‘role’ we can style our lists however we want without losing support for assistive technologies. Simple!