Re: role="list", Safari and VoiceOver

Bernat,

For what it’s worth, I use role=“list” in these situations, and respectfully disagree with the reasons given by the Safari team to change the semantics. See https://developer.mozilla.org/en-US/docs/Web/CSS/list-style for a more complete explanation. I would ignore the validator warning. If you want the list semantics to be there in Safari, then it *is* necessary.

I’ll let someone else answer the other question.

Peter

> On Apr 27, 2022, at 3:43 AM, Bernat Lleonart <bernat.lleonart@proton.me> wrote:
> 
> Hi,
> 
> Some time ago I came across this blog post: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html and this tweet: https://twitter.com/rogerjohansson/status/1083600157076324352

> 
> Since then I'm adding role="list" to the lists that have list-style: none applied.
> 
> However, the w3c validator show a warning: "The list role is unnecessary for element ul."
> 
> In the web design agency I'm working I'm asked to produce error/warning free html code.
> 
> So my questions are:
> 
>  • Which CSS properties/values remove list semantics apart from list-style: none? For example: does display: flex remove list semantics?
> 	• What's your approach around this issue? Do you use role="list" on lists with list-style: none?
>  • Since O'Hara's post is from 2019, I wonder if VoiceOver/Safari approach is still the same.
> 
> Thanks.
> 
> --
> Bernat Lleonart
> 
> Enviat amb h ProtonMail correu segur.



--
Peter Weil
Web Developer
University Marketing, University of Wisconsin–Madison
608-220-3089

Received on Friday, 29 April 2022 15:33:22 UTC