A new way to remove list-styles in Safari without compromising accessibility
Earlier I've written about the implications that follow in Safari if you use list-style: none on lists. Here's an updated version of that.
The previous post in question.
After stumbling on an article from Manuel Matuzović about the same issue, ha gives a simpler solution to the problem:
Language:
css
/* The problem ❌ */
ul.some-list {
list-style: none; /* In Safari this removes the list's semantic meaning, which we do not want as assistive technology like screen readers won't tell users that they've encountered a list */
}
/* My solution ❌ */
ul.some-list ::marker {
font-size: 0;
}
/* Manuel's solution ✅ */
ul.some-list {
list-style-type: "";
}
His solution is easier to read, in my opinion. Mine feels like more of a hack, while his actually makes sense. The goal is to remove the default disc style, and an empty string reads well.
Bravo Manuel 👏