Day 83

Group a UILabel with its UISwitch

9 Aug 2022

Very often we need to show a UISwitch preceded with a UILabel that explains what it does. The text in the label is basically the accessibility label for the switch. Ideally we want for both components to be grouped behave as a UISwitch.

There is a semi-modal screen from the Twitter app asking for mic permissions. It shows two libels, a title that says

It makes much easier to understand what the switch does, compared to having two separate accessible components. There is a number of ways you can do that. One of them is to use a container view and proxy the switch accessibility attributes.

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

When thinking about accessibility labels and values, it is easy to miss adding information or state that are represented by little visual cues and icons: a checkmark indicating something has been played, a down arrow indicating a downward trend...

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?

It is very important to label switches properly and avoid duplication when you find them in table views, like in settings. One way it's usually done, and probably the simplest solution, is by adding the UISwitch in the accessory view of the cell.


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