Skip to main content

How to use decorative images to reduce screen reader clutter

About 2 minSwiftSwiftUIArticle(s)bloghackingwithswift.comcrashcourseswiftswiftuixcodeappstore

How to use decorative images to reduce screen reader clutter 관련

SwiftUI by Example

Back to Home

How to use decorative images to reduce screen reader clutter | SwiftUI by Example

How to use decorative images to reduce screen reader clutter

Updated for Xcode 15

SwiftUI automatically uses the names of your images for screen reader labels, which is helpful if you have image names like “Photo of Paul Hudson” or “Hacking with Swift logo.” However, some images aren’t meant to be read because they are merely decorative – they don’t convey information that isn’t already elsewhere on the screen, or are instead just there to make the user interface look more attractive.

If you create these images using something like Image("star") the screen reader will read them out as part of its standard UI pass. A better idea is to create them using using the Image(decorative:) initializer, which tells SwiftUI the image shouldn’t be exposed to the screen reader:

Image(decorative: "star")

Once you’ve built your user interface it’s worth doing a final check over using VoiceOver to make sure you have marked your images correctly – the last thing you want is the screen reader speaking out weird internal filenames that you thought were only used in your code!

Similar solutions…
How to reduce animations when requested | SwiftUI by Example

How to reduce animations when requested
How to detect the Reduce Motion accessibility setting | SwiftUI by Example

How to detect the Reduce Motion accessibility setting
Displaying a detail screen with NavigationLink | SwiftUI by Example

Displaying a detail screen with NavigationLink
How to present a full screen modal view using fullScreenCover() | SwiftUI by Example

How to present a full screen modal view using fullScreenCover()
How to disable the overlay color for images inside Button and NavigationLink | SwiftUI by Example

How to disable the overlay color for images inside Button and NavigationLink

이찬희 (MarkiiimarK)
Never Stop Learning.