#365DaysIOSAccessibility

Day 92

Create UIAccessibilityElement for custom drawing

18 Aug 2022

UIKitaccessibilityElementaccessibilityElements

By

Dani Devesa Derksen-Staats

You can create your own accessibility elements from scratch. One use-case for doing that is when you do some custom drawing instead of building your UI using or relying on UIKit components. A circular progress bar, could be an example.

Two examples. The first one is the calendar app in iOS. Let's imagine that each one of the week's rows are customary drawn, but we'd like for each day to be an accessibility element. We could mark the week’s container view not to be an accessibility element and then create a UIAccessibilityElement for each day. These will need an accessibility label and the accessibility frame in the container space. Then we can add all the newly created elements to the accessibilityElements array of the container. The second example is a circular progress bar drawn using UIBezierPath. We could follow a similar approach for making it accessible.

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

Day 82

Fix traversal order with accessibilityElements

It is possible to change the traversing order of accessibility elements by configuring the accessibilityElements array. You should try to avoid it, but one good reason for doing it is if the default order is illogical because of the visual layout.

Day 105

SwiftUI accessibilityElement like UIKit grouping

The .accessibilityElement(children: ) modifier with the .ignore argument does a similar thing to set the container view to be an accessibility element in UIKit. It is the default argument, so you can just say .accessibilityElement(). Because of this, you'll need to use other modifiers to make it accessible and manually configure an accessibility label and value, traits... when necessary. https://developer.apple.com/documentation/swiftui/view/accessibilityelement(children:) https://developer.apple.com/documentation/swiftui/accessibilitychildbehavior/ignore

Day 94

Make charts accessible with UIAccessibilityElement

Creating UIAccessibilityElements, combined with a semanticGroup accessibilityContainerType, can also help you make components as complex as charts accessible. Example from "Bring Accessibility to Charts" WWDC21: https://developer.apple.com/videos/play/wwdc2021/10122/

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

← Day 93
Day 91 →