A similar question was asked here Hide text ONLY for screen readers recommendation was to use aria-hidden and this does not seem to work with images and SVG.
I have an SVG which is just a line, so I don’t want screen readers to read it. Right now a screen reader reads "image" when walking over that SVG.
I tried aria-hidden="true", role="presentation", style="speak:none;", tabindex="-1" and all together but none worked. I tested with Mac OSX 10.11.5 Voice Over, which would ALWAYS read out the word "image". Is there no way to hide decorative stuff from screen readers? How do you handle it?
<h2 class="copy works__title">
portfolio
<svg xmlns="http://www.w3.org/2000/svg" role="presentation" aria-hidden="true" class="zigzag--small">
<use role="presentation" xlink:href="assets/svg/sprite.svg#zigzag-small"></use>
</svg>
</h2>
All right so
• It seems to be a Firefox bug (46.0.1) with VoiceOver on Mac OSX 10.11.5
I’ve done a lot more tests: it seems that it might be impossible to suppress the reading of some elements in firefox (at least for VoiceOver on Mac) I’ve tried out several things and I was not able to hide images nor svg unless they are part of a stronger context as within an tag. But in normal context any image with all those fancy tags aria-hidden="true", role="presentation", style="speak:none;", tabindex="-1" and removing the alt tag or leaving the alt tag blank would have the VoiceOver read out "image" (even for svgs) – where a blind person might feel left out… However it is working in all other browsers… Shame on you FF :(
If anyone knows a solution/hack please correct me.