This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
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:
- VO with Safari on iOS 15.7.7
- Talkback with Chrome 118 on Android 13
- VO with Safari 16.5.2 on macOS 13.4.1
- NVDA 2023.2 with Firefox 119 (NVDA even announces “bullet”)
- JAWS 2023.2307.37 with Chrome 119 on Windows 11
- Narrator with Edge 119 on Windows 11
Here's an open Codepen and a debug version you can use for testing.
My blog doesn't support comments yet, but you can reply via blog@matuzo.at.
This content originally appeared on Manuel Matuzović - Blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2023-11-06T00:00:00+00:00) Removing list styles without affecting semantics.. Retrieved from https://www.scien.cx/2023/11/06/removing-list-styles-without-affecting-semantics/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.