Home → The Classics → Farai's Codelab

list-style:none Removes Semantics From Lists

Published: Updated:

People use lists a lot. One of the main uses is for site navigation, like this:

<nav>
    <ul>
        <li>Home</li>
        <li>Posts</li>
        <li>Projects</li>
        <li>TIL</li>
    </ul>
</nav>

As a list, it comes with a bullet and padding which can be removed with CSS:

nav ul {
    padding-left: 0;
    list-style-type: none;
}

Turns out screen-readers won’t pick it up (in WebKit anyway) as a list because some screenreader users find them noisy.

But I Really Want Screen Reader Users To Pick Up The List

Sure, add role=list to the list. There were other things you could do, like add an li:before with content: '\200B';, but that doesn’t work in WebKit anymore.

Then again, it’s not necessarily about what you want but the needs of your screen-reader users. Test with them and see what they prefer.

Why Is CSS Messing With Semantics?

Read Adrian Roselli explains why it makes sense to consider CSS in infering semantics. Main idea is why wouldn’t it? The article itself goes into a similar case where adding display flex or grid to table items removes table semantics as browsers assume it’s presentational.

What I’ll Do Knowing This

I used this pattern a lot, and I think I’ll still use it. It looks nicer without CSS and given it won’t show up in WebKit, they wouldn’t notice it.

More Reading