A few days ago, the article “Idle fish is 17 million people, creating a blind road” went viral. Visually impaired people are in greater need of cost-effective idle commodity trading. As the largest idle trading platform in China, Idle fish was supported by the visually impaired engineer team of Shenzhen Barrier-free Research Association in April this year. It has achieved barrier-free support for Android and iOS versions. How to optimize the accessibility of idle fish under the Flutter&Native hybrid engineering? How to effectively maintain stable support for accessibility features in the face of frequent iterations of daily releases? Here are the secrets for you.
Function demonstration
Today we are dealing with accessibility on the terminal, generally for the visually impaired. How do visually impaired users access information on their phones? Different mobile phone systems provide corresponding screen reading assistance software, such as Talkback for Android and VoiceOver for iOS. Visually impaired users interact with each other through simple operations, such as touching, clicking, double-clicking and swiping the screen left and right. The system will feed interface information back to visually impaired users in the form of narration and voice.
How can visually impaired users use barrier-free features? Let’s take Android phone as an example, simple operation, “Settings” > “More Settings” > “Accessibility” > “Talkback” to start Talkback, iOS operation is very similar, “Settings” > “General” > “Accessibility” > “Voice-over” to start voice-over. The basic operations of accessibility are as follows
play
Accessibility normalization mechanism
Many developers may think, do we need to develop a separate version of the App for the visually impaired group that meets their usage habits? In fact, people with disabilities are not intentionally or unintentionally isolated, so there is no need to isolate people with disabilities from the public, so as to reduce the impairment of visually impaired people in the normal version of the end, so that visually impaired people can communicate smoothly with ordinary people in the same environment, and they also have the ability to create value for the society.
Therefore, for barrier-free optimization of the client, barrier-free optimization can be carried out on the common version. The original interaction mode and information content do not need to be changed, and special version should not be provided as far as possible. At the same time, the business needs of the end side are constantly iterating, so barrier-free optimization must be incorporated into the normal version iteration process, the normal mechanism of barrier-free optimization should be established, and the daily product development process should be agreed, so as to continuously guarantee the barrier-free and stable support of the main link.
-
Product demand stage: considering the use habits of special groups, design;
-
Technical development stage: Develop according to optimization specifications to ensure that non-decorative interactive elements can be focused and contain correct descriptions;
-
Product testing stage: verify the optimization effect of development, and provide it to barrier-free professional testing team for testing;
-
Product launch stage: monitor the use of online disabled users and continuously collect user feedback;
End – side accessibility development specification
There must be a set of standards for barrier-free design at the end and side to provide technology for reference in the development process. Through daily development accumulation, Xianyu has formed a set of barrier-free development standards.
-
Decorative elements do not require a separate focus;
-
Non-decorative interactive elements can be focused. When sliding the screen to switch the focus, the focus can be normally obtained. After the focus, the role, description and status of elements can be played to obtain correct information.
-
Pictures, audio and video should provide information for users to understand;
-
The minimum focus area should be at least 48x48DP to avoid the focus being too small to select.
-
Check boxes and labels must provide the correct status, whether selected or unselected.
-
Focus ordering is logical, avoiding focus hopping;
-
Reasonable focus range, avoid excessive focus;
-
Optimize difficult problems to avoid direct castration function;
Take the home page of Xianyu as an example, the decorative element “Xianyu” does not need an independent focus; Interactive elements “second-hand mobile phones” can be focused; Right and left slide screen order is correct, can get focus normally; Element information description is correct after focusing; Reasonable focusing range; The labels Fresh and Attention are correctly selected, and the focus order is correct.
End – side optimization scheme
In different platform, the system provides a very simple barrier-free optimization method, the auxiliary focusing focus of developers to add descriptions, order, shielding unnecessary focus, we are in the process of optimization, according to the development of specifications, combined with the end side of the original framework, using different barrier-free interface, most problems can be solved more easily, The following is a brief introduction to accessibility optimization methods commonly used on different platforms.
Android optimization
Add focus description
android:contentDescription="desc"
view.setContentDescription(desc)
Copy the codeMask the focus to prevent the corresponding view from being focused
android:importantForAccessibility="no"
view.setImportantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO)
Copy the codeAdjust the focus order so that the corresponding view is traversed after or before the view whose ID is set.
android:accessibilityTraversalAfter="id"
android:accessibilityTraversalBefore="id"
view.setAccessibilityTraversalAfter(int)
view.setAccessibilityTraversalBefore(int)
Copy the codeIos optimization
Add focus description
@property(nonatomic, copy) NSString *accessibilityLabel;
Copy the codeMask and merge focal points
@property(nonatomic) BOOL isAccessibilityElement;
Copy the codeAdding control roles
@property(nonatomic) UIAccessibilityTraits accessibilityTraits;
Copy the codeFlutter optimization
Add focus description
Semantics(
value: "desc",
child: Row(),
);
Copy the codeRemove the focus
ExcludeSemantics(
child: Row(),
),
Copy the codeMerge the focus
MergeSemantics(
child: Row()
);
Copy the codeWeex optimization
Add focus description
Copy the codeAdding focus Roles
<div role='button' aria-label='desc'> </div>
Copy the codeShielding focus
<div aria-hidden='true'> </div>
Copy the codeSaid in the last
In idle fish barrier-free rectification, we and shenzhen information barrier-free society visually impaired professional engineer team, before and after repair the problem 129 barrier-free, 18 engineers, iteration 4 version, problem to repair rate is 87.5%, for the visually impaired through the idle fish backbone link, visually impaired users can on idle fish, normal idle transactions. Currently, the number of visually impaired users on Xianyu has exceeded 40,000. And barrier-free optimization is not just a special governance can be once and for all. Here we also hope that the industry, together to promote the Internet App barrier-free optimization, have any suggestions, feel free to put forward to us, let us further eliminate the use of barriers for special groups, bring innovative use experience.
Is now, client/server Java/architecture/front-end/algorithm/quality engineer, small idle fish all looking forward to your joining, Hangzhou Alibaba Xixi Park. Welcome you, join the team of appearance level + talent, expand the technical boundary and achieve the ultimate!
* Send resumes to small idle fish → [email protected]
More series of articles, open source projects, key insights, in-depth interpretation
Please look for the idle fish technology