Bart Veneman

Creator of Project Wallace, analytics for CSS. <noscript>-fanboy. Serverless clearfix engineer. I can lift node_modules twice my own weight.

role=list for lists without list-style

CSS trick.👇

`list-style` affects semantics in some screen readers. Use `role` to define that a ul/ol really is a list (even if it doesn't have bullet points).

When you now use role, the list-style is removed.🎉
Found in @piccalilli_'s Modern CSS Reset.

— Stefan Judis (@stefanjudis) January 5, 2021

Screenreaders may not see a list (<ol> or <ul>) when their list-style is set to none. Add role="list" to re-add that semantic.