Day 3

What makes a good accessibilityLabel

21 May 2022

Good accessibility labels are at the core of good accessible apps. It should be a localized succinct string that tells as much as possible about the component (without including its type) and provides context avoiding verbosity and redundancy.

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...

It is possible to embed icons within text using NSTextAttachment and NSAttributedString. If you do, please remember to override the accessibility label, otherwise VoiceOver will announce it as "Attachment.png File". Example code in the image: ```swift let magnifyingGlassIcon = UIImage(systemName: "magnifyingglass")! let searchButton = UIButton() let searchTutorialLabel = UILabel() searchButton.accessibilityLabel = "search" let textAttachment = NSTextAttachment(image: magnifyingGlassIcon) let string = "Select the button to find elements in the list" let attributedString = NSMutableAttributedString(string: string) let attributedStringIcon = NSAttributedString(attachment: textAttachment) let iconPlaceholderRange = attributedString.string.range(of: "")! let iconRange = NSRange(iconPlaceholderRange, in: attributedString.string) attributedString.replaceCharacters(in: iconRange, with: attributedStringIcon) searchTutorialLabel.attributedText = attributedString searchTutorialLabel.accessibilityLabel = string.replacingCharacters(in: iconPlaceholderRange, with: searchButton.accessibilityLabel!) ```

Accessibility Labels are not just for VoiceOver, and Accessibility User Input Labels are not just for Voice Control. The latter will also help Full Keyboard Access users to find elements on the screen by different names. Good API design!

With attributed accessibility labels, your app could now, for example, greet your users in different languages. Note that it will change to the voice of the corresponding language you are switching to. Example code in the image: ```swift let greetingLessonView = UIView() let bcp47LanguageCode = "es-Es" let translatedPhrase = "¡Buenos días! " let attributedLabel = NSMutableAttributedString(string: translatedPhrase,attributes: [.accessibilitySpeechLanguage: bcp47LanguageCode]) attributedLabel.append(NSAttributedString(string: "Means: good morning!")) greetingLessonView.accessibilityAttributedLabel = attributedLabel ```


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