This article refers toWCAG 2.1 、WAI-ARIAandWeb accessibility and accessibility best practicesIn the development of barrier free optimization of Jingxi small program home page, this paper summarizes some practices of barrier free optimization in small programs, hoping to promote barrier free application in small programs.
What is accessibility?
Before we know about accessibility, let’s look at some data:
- According to the latest data of the China Association for the blind, there are more than 17 million visually impaired people in China at present. With the serious aging, the visually impaired group has a further expansion trend.
- In China, there are a large number of people with information disabilities, including more than 85 million people with disabilities, more than 200 million elderly people and a large number of people with cognitive impairment.
AccessibilityIt means that there are no obstacles in the process of development and the activities can be carried out smoothly. The Related words extended from accessibility are: barrier free facilities, information barrier free, barrier free communication and so on.
aboutInformation accessibilityChina Internet association gives a definition: anyone (whether healthy or disabled, whether young or old) can access and use information equally, conveniently and barrier free under any circumstances.
The above explanation comes from Baidu Encyclopedia
If we can’t see or hear, how can we live?
In life, we often see some facilities: curb ramp, blind road, barrier free vertical elevator, barrier free handrail, warning signal of crosswalk and so on. These safety facilities for the disabled areAccessibility facilities. Barrier free facilities are mainly for the disabled groups to be able to pass and move independently, safely and conveniently. It is an important guarantee for the smooth life of the disabled groups. In addition to barrier free facilities in physical environment, barrier free facilities can also be extended to barrier free information and communication, such as website design, online business, shopping interaction, etc.
The status quo of information accessibility
With the continuous development of the Internet, Internet applications have been integrated into all aspects of our lives, and the disabled groups hope and need more convenient Internet applications to obtain information, study and live. Therefore, the barrier free optimization of Internet application is particularly important for the barrier groups.
As early as February 1997, the World Wide Web Consortium (W3C) set up the Wai group in order to improve the accessibility of the network, and formulated a series of standards, specifications, checklists and barrier free technologies on network accessibility, and cooperated with organizations all over the world to promote the barrier free network movement on a global scale.
But so far, the progress of barrier free optimization of Internet products is still slow, many website construction and mobile app development have not considered barrier free optimization, even through the screen reading software, it is difficult to obtain the desired information.
Research on the disabled groups
Taking the shopping app of e-commerce platform as the research object, we cooperated with the information accessibility research association to do a research. According to the collected public opinion feedback, we learned that:
At the moment of consumption degradation, low-cost goods are popular in every corner of the Internet, and the barrier group is one of the most demanding groups. Like pinduoduo and Taobao special edition, Jingxi, as a shopping platform of Jingdong, has a lot of discussions in forums and QQS where people with disabilities gather. Users express regret that Jingxi has not done barrier free, and also hope that Jingxi can carry out barrier free optimization as soon as possible to enjoy the fun of low price shopping.
According to the preliminary detection by the information accessibility engineers of the research society, the defects affecting the users are mainly in the following categories:
- The button is not labeled, so it is difficult for users to know which functions will be triggered by pressing the corresponding button.
- The simplified status does not prompt or does not conform to the understanding habits of users with obstacles, which leads to the users unable to understand the correct information, such as whether they have joined the shopping cart or not.
- The focus logic is confused or does not follow the correct screen reading mode, resulting in the user can not easily and clearly understand the interface information, which seriously affects the operation efficiency.
- Due to the use of a large number of graphic architecture and the lack of integrated barrier free features, users can not easily participate in platform marketing activities.
The above categories belong to the basic support for barrier free users. After partial or complete adaptation, app will achieve better barrier free experience.
Barrier free optimization development
Before understanding the accessibility optimization of small programs, we need to understand the basic knowledge of Web accessibility development and the working mode of screen reading software.
Screen reading software
Key points of accessibility——Using screen reader。
Mobile app access barrier free features, open the screen reading mode setting path:
Settings > General > auxiliary functions > voiceover。
Settings > accessibility > Talkback(different models may have different paths)
Here are some of the main voiceover gestures:
- Light: select and read the item.
- Tap twice to activate the selected item.
- Swipe left and right: select the next or previous item.
- Swipe up or down with three fingers: swipe a list or area on the screen.
- Double finger rub: quickly move two fingers back and forth three times (forming a “Z” shape) to remove the reminder or return to the previous screen.
- More gestures can be viewed:Voiceover – iPhone User Guide。
There are some differences between Android’s talkback gesture and voiceover, which will be mentioned later
WAI-ARIAThe information is exposed to accessibility APIs (barrier free API) through browser, which is used as the information source of screen reading software.
WAI-ARIA ( Accessible Rich Internet Applications (WAI-ARIA) 1.1）It is a technology that can help us to further identify and realize semantics through browsers and some auxiliary technologies. In this way, it can help us solve problems and let users know what happened. WAI-ARIA is a W3C specification that defines a set of HTML features that can be used for other elements to provide additional semantics and improve the lack of accessibility.
The following are the three main features of the specification:
- role——Define what elements do. as
role='button'Indicates that the element is a button, which is read as “button” by the screen reading software
role='searchbox'Indicates that the element is used for search, and the screen reading software reads it as “search”.
- attribute——Let elements have more meaning. as
aria-required='true'Indicates that the element is required on the form
Aria label ='description text 'It is used to add a description to the label of the current element, add a label to the element in an invisible way, accept the string as a parameter, and the screen reading software will read out the description text.
- state——A special property used to express the current condition of an element. as
Indicates that the form is not allowed to enter
aria-hidden='true'Indicates that the element will be ignored by the screen reading software.
For more properties, please refer toUsing AriaSome properties may not take effect when the applet is set.
More roles can be referred toUsing AriaSome roles may not take effect in the applet settings.
Therefore, barrier free optimization can be developed with the help of screen reading software and the characteristics of WAI-ARIA. The introduction of barrier free features in Internet applications enables barrier users to obtain page information clearly and accurately, obtain better product experience, and realize online business and shopping conveniently.
Barrier free optimization of Jingxi app home page
Previously, Jingxi small program did not carry out barrier free optimization, and disabled groups could not use it with the help of screen reading software. This makes the platform lose the market of obstacle groups, and the obstacle groups also lose the opportunity to experience the service of Jingxi small program platform. Therefore, we hope to optimize the accessibility of the platform, improve the usability and ease of use of the platform, and let the disabled groups enjoy a better shopping experience.
The product provides focus division rules, reading rules, reading order, and customized barrier free optimization scheme for Jingxi app home page. The internal plan is not disclosed here. (if you want to know,Let’s send in a wave of resumes~）
Development and Implementation
At present, the small program has been officially supportedAccessibilityFeatures, users can experience barrier free access in screen reading mode.
DOM order is important
The screen reading software reads the screen in the order of DOM by default.
If the order of DOM is inconsistent with the semantic order of content, it will make the content difficult to understand. For example, the waterfall flow of commodities in the home page is arranged in two columns:
In the development process, we should try to avoid using styles that will affect the visual order of DOM. If it cannot be avoided, we need to manually set the tabIndex attribute to inform the screen reader of the correct content order.
Non text elements add description and role attributes
By adding description and role attributes to non text elements, the content of elements can be read clearly and accurately by screen reading software.
- The image can be described by alt attribute, and the screen reading software will read it out according to the content in alt
"Describe image content image"。
- The view itself is semantic free and can be added to the element
aria-labelProperty. The screen reading software will read it out
"Label description content + Role Type"。
Whole element reading
An element may consist of many child elements. In the barrier free mode, the screen reading software can only focus the sub elements separately and read out the information of each sub element separately. With the help of screen reading software, barrier users can get fragmentary information, which is very unfriendly.
Therefore, in the process of barrier free optimization, the element can be read as a whole as a button, the information integration of sub elements can be used as a description, and the description content can be simplified as much as possible to shorten the reading time.
Hidden element reading
If you don’t want part of the content to be read out, you can use aria hidden = ‘true’ to declare it, so that these elements will be ignored when reading the screen.
This line of text is ignored when reading the screen
In accessibility mode, this attribute can be used to hide content that is not helpful or disturbing.
Non text element reading
The logo and text of Jingxi in the head of the home page are a whole picture. After focusing, the screen reading software will read the image by default, unable to read the text in the image. This kind of barrier free experience is very bad.
In this scenario, you can give the logo a picture
Add descriptionFor barrier free optimization.
JD's social e-commerce platform
There are also close button, return to top button, menu bar button
Search box read
After the home search box is focused, the screen reading software will read out the dark lines in the search box by default. However, barrier users can’t obviously perceive the search box elements.
In this scenario, you can add the search box to the
Add role attributeFor barrier free optimization.
Carousel map reading
The carousel map is composed of multiple sub elements, but the click is the whole click, and each sub element is a picture, so the screen reading software can not make users clearly perceive the meaning of the elements.
In such a scenario, you can give
Add a description to each child element labelThe screen reading software can recognize the sub elements.
Activity 1 Activity 2 Activity 3 Activity 4
But this kind of barrier free optimization experience is not friendly on Android phones.
When the obstacle user focuses on the carousel, the screen reading software reads the description of the sub elements aloud. The carousel graph continues to carousel, but the focus index will not automatically update with the carousel status, but will slide and disappear in the screen with the current sub element. To get the updated carousel information, you need to refocus.
In such a scenario, it is recommended that the
Description of outermost layer added, treat the whole content as a button to let users know that this is the button that they click as a whole.
Activity 1 Activity 2 Activity 3 Activity 4
Commodity card reading
The commodity card is composed of multiple sub elements. The screen reading software will read out the focused sub elements (commodity map, name, price, interest point, etc.) one by one.
However, it is not easy for users to understand the complete meaning of the commodity card by reading each sub element separately.
In a scenario like this, you can treat the commodity card as a whole button. Add a label on the outermost layer of the product card
aria-role='button', you can also
aria-labelTag, integrate the product information, simplify the description, shorten the reading time of the product name, so that users with obstacles can get a better experience.
Hidden element reading
The barrier free optimization of commodity cards mentioned above can be realized through
aria-labelTo achieve. Ideally, when the disabled user focuses on the product card, the screen reading software will read out the integrated product information and prompt that it is the button type.
But this is not the case. When disabled users focus on Android phones, the screen reading software will not only read out the integrated product information and role, but also read out the text content of the sub elements of the product card. (the performance of IOS will be mentioned later)
In order to avoid repeated reading of product information, we can add the
aria-hidden='true'Hidden sub element text description, so that users can get clear and concise product information.
Differences between IOS and Android
Slide screen gesture difference
Android: Double finger sliding, adaptive sliding according to gesture;
IOS: three finger sliding, one screen one screen paging sliding.
Focus difference of carousel
Android: the focus position will slide away with the sub elements;
IOS: the focus position is fixed and will not disappear as the child element slides.
Due to the different font sizes of the integer part and the decimal part, the price text is implemented with multiple labels.
¥ 259 .2
Android: read “259.2 yuan” completely;
IOS: read unit, integer and decimal separately, and read “￥” as “dollar sign”.
Aria role ‘=’button’ read difference
Android: read as “description + button + sub element text description”, with the help of
aria-hidden='true'Hide the text description of sub elements to avoid repeated reading.
IOS: there are two cases.
- If the label is set at the same time
aria-label, read as “description button” and do not repeat the sub element text.
- If the label is only set
aria-role='button', will continue to recognize the sub element text, read as “description + button + sub element text description”. In order to avoid repeated reading, it is also necessary to add
The prospect of small program accessibility
Since 2.7.1, the basic library of applets supports some aria tags, but there are still some properties and roles that do not work in applets. We hope that we can support all aria tags in the future to bring better experience to users with disabilities.
In addition, there is no API for the app to identify whether the user’s mobile phone is in barrier free (screen reading) mode (native app can be identified through the relevant API). If it can be predicted that the user’s mobile phone has turned on the barrier free mode, it can be displayed through the dynamic control front-end module, so as to better hide useless information and eliminate interference information (floating layer pop-up window, animation, etc.). In the accessible mode, setting data buried point reporting can also provide better experience for users with obstacles.
It is hoped that wechat app can strengthen the support for barrier free optimization development as soon as possible, so that the barrier groups can enjoy the achievements brought by informatization and enjoy a convenient and beautiful life.
Barrier free experience
Mobile phone opens screen reading mode, scanning QR code experience:
After the accessibility optimization of Jingxi app’s home page went online, we paid a return visit to the disabled groups and got good experience feedback.
This is our first step in the accessibility optimization of small programs. We still have a long way to go to get a better accessibility experience of small programs
I hope that the small program barrier free optimization practice, can let the disabled groups enjoy the convenience of Internet applications, better enjoy life.
Welcome to our blog:aotu.io
Or focus on the official account of bump Laboratory (AOTULabs).