Day 80

Compose accessibility labels from optionals

6 Aug 2022

This is a small trick I use to compose complex accessibility labels/values when, for a UI component, some elements might not be in all its instances. An array of optional Strings, compact map, and join all elements by a separator, like a comma.

A tweet from Sebastiaan de With as an example. A tweet accessibility label is composed of many elements: Some tweets in home start with why you are seeing the tweet (Received new replies, someone liked it, based on your likes, someone retweeted, etc); the profile image is skipped; the user name is always part of the label; some users are verified; the user handle is not part of the label by default (but it can be enabled in Twitter's settings); the date is always there; and so is the text of the tweet; the tweets can have attachments (like a link, video or image with alt text); and a tweet can be a promoted one. Then we could compose the tweet value with the number of reactions (replies, likes and retweets), if any. We can create an array of optional strings where we'll be storing all these strings. Then we can do compactMap to remove nils, we could filter to check for empty strings and remove them too, and then we can join all these components by a separator character.

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

Accessibility labels might not be the best input labels, used for example to find or interact with elements with Voice Control or Full Keyboard Access. In those cases, you can provide accessibility user input labels.

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

When using Voice Control, say: "Show names". You'll see all the accessibility labels for interactive elements overlaid on the screen. It will help you identify labels that can be improved, or actually missing. Labels are not just for VoiceOver.


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