3

For the SwiftUI Image element, the voiceover template is seems "accessibility label - image - image name", e.g. for

var body: some View {
        Image(systemName: "equal")
            .accessibilityLabel("my label")
    }

I am getting voiceover response "my label image equal".

Is it possible for voiceover to only say "my label", and not pronounce the "image equal" part?

XLE_22
  • 5,124
  • 3
  • 21
  • 72
timbre timbre
  • 12,648
  • 10
  • 46
  • 77

4 Answers4

3

Once the element gets the focus, the default trait(link, button, label, etc) will be played after accessibilityLabel text. That's the reason it reads out as "my label -> image"

To add or remove the default trait following methods can be used :

  • .accessibilityAddTraits
  • .accessibilityRemoveTraits

Example

To recognize an image as a button:

Add .isButton trait and remove the .isImage trait, now VoiceOver can read the description of Image as "my label -> button"

struct ContentView: View {
    var body: some View {
        Image(systemName: "equal")
            .accessibilityLabel("my label")
            .accessibilityAddTraits(.isButton)
            .accessibilityRemoveTraits(.isImage)
    }
}

As an element can have multiple traits, remove the ones you don't want the voiceover to read.

RTXGamer
  • 3,215
  • 6
  • 20
  • 29
1

Try using Labels instead of images:

Label("My Label", systemImage: "equal")

Accessibility Voiceover will just read the label.

You can control what appears onscreen using the .labelStyle modifier: e.g.

.labelStyle(.iconOnly)
Alex Brown
  • 41,819
  • 10
  • 94
  • 108
0

If your image is not used as a button and still want to accomplish this use,

Image(decorative: "equal")

This will stop the VoiceOver from reading the image name. And you can add or remove other traits as necessary.

Rukshan
  • 7,902
  • 6
  • 43
  • 61
  • decorative is a good choice for named assets, but in this case the OP has a systemImage (ie a SF Symbol). Those need different handling. To achieve the effect of removing the image entirely from VoiceOver, you can add the modifier .accessibility(hidden: true) to the Image – Alex Brown Jul 03 '23 at 04:23
  • Once you add decorative to any image, this will not allow VoiceOver to focus on this element, no matter what modifiers you add to this after – moudstar Jul 17 '23 at 18:36
0

To have an image announce its accessibility label only, you can do this:

Image("equal").accessibilityLabel(Text("my label")) .accessibilityRemoveTraits(.isImage)

moudstar
  • 85
  • 2
  • 10