Does anyone have any thoughts or opinions on what I should do in this situation?
The only issue I have about putting a <title></title> element attached to the SVG is that I donât want tooltips to be enabled.
1.) I can either use a <desc>/desc> element instead.
2.) I can use a <title></title> element along with pointer-events: none; so the tooltips donât show.
I can use a <title></title> empty element, which I donât think youâre able to do, cause I donât think that would work the same way as alt="" does with images cause they are two different things.
3.) or I could just not include anything.
The SVG is purely decorative.
When an image is purely decorative, it doesnât get a title="" attribute.
If it were an interactive image, then it would get one.
If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.
If an SVG image is purely decorative, do not include a title or description. The SVG element should additional be identified as presentational using the ARIA role attribute.
All significant graphical components within the SVG image should contain their own title and/or description to improve the overall accessibility of the image.
As much as designers and graphics people may disagree with that word choice, a decorative image and CSS styling are not considered âsignificantâ.
What is considered significant are interactive and informational content. Those things that without, the page would lessen the user experience.
When pages use images, color, or styles to convey meaning that might be obvious and easily understood by abled visitors, if accessibility is not considered some visitors will have problems with the page.
So, you may not want a tooltip for âbackground picture of beachâ, but you should have them for a âsearchâ icon or a âplay musicâ button if there is no text next to them indicating what they are.
Furthermore, now Iâm confused after reading this.
If the SVG is purely decorative, you donât have to do anything
If the SVG element is being used decoratively - a gradient or background pattern, for example - there is no need to provide , or alt. (If you want your page to validate, you should include alt for linked SVGs but set the value of the attribute to âemptyâ for purely decorative elements: i.e. alt=ââ or simply alt).
It canât hurt to add aria-hidden=true to an SVG you feel is totally decorative and donât want screen reading software to accidentally a verb where you donât mean people to hear any text.
But itâs more necessary for icon fonts, only because those tend to put a character (for the font) as text on the page (usually using CSS content properties, which btw are not exposed in IE but are in pretty much every other current browser). If that character is a normal (ascii) character, or a Unicode char with a ânameâ then that could get read out loud and normally you donât want that, so aria-hidden=âtrueâ on that icon font will help avoid that.
SVGs are a whole other bucket-- whether whateverâs in the tag gets read out or not seems to be per-browser more than anything. According to spec both title and desc should get read out (as the SVG or groupâs ânameâ and âdescriptionâ respectively) but in some browsers you need to hack around with aria-labellebdy to get things read out loud and I have found in FF+JAWS that no matter what, nothing is read out at all.
