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.