CODEWITHSUNDEEP
swiftswiftuiaccessibilityvoiceover
timbre timbre
timbre timbre

Reputation: 13996

How to control accessibility voiceover text for the SwiftUI Image

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?

Upvotes: 7

Views: 4004

Answers (5)

Arnold
Arnold

Reputation: 335

Use .accessibilityElement(children: .ignore) to strip away the image’s default traits and labels, then explicitly define your own(e.g. add "Image" in the accessibilityLabel if you want to keep the image trait):

Image(systemName: "checkmark")
    .resizable()
    .frame(width: 60, height: 60)
    .accessibilityElement(children: .ignore) // 🔑 Reset traits/labels
    .accessibilityLabel("Success, Image") // Your custom label

In this way, it will read "Success, Image".

Upvotes: 0

Alex Brown
Alex Brown

Reputation: 42912

Try using Labels instead of images:

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

Accessibility Voiceover will just read the label "equal", and not mention 'image'.

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

.labelStyle(.iconOnly)

You will note that 'accessibility' is not mentioned here; we are just using idiomatic SwiftUI; and yet it works just as well for accessibility as more complex answers.

Upvotes: 1

moudstar
moudstar

Reputation: 105

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

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

Upvotes: 1

Rukshan
Rukshan

Reputation: 8066

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.

Upvotes: 1

RTXGamer
RTXGamer

Reputation: 3750

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.

Upvotes: 6

Related Questions