Background:

After the user (the elderly and the visually impaired) opens the “narrator” mode in the system Settings, the corresponding content will be broadcast by voice after the user touches the App page control. Open Settings – Accessibility – Voice-over experience related functions.

IOS: For VoiceOver; Android: TalkBack(Blind mode) service; H5: ADAPTS W3C WAI specification.

Domestic policies have also been introduced to require adaptation of the App for the elderly and the blind:

  1. In China, The State Council, the Ministry of Industry and Information Technology, China Disabled Persons’ Federation and other departments have successively issued a number of regulations, policies, standards and other requirements for accessibility.
  2. In foreign countries and regions, many countries and regions have relevant legislation on information accessibility. In order to enter the local market, relevant laws and regulations on information accessibility must be complied with.
  3. At present, China has more than 85 million disabled people and more than 200 million elderly people over the age of 60, all of which are target groups with a large number of potential users.

.

A, UIAccessibility:

There are four types of accessibility properties, which are broadcast in the order :(by default, standard UIKit controls and views already implement UIKit accessibility)

  • accessibilityLabel: Describe the content “what”, such as “product name”
  • accessibilityValue: Describe “what is the value”, e.g. “5% annual interest rate”
  • accessibilityTraits: Describes “features, status, behavior, usage”. Control properties can be buttons and control states can be Selected
  • accessibilityHint: Describe the action “to do”, such as “click two to jump to the purchase page”

1. The Label, Value, and Hint strings are pronounced in voice format.

Traits of configured types are also spoken. For example: UIAccessibilityTraitSelected, UIAccessibilityTraitImage, UIAccessibilityTraitButton respectively to broadcast “selected”, “image”, “button”.

Traits type:

  • Button (Button)
  • Links (Link)
  • Search Field
  • Keyboard Key
  • Static Text
  • Image (Image)
  • Plays Sound
  • Has been Selected (Selected)
  • Summary Elements
  • Updates Frequently
  • Unavailable (Not Enabled)
  • Empty (None)

.

Ii. Examples:

Add the following properties to the control to broadcast as you expect:

Button. AccessibilityLabel = @ "transactions"; / / button. AccessibilityValue = @ "5% annualized rates"; button.accessibilityTraits = UIAccessibilityTraitButton; Button. accessibilityHint = @" Click 2 to jump to transaction details page "; button.isAccessibilityElement = YES;Copy the code

Tip:

1. On the interface, you can switch the focus by swiping left and right with a single finger. In this way, you can view the focus of the whole page and the order of each focus. 2. Double-click the screen with three fingers to turn on and off the voice. 3. Swiping the screen with four fingers can switch to the previous app.

.

Three: Problems encountered:

1, When the entire View as a VoiceOver access element, the child control in the View will become inaccessible, so how to make the parent control, child control support VoiceOver?

Action: Change their hierarchy (move the child controls to the previous level) and turn on isAccessibilityElement = YES.

Cell is selected as a block by default. Child controls with isAccessibilityElement = YES will broadcast only when the current control is selected. All other controls broadcast the selected cell in turn. How do I make cell unselected? (isAccessibilityElement = NO)

Solution: After all controls in the cell are set to isAccessibilityElement = YES or NO, the cell cannot be selected and NO content is broadcast.

I added a string variable to the cell: @property (nonatomic, copy) NSString * Account: The value of account will be displayed when the entire cell is selected.

Processing: IF I change it to NSInteger, there will be no broadcast…

4. Gesture login broadcast: I numbered the 9 buttons from 1 to 9 successively, and the corresponding numbers would be broadcast when the buttons were clicked, but they could not be connected.

Solution: Click the button twice and hold the second time for two seconds to slide your finger to enter the gesture.

5, after the custom popup window, you can browse to the bugs of the underlying elements.

Processing:

view.accessibilityViewIsModal = YES; / / the current view to response barrier-free broadcast \ UIAccessibilityPostNotification (UIAccessibilityScreenChangeNotification, view.accessibilityElements.firstObject);Copy the code

6, adjust the page focus order:

view.shouldGroupAccessibilityChildren = YES; / / by using hierarchy adjustment \ self accessibilityElements = @ [label1, label2]; // Adjust the return order, the object in front of the array has the highest priority (if the object in the array is nil, this will cause flash back)Copy the code

Note: Do not omit the control when adjusting the hierarchy, otherwise the missing control will not be selected or broadcast in voice-over mode

7. The banner chart is an infinite scroll chart. If you switch to the next focus with the normal right slide operation, the phenomenon of circulation in the scroll chart will appear in the voice-over mode

Processing:

/ / under the narrator open to disable the scrolling if (UIAccessibilityIsVoiceOverRunning ()) {/ / disable scrolling}Copy the code

8. Check whether barrier-free is enabled:

 UIAccessibilityIsVoiceOverRunning()
Copy the code

9. Notice after broadcasting a piece of voice :(deal with the problem of broadcasting a voice immediately before it is finished in frequent broadcasting)

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(announcementFinished:) name:UIAccessibilityAnnouncementDidFinishNotification object:nil];
Copy the code

10. How to broadcast numbers in Chinese on full keyboard? (Select English full keyboard) Use Chinese keyboard will automatically broadcast Chinese, use English keyboard will broadcast English

11, there are two jump events in a copy: click the privacy policy, only the first jump, the second jump has been invalid

Processing: a, double click will respond to the first jump event, repress will respond to the second jump event b, change to two controls, each one click event

12. How to cancel edit mode? Click other controls on the page and click the finish button on the keyboard

13. Active broadcasting:

UIAccessibilityPostNotification (UIAccessibilityAnnouncementNotification, @ "broadcast content");Copy the code

14. Voice broadcast without opening narrator mode :(this is another broadcast mode, unrelated to “narrator”)

AVSpeechSynthesizer *avSpeaker = [[AVSpeechSynthesizer alloc] init]; AvSpeaker. Delegate = self; avSpeaker. Delegate = self; AVSpeechUtterance *utterance = [[AVSpeechUtterance alloc] initWithString:text]; Utterance. Rate = 0.5; / / speech utterance. PitchMultiplier = 1; Utterance. Volume = 1; / / the volume 0-1 utterance. PreUtteranceDelay = 0.5; / / pause utterance. PostUtteranceDelay = 0.5; utterance.voice = [AVSpeechSynthesisVoice voiceWithLanguage:@"zh-CN"]; [avSpeaker speakUtterance:utterance];Copy the code

15, digital reading processing, such as broadcast verification code 1234, the system will automatically read “one thousand two hundred thirty-four”.

Processing: add the 1:2:3:4 separator in the middle, so that the number will be read one by one

16, contrast adaptation barrier-free, but also requires the page style to achieve the corresponding contrast, that is, the text and background color can not be too close to lead to not easy to identify. The contrast requirement is 18dp/pt below the text, 4.5:1; Text above 18dp/pt requires 3:1.

Contrast check site (enter RGB hexadecimal foreground color and background color for comparison)

.

Fourth, expand

UIAccessibilityContainer Protocol:

Some non-standard controls or non-UIView subclasses, areas drawn by draw method, the above two cases can not achieve barrier-free broadcast, this case requires UIAccessibilityContainer Protocol to achieve barrier-free broadcast:

@interface TestView () @property (nonatomic, strong) NSMutableArray *accessibleElements; @property (nonatomic, strong) UIImageView *img1; @end @implementation TestView - (NSArray *)accessibleElements { if (_accessibleElements) { return _accessibleElements; } _accessibleElements = [[NSMutableArray alloc] init]; UIAccessibilityElement *element1 = [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self]; element1.isAccessibilityElement = YES; element1.accessibilityFrame = [self convertRect:self.img1.frame toView:nil]; Element1. AccessibilityLabel = @ "game center"; element1.accessibilityTraits = UIAccessibilityTraitImage; [_accessibleElements addObject:element1]; return _accessibleElements; } // This TestView does not support Accessibility - (BOOL)isAccessibilityElement {return NO; } / / UIAccessibilityContainer protocol method (NSInteger) accessibilityElementCount {/ / container control quantity return [[self accessibleElements] count]; } - accessibilityElementAtIndex: (NSInteger) index (id) {/ / the subscript of the corresponding control return [[self accessibleElements] objectAtIndex: index]; } - element (NSInteger) indexOfAccessibilityElement: (id) {/ / controls the corresponding subscript return [[self accessibleElements] indexOfObject:element]; } @endCopy the code

2. Accessibility Inspector:

Accessibility Inspector: Provides a way to access important information by enabling Accessibility tree assistive technology to make important information visible on the current page, allowing you to check for missing or noteworthy information.

Use: Xcode -> Open Developer Tool -> Accessibility Inspector

.

Reference:

Bring accessibility to charts in your app Deliver an Exceptional Accessibility Experience Accessibility in SwiftUI Accessibility Programming Guide for iOS

iOS Accessibility: Getting Started with iOS Accessibility Is one of the most important Accessibility tools in the iOS Accessibility tutorial.

Information Accessibility Research Association Information Accessibility Products Alliance

If you found this article useful, please give it a like in the comments below. If you find something missing or wrong, please leave a comment below