4 ms·
The article mentions it, but I've never known whether svg <title> attributes were screen-reader accessible, which is why I've always gone the poor-man's route a
by bmelton 4y ago
The article mentions it, but I've never known whether svg <title> attributes were screen-reader accessible, which is why I've always gone the poor-man's route and created a component (React or Web, depending on the project) that just swapped the color prop on an Image tag.
It generally works fine, despite the extra work, but I've always hated the extra work for being slightly more stupid than I want to put my name to.
- extra88 4y agoYes, for inline SVGs, putting its text alternative in its <title> element is well-supported. See Pattern #5 in this excellent article [0] by Carie Fisher. That's a separate issue from ensuring an inline SVG is still visible regardless of a site's dark or light mode or visible when a user uses their device's Contrast theme (aka `forced-color`). [0] https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/ https://www.smashingmagazine.com/2021/05/accessible-svg-patt...
- bmelton 4y agoThank you