Search code examples
accessibilitywai-ariavoiceover

Screen Reader(VoiceOver in iOS) ignores `alt` if inside `label`

I have a radio button with 2 languages to select. When I test in VoiceOver on iPhone then alt attribute value is ignored and VoiceOver reads just 'image' without 'Deutsch':

<label for="lang-de">
  <img src="assets/imgs/sprache_deutsch_icon.svg" alt="Deutsch" />
</label>

As a workaround I tried to use aria-hidden attribute for image and absolutely positioned text inside label but then when user selects the text by double tap radio option is not selected like it did when user selected image:

<label for="lang-en">
  <span class="sr-only">English</span>
  <img src="assets/imgs/sprache_englisch_icon.svg" aria-hidden alt="English" />
 </label>

Is it expected behavior because label text suppresses the alt value or am I doing something wrong here?

Any advices would be appreciated, thank you.

Solution

  • That's an interesting case. It only appears to be an issue when the image is an SVG. It works fine for PNG and JPG. I hear the "interactive" and "bbc" labels but just "radio button" for the w3c logo.

    <input id="test1" type="radio" name="a">
<label for="test1">
  <img src="https://pbs.twimg.com/profile_images/378800000443220383/4e56ac181c96ad9997a47de74c1d2c6e_normal.png" alt="interactive">
</label>

<input id="test2" type="radio" name="a">
<label for="test2">
  <img src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" alt="w3c" width="50">
</label>

<input id="test3" type="radio" name="a">
<label for="test3">
  <img src="http://static.bbci.co.uk/wwhp/1.123.289/responsive/img/apple-touch/apple-touch-180.jpg" alt="bbc" width="50">
</label>

    A few things you can try, depending on if you have access to the SVG. (I haven't tried these)

    1. Add role="img" to the <svg> tag. That might trick VoiceOver into thinking it's more like a PNG or JPG.
    <svg role="img" ...>
    1. Add a <title> element to the <svg> with your alt text, such as:
    <svg ...>
  <title>Deutsch</title>
    1. In addition to the <title>, add aria-labelledby to the <svg> that points to the title (and add an ID to the <title>):
    <svg aria-labelledby="foo" ...>
  <title id="foo">Deutsch</title>
    1. Using an SVG is great because it scales well for low vision users if they have to magnify the font, but I suppose a last resort would be to convert your SVG to a PNG or JPG. It won't look as nice when you magnify it (unless you save it as a large image), but it's certainly another possibility.