Tag: iOS

169 posts

Images that convey important information should have the .image accessibility trait and provide an alternative text in the accessibility label. "Image" will be added to VoiceOver's utterance and the user will be able to use Image Explorer. Image Explorer is fairly new, introduced just a couple years ago. But if you were appropriately configuring the image trait, users suddenly got this new functionality for free. Isn't that awesome? With VoiceOver on, open Image Explorer by swiping up in an image and double tapping. It lets users find people (with a basic description and positioning in the photo), objects or text in images, using on-device intelligence. It is very cool!

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.

There is an accessibility trait for defining something that represents a custom keyboard's key: .keyboardKey. It allows VoiceOver users to change the typing mode to Direct touch typing. The calculator app or an access pin pad, are some examples.

Imagine playing a piano with VoiceOver. You'd have to find the key you want to play and then double tap. It would be a very difficult experience. With the .allowsDirectInteraction accessibility trait, VoiceOver passes through touch gestures. Use carefully! And only when it really makes sense to be able to handle controls directly with touch. Other examples could be a drawing app or some games.

Do you know when a UI element is greyed out to show that it is disabled? Yes, there is an accessibility trait for that too: .notEnabled. VoiceOver will say “dimmed” after its accessibility label and Voice Control and Switch Control will skip it.

The .selected accessibility trait indicates when an element has been selected. You’ll notice that VoiceOver announces “selected” before the accessibility label. You can find that in the system for the selected tab in the tab bar, for example.

If you want to update the VoiceOver user frequently about how a component is changing, when focused, you can use the .updatesFrequently accessibility trait. A downloading progress bar, a stock value, or a timer, are some examples.

Styling a search bar is hard. Lots of developers opt to build their own instead. If you do, remember to add the .searchField accessibility trait. VoiceOver will announce "Search Field" indicating the user that results might change as they type.

UISliders are adjustable, and its default accessibility value is represented in percentages. But that's not always the best format to express a value. Consider a slider to select a distance radius. Miles or km seem a more appropriate unit. Example code in the image: ```swift override var accessibilityValue: String? { get { let formatter = MeasurementFormatter() let measurement = Measurement( value: Double(value), unit: .kilometers ) formatter.unitStyle = .long return formatter.string(from: measurement) } set {} } ```

With VoiceOver, you can swipe up/down to increase/decrease the value of adjustable components. You need to implement accessibilityIncrement() and accessibilityDecrement() accordingly, and configure an accessibility value that makes sense. Example code in the image: ```swift override func accessibilityIncrement() { guard value < 5 else { return } value += 1 accessibilityValue = "\(value) of 5" sendActions(for: .valueChanged) } override func accessibilityDecrement() { guard value > 1 else { return } value -= 1 accessibilityValue = "\(value) of 5" sendActions(for: .valueChanged) } ``` Links to the official documentation: * accessibilityincrement() * accessibilitydecrement()

If you are developing a custom component, that can change value, chances are that it will need the adjustable accessibility trait (VoiceOver will say: "Adjustable"). Think of a component that lets you rate from one to five thumbs up (or stars).

If you need multiple links embedded in some text (like the classic T&Cs and Privacy policy), the easiest is to use a UITextView & Attributed Strings, and it will work beautifully with VoiceOver. You'll be even able to navigate through links. In the example, VoiceOver would say: “I agree with the Privacy Policy and the Terms and Conditions, link”. Swipe down, should announce: “Privacy Policy, link” and you can double tap to open it. Swiping down one more time announces: “Terms and Conditions, link”. Example code in the image: ```swift let textView = UITextView() let string = "I agree with the Privacy Policy and the Terms and Conditions" let attributedString = NSMutableAttributedString(string: string) attributedString.addAttribute(.link, value: "https://www.yourdomain.com/pp", range: NSRange(location: 17, length: 14)) attributedString.addAttribute(.link, value: "https://www.yourdomain.com/tac", range: NSRange(location: 40, length: 20)) textView.attributedText = attributedString extension ViewController: UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith URL: URL, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { UIApplication.shared.open(URL) return true } } ```

Showing 133-144 of 169 posts