Views & Voice Control Accessibility in SwiftUI | by Sarah | Mar, 2022

Utilizing voice management with ScrollView and customised views

Picture by Thought Catalog on Unsplash

To indicate the right way to implement voice management for scrollView, we are going to create an interface for media posts. Let’s begin with the view for the posts beneath.

PostView

PostView takes a put up and shows the put up’s username, profile image, and picture put up. Test the code beneath for the structure:

ScrollView With Accessibility Motion

Embed ScrollViewReader inside ScrollView. Inside ForEach, loop by means of all of your posts. Give your posts ids to assist us scroll to them utilizing the ScrollViewProxy. Use the accessibilityScrollAction() modifier to examine which approach the person desires to scroll, then use the ScrollViewReader’s proxy to scroll to the subsequent or earlier put up.

Customized Toggle

Within the article beneath, we made a customized toggle view:

We are able to simply add voice management accessibility to this toggle view with one line. To the RoundedRectangle we’re utilizing because the swap/toggle, add the AccessibilityLabel() modifier. The voice management will pay attention for the label “Faucet Toggle” to modify the toggle on and off. Test line 46 beneath:

Customized Button

Within the article beneath, we made a customized button fashion:

If we would like the button’s animation to play with voice management, we have to make some adjustments. First, add the AccessibilityLabel() and AccessibilityAction() modifiers to our button. The AccessibilityAction() will overwrite our button’s actions. With out the AccessibilityAction() modifier, the button’s actions will hearth with out taking part in our button’s animation.

In NeumorphicButtonStyle, add a boolean binding variable. Use the variable change this variable contained in the accessibility motion and cross it worth to the fashion. Use the OnChange() modifier to play our animation and reverse it after 0.2 seconds to get the button again to its unpressed state. See the code beneath:

The accessibility motion and our animation will get triggered when the person says “Faucet Click on.”

Thanks for studying!

More Posts