search

ffoodd / a11y.css

This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site's quality by simply including it as an external stylesheet.
https://ffoodd.github.io/a11y.css
MIT License
1.48k stars 92 forks source link

Inline SVG <title> tag #378

Open imliam opened 4 years ago

imliam commented 4 years ago

According to MDN and other resources, if an <svg> element has a <title> tag as a first-level child, that will be used as a visually hidden but accessible description for the graphic.

Am I mistaken in the functionality of this tag, or should a11y.css be made aware of this behaviour? Currently, it reports an error - however my understanding is that the presence of a title tag means there is no need for an aria-label

"Missing [aria-label] and [aria-labelledby]"

ffoodd commented 4 years ago

You're kinda right here, <title> should be sufficient — however it's not: you can refer to Léonie Watson's "Accessible SVG" presentation.

Adding an ID to your <ttile> and referencing it on the SVG tag using aria-labelledby was required for Safari (at least on 2017).

Could be added to the reference links though — and I'll double-check if that's still needed :)

Thanks for the report!