replace aria-label by title ?

[jonatjano]

As @btrem said in #471, the aria-label attribute (which is still invalid on SVGs according to the W3C validator) could be replace by a <title> element as first child of the <svg>.

here's some research I did on the subject :
According to this document from the w3c about svg accessibility, both aria-label and title are as good for accessibility purpose. (There is a TL;DR; in the green box at the end of the section)

The differences are :

1. when opening the svg as standalone, the <title> is recognised as the tab name on browser while aria-label doesn't.
2. when using the svg inline, the text inside the <title> is used as a tooltip for the svg.

The difference in size is 1 more byte for the <title>, there are currently 3 SVGs with a size of 1023 bytes where 1 additionnal byte makes it go past the 1kb limit, but they can be optimized :

• firefox has a line feed we can remove,
• minecraft use some complex transforms, I'm not sure if it is possible to simplify them, but I think it can be rewritten with using a scale(-1 1) for the symmetry
• samsung has an unused fill attribute on the <svg> element (every child as it's own fill)

[edent]

I wonder whether it makes sense to use the <desc> element?

It's shorter than <title> and doesn't force a tooltip. But I don't know how modern accessibility tools treat them.

[btrem]

the aria-label attribute (which is still invalid on SVGs according to the W3C validator)

FWIW, I think the validator is wrong. I can't find any reference that says aria attributes are not allowed on svg elements. Where the issue comes up, e.g., SVG Accessibility/ARIA roles for charts, it strongly suggests that these attributes are allowed. I'm searching through issues in both validators
https://validator.w3.org/
https://validator.w3.org/nu/
to see if this has been raised before.

[edent]

According to this article - https://www.deque.com/blog/creating-accessible-svgs/ - the <desc> element may not work reliably.

[btrem]

According to this article - https://www.deque.com/blog/creating-accessible-svgs/ - the <desc> element may not work reliably.

I read that as suggesting that <desc> does work. But it's not really appropriate here. The name of a service is not a description of its logo. A description of e.g. the Twitter icon would be "bird tweeting" or something like that. ISTM the issue should be what markup is correct -- taking into account accessibility -- not which element will pass an accessibility test with the fewest bytes.

[ryancdotorg]

Why not use id?

[btrem]

The id attribute is a document identifier (e.g., for an element), not a title for the document as a whole. From MDN docs:

web authors should not rely on [the id attribute] to convey human-readable information

[btrem]

IMHO: I think of aria-* attributes as a polyfill to add accessibility where there is no appropriate element. Unfortunately, I see it being used to replace obviously appropriate markup, or duplicating info for no apparent reason. In Creating Accessible SVGs (mentioned by @edent in #481 (comment)), the author includes as one possible pattern <img role="img">. What other role would img have?
I suspect this is a cargo cult phenomenon. Person A adds aria attributes without really understanding it, then person B sees person A's markup and thinks, "that the right way to do it." But it's not. From ARIA in HTML:

It is NOT RECOMMENDED for web developers to set the ARIA role and aria-* attributes to values that match the implicit ARIA semantics

I don't want to trash aria-label. On balance, <title> would be better, but we can't ignore accessibility. If aria-label works better for users, then by all means keep it. But if it is only equal to <title> then I think we should use the element.