Ancestors

Toot

Written by Zoë Bijl on 2025-01-14 at 21:57

@AmeliaBR do you know if

is well supported for accessibility reasons? like if i chuck that in an anchor will that work as accname from content?

=> More informations about this toot | More toots from moiety@front-end.social

Descendants

Written by Amelia Bellamy-Royds on 2025-01-15 at 15:30

@moiety I think support for SVG title element as accessible name is pretty good now, but it's been a long time since I've looked at it myself.

The previous advice was to add aria-labelledby to make the relationship explicit, but I don't know if that's still necessary for any common browser/AT combos.

@hmig Do you have recent support info?

=> More informations about this toot | More toots from AmeliaBR@front-end.social

Written by Heather Migliorisi on 2025-01-15 at 15:49

@AmeliaBR @moiety - title works, but it must be the first child of it’s parent element. Also, I don't think role=img is needed anymore. I didn't encounter any issues when testing without it.

=> More informations about this toot | More toots from hmig@front-end.social

Written by Curtis Wilcox on 2025-01-19 at 17:51

@hmig

I recently I found that VoiceOver for iOS (18.2.1) didn't use for naming if the SVG didn't have role="img".

https://c.im/@cwilcox808/113851381972266612

I think adding role="img" is reasonable since it makes explicit that the SVG is to be experienced as a single thing instead of acting as a container for multiple things that can be individually experienced, navigated.

Carie Fisher's Accessible SVG Pattern Comparison is a useful reference.

https://codepen.io/cariefisher/full/QWpjded

@AmeliaBR @moiety

=> More informations about this toot | More toots from cwilcox808@c.im