Accessibility Code Snippets in SwiftUI: SF Symbols

Photo by Przemyslaw Marczynski on Unsplash

I’ve been using SwiftUI for a while and recently worked on a watchOS app where I also tried to make it accessible.

When I first started on the app, I forgot to add accessibility labels for the system images, and I found it later while auditing it in the Accessibility Inspector.

SwiftUI doesn’t provide any initializer for Image to have the label as a parameter nor something to ignore it for accessibility purposes. So let’s create one!

SF Symbols with Accessibility Label

I wasn’t sure what to name my custom view because AccessibilityImage seemed too long, while A11YImage didn’t sound ideal. So I decided to term it AYImage instead.

The variables required for this view would be the name, accessibility label, and a boolean value if it would be hidden or not.

For creating a labeled system symbol image, I require an initializer that takes the name of the symbol as well as the accessibility label associated with it.

I only need to have the name of the symbol as the parameter for the initializer. This helps to hide the image for better accessibility in a few cases.

The accessibility APIs got better, specific method names this year. To make sure that I’m supporting the older version as well, I’ll have to add a check for that and write the modifiers accordingly.

AYImage

As SF symbols are only available in Big Sur, I’ve to add a check for it as well.

Putting everything together, we’re ready to use our custom view!

You can use it like this -

There are many instances where you may be using the gear symbol for the settings icon in the navigation bar and don’t want your user to hear gear instead of a button.

Or worse, you don’t want the user to hear something absurd as “square.grid.3x1.folder.fill.badge.plus” for the “Add a folder” button.

I hope you enjoyed this code snippet and will create a better experience for your users!

Personal blog —https:// rudrank.blog