ffoodd/a11y.css

Inline SVG <title> tag

Opened this issue · 1 comments

imliam commented

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

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!

  • 👍1