VoiceOver reads the title of external SVGs even if the alt text is empty

For accessibility reasons every image on a page should have an alt attribute with a description of the image or, for decorative images, with an empty value. Images with an empty alt text will be ignored by screen readers.

However, there is one exception. If the src attribute points to an SVG file that has a title tag, VoiceOver (on macOS and iOS) will read the title and not ignore the image.

<img src="circle.svg" alt="" />

<!-- /circle.svg -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
  <circle cx="5" cy="5" r="5">
    <!-- SVG image with a title tag -->
    <title>Circle</title>
  </circle>
</svg>

In the example above VoiceOver will read "Circle, image", while other screen readers like NVDA will ignore the image.

SVG files generated via design tools like Sketch often include a title. The title may be useless (like a description of a decorative icon) or even absolute nonsense (like an auto-generated UUID) and could also be in the wrong language, resulting in a confusing experience for screen reader users.

Either make sure that your images don't include a title tag or use the aria-hidden attribute to hide the image:

<img src="circle.svg" alt="" aria-hidden="true" />