Day 42

tabBar trait for custom tab bars

29 Jun 2022

I'll never recommend creating a custom component if there is a native one that does the job. But if you develop a custom tab bar, .tabBar accessibility trait comes to the rescue. Apply to a container view and its buttons will be announced as tabs.

An app that looks like Swarm has a custom tab bar. If the container view of the tab bar has the tabBar accessibility trait and its property isAccessibilityElement is false, its three buttons would be announced as: “selected, personal feed, Tab, 1 of 3”, “check-in, Tab, 2 of 3”, “friends, Tab, 3 of 3”. It indicates they’re tabs and their position in the custom tab bar.

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 creating AXCustomContent objects for accessibilityCustomContent, you can specify the importance of the data. If it is high, it will always be presented by VoiceOver. You could potentially ask the user if that data is of importance to them.

Images should either be decorative or have a proper accessibility label or alt text that describes them. If they're decorative you can make it so they get skipped by assistive tech so it doesn't get in the way of the experience.

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?


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