Tag: accessibilityLabel

36 posts

Tag: accessibilityLabel

36 posts

If your app lets the user share images, consider implementing the possibility for them to add an alt text for the image, so it can be used as an accessibility label when consumed by other users. Twitter or Slack have nice flows for doing this.

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.

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.

Some recommendations for improving your accessibility labels: don't add the element type, avoid redundancy and verbosity, localize... @MobileA11y has an excellent blog post on it: https://mobilea11y.com/blog/writing-great-labels/ @jordyn2493 has a great video too: https://developer.apple.com/videos/play/wwdc2019/254/

One of the accessibility issues I see more often in iOS apps, believe it or not, is unlabelled elements. This happens especially for buttons with an icon but no title. In those cases, you need to configure an accessibility label manually.

Accessibility Labels are not just for VoiceOver, and Accessibility User Input Labels are not just for Voice Control. The latter will also help Full Keyboard Access users to find elements on the screen by different names. Good API design!

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.

If you use SwiftLint in your SwiftUI project, there is a rule, by @rerycole34, for making sure that your images have either an accessibility label or are hidden for assistive tech because they might be decorative. Rule: https://realm.github.io/SwiftLint/accessibility_label_for_image.html

Grouping elements with .accessibility(children: .combine) doesn't always generate the best accessibility label. Comma-separating labels might sometimes not be ideal. But you can improve it by tweaking the labels/grouping of its children first.

Grouping elements in SwiftUI is extremely easy! You can use the .accessibility(children: .combine) modifier. And that's it! It merges properties. For example, generating an accessibility label by joining the children's ones, separated by commas.

Sometimes you can create your own accessibility elements from scratch to group elements too. Perhaps because they're not contained in the same superview. You can combine these elements' frames and provide a suitable accessibility label.

Buttons with a title, use it as its default accessibility label. Most cases, that's just perfect. But there's a few times that you might want to tweak it. Maybe the image is part of what the button does, or the text in the title is not very clear.

Showing 12 of 36 posts

Created in Swift with Ignite.

Supporting Swift for Swifts