Improve Accessibility support

[kaconant]

From an accessibility perspective, we need an alt attribute attached to the svg base element.

[zpao]

We explicitly pass all props we haven't defined ourselves down to the <svg> element (or <canvas> with QRCodeCanvas), alt included. The types should be loose enough that TypeScript doesn't complain.

#283 added support for title already for better compatibility with screen readers, since that couldn't just be passed through for SVG (it's fine for canvas). I don't have a complete understanding of the accessibility space, especially as it pertains to SVGs so if that's not enough, we should do more.

#283 hasn't shipped (sorry) but I'll try to get the next version out soon.

[kaconant]

Awesome, thank you so much for the update! I will stay tuned to see about the newest release - appreciate your help!

[kaconant]

Okay sorry, did some additional research and wanted to share!

Unfortunately, svgs do not inherently have alt attributes included: https://www.geeksforgeeks.org/svg-attribute-complete-reference/

Also, when reviewing http://web-accessibility.carnegiemuseums.org/code/svg/#:~:text=Including%20an%20SVG%20in%20an,for%20SVGs%20that%20are%20important!, it looks like including the alt attribute on the svg would be ideal from an accessibility perspective. And honestly probably the role="image" as well!

[zpao]

Thanks for continuing to look into it!

Ok, from those and a couple other sources (smashingmag, css-tricks), since we render an inline SVG, using <title> is the best thing. If we were using <img src="..."> then the alt attribute would be right.

role="img" should be added though - good call.

So I think if we transform this issue into a broader a11y focused issue and we add role="img" for SVG and anything else we might want for canvas, then we should be set.

[kaconant]

Yes, that makes sense to me! Let me know if I can do anything on my side to help - I appreciate you being interested in the fix! :)