Day 5

Label image-only buttons for VoiceOver

23 May 2022

Believe it or not, one of the most common accessibility pitfalls I see in iOS apps, is forgetting to configure a suitable accessibility label for buttons with just an image (no title), resulting in VoiceOver saying just: "button".

Why for buttons with just an image? If it has a title, the accessibility label gets inferred from it. So here's one that should be very easy for you to find and fix in your app. No more apps that just say: button, button, button, button...!

If you are looking for the best explanation on what makes, not good, but great accessibility labels, I really recommend “Writing Great Accessibility Labels” by @jordyn2493 at WWDC. The difference between someone using/loving/deleting your app. https://developer.apple.com/videos/play/wwdc2019/254/

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

Please, don't use accessibility labels as ids for your UI tests. It can completely ruin the experience for VoiceOver users. There is actually an accessibility identifier property that you can use instead to uniquely identify your UI elements.

With the attribute accessibilitySpeechPunctuation, you can ask VoiceOver to speak any punctuation marks in your attributed accessibility label, if that is what you want. Good for code snippets?

The .selected accessibility trait indicates when an element has been selected. You’ll notice that VoiceOver announces “selected” before the accessibility label. You can find that in the system for the selected tab in the tab bar, for example.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details