webcomponents.org icon indicating copy to clipboard operation
webcomponents.org copied to clipboard

a11y: A note on screen reader semantics for the icons

Open tjsavage opened this issue 9 years ago • 0 comments

From an a11y audit of the frontend (vast majority of which was perfect!):

"For the most part, this looks good with a screen reader! I'm noticing a bit of inconsistency between Chrome and Safari on Mac with VoiceOver (I've only looked at this with Mac so far because I only have my Mac here today). On Chrome, VoiceOver handles the description of the icons really well: it doesn't speak "image" for the icons, but instead, when you get to an icon of the star for example, it speaks "15 user starred this repository, group". From there, I can drill down with the navigation and go inside the group, where I can access just the number 15. The image is hidden to the screen reader there.

In Safari though, it speaks "15 users starred this repository, group" but then the next step in navigation takes me to the icon where it just speaks "image", then I navigate forward and it speaks "15". Since it's not grouping them and burying them under the group, it'd be good if we could ensure there are proper labels on those icons so that if a screen reader does access them, that they can be spoken properly instead of just spoken as "image"."

tjsavage avatar Nov 04 '16 22:11 tjsavage