Jingxi small program home page barrier free Optimization Practice

Time:2021-4-20

preface

This article refers toWCAG 2.1WAI-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.

Accessibility

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.

障碍群体

Accessibility

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.

Information accessibility

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

Wheelchair Accessible

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:

  1. The button is not labeled, so it is difficult for users to know which functions will be triggered by pressing the corresponding button.
  2. 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.
  3. 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.
  4. 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:

  • iOS: Settings > General > auxiliary functions > voiceover
  • Android: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-ARIA

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. asrole='button'Indicates that the element is a button, which is read as “button” by the screen reading softwarerole='searchbox'Indicates that the element is used for search, and the screen reading software reads it as “search”.
  • attribute——Let elements have more meaning. asaria-required='true'Indicates that the element is required on the formAria 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. asaria-disabled='true'
    Indicates that the form is not allowed to enteraria-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

background

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.

Optimization scheme

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.

Development details

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:

首页 feeds 左右两栏

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 elementaria-roleandaria-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.

icon-商品图

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.

Scene implementation

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.

惊喜Logo

In this scenario, you can give the logo a pictureAdd 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 theAdd 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 giveAdd 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 theDescription 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 cardaria-role='button', you can alsoaria-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 througharia-role='button'andaria-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 thearia-hidden='true'Hidden sub element text description, so that users can get clear and concise product information.

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.

Price difference

¥259.2

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 ofaria-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 timearia-label, read as “description button” and do not repeat the sub element text.
  • If the label is only setaria-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 addaria-hidden='true'

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:

京喜小程序二维码

epilogue

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).

欢迎关注凹凸实验室公众号

Recommended Today

Large scale distributed storage system: Principle Analysis and architecture practice.pdf

Focus on “Java back end technology stack” Reply to “interview” for full interview information Distributed storage system, which stores data in multiple independent devices. Traditional network storage system uses centralized storage server to store all data. Storage server becomes the bottleneck of system performance and the focus of reliability and security, which can not meet […]