Tag: VoiceOver

74 posts

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.

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 } } ```

The link accessibility trait is applied to UI elements that open some web content. It usually appears in-line in the content and represented by underlined text, but not always. VoiceOver will say "link" after the accessibility label.

The header accessibility trait makes VoiceOver announce something as a header. More importantly, it lets the user navigate through headings, swiping up/down, significantly speeding up navigation and making it easier to explore/discover content.

Meet the rotor. A menu that you activate (and change options) by rotating two fingers on the screen. It lets you select different navigation modes and customizations. Like navigating through headings or changing VoiceOver’s speaking rate.

With the button trait VoiceOver will read “button” after the accessibility label and will indicate the user that, when focused, they can double tap anywhere on the screen to interact with it. UIButton has this trait by default.

Showing 49-60 of 74 posts