Day 112

Map custom views with accessibilityRepresentation

7 Sep 2022

With accessibilityRepresentation(representation:), you can create a custom component and it can be perceived by assistive technologies as the view you pass as representation. No need to manually configure accessibility attributes.

A budgeting planner app with custom sliders to configure categories like food and entertainment. All it takes to make it accessible is to use the .accessibilityRepresentation modifier and pass a native Slider configured accordingly. Example and code from “SwiftUI Accessibility: Beyond the basics” from WWDC 21.

It is one of the most interesting additions to SwiftUI to help you develop accessible UI components. If your custom component behaves similarly to a native one, this is the way to go.

https://developer.apple.com/documentation/swiftui/view/accessibilityrepresentation(representation:)

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

You should convey important information in multiple modes, not just color. If you are still required to do so, at the very least you should complement that info with other modes, like symbols, if the user requested differentiation without color.

Today I have a question for you: which books have helped you level up your accessibility game? I'll start: *Developing Inclusive Mobile Apps* by Rob Whitaker (@RobW). It is not just iOS—you also learn about Android, inclusive design, and WCAG.

Hacks are accessibility’s worst enemy. An example. There is a ‘trick’ floating on the internet: if you want a button with an icon to the right of the text, set the semantic content attribute to force right to left. Great way to create focus traps.


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