Screen-readers may not 'announce' lists if 'list-style: none' is used

[glenpike]

Thanks for all your good work on the Design System, it's been really useful!

We've been using it on our website and recent testing with a screen-reader (VoiceOver in Safari) has shown up a possible issue with the basic govuk-list class.

Basically, if we use this style, the reader doesn't announce the list like it would do for the bulleted list.

This article sums it up quite well and gives a possible solution: https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html

Is this something you would consider tweaking? Current workaround is to add role="list" to the <ul>

[timpaul]

Thanks @glenpike - we'll take a look at this issue as part of the 'Make further accessibility improvements #1385' epic.

[NickColley]

This also applies to components such as breadcrumbs, error summary (links), footer, header (navigation links).

[NickColley]

Had a go with the CSS suggested improvements, the zero width suggestion creates an unwanted visual spacing, the postCSS SVG image suggestion creates a bullet that can be navigated to using voiceover when pressing cmd + alt + down which doesnt seem right either.

I've had a look at adding the specific role attributes, I think this could be useful for the component templates but is probably not so pragmatic for the general lists as they don't tend to be templated.

I think my main thinking aligns with Scott's and Adrian's here:

While this behavior can be unwelcome in some situations, let’s also not spend too much effort over correcting an over correction which was in response to an over use of unnecessary semantics.

If we had evidence that this decision by VoiceOver was negatively impacting users I think we'd likely want to change things, but as is, this behaviour is consistent across all websites for VoiceOver users.

Welcome others thoughts here.

[hannalaakso]

Interesting, thanks for raising this @glenpike. I agree with @NickColley that it would be good to see some evidence of this being a problem for users. I'd possibly be wary of changing something with no evidence when that behaviour will then be different to the rest of the web as that also has the potential for confusing users.

[NickColley]

Alright let's close this for now, but this is a really good thread if we need to pick it up again in the future thanks a bunch @glenpike.

[joelanman]

reopening as a related issue came up in our audit

someone who tested this using a screen reader was confused. VoiceOver in Safari gives this output:

image allowed view logs image allowed view team members image not allowed add and remove team members

One of the key issues here I think is that sighted users can see a list - VoiceOver is not announcing a list or list members because of the issue discussed on this thread.

If we add role="list" then the list is announced, and each item is announced as for example "1 of 5". This might not be the full fix in our context, but I think its a big improvement and crucially gives screen reader users the same information as sighted users.

I think it would be worth adding role="list" to our list component/example code for this reason.