preface

Referring to WCAG 2.1, WAI-aria and Web accessibility and accessibility best practices, this paper summarizes some practices of “accessibility optimization” in small programs in the development of jingxi small program homepage accessibility optimization, hoping to promote accessibility in small programs more.

barrier-free

What is accessibility?

Before we get into accessibility, let’s take a look at some statistics:

  • According to the latest data from the China Blind Association, there are currently more than 17 million visually impaired people in China, and with the serious aging of the population, the visually impaired population is expected to further expand.
  • In China, there are a large number of people with information disabilities, including more than 85 million disabled people, more than 200 million elderly people and a large number of people with cognitive impairment.
  • …

barrier-free

Accessibility refers to the fact that activities can be carried out without obstacles in the process of development. Barrier-free facilities, information barrier-free, barrier-free communication and so on.

Information accessibility

For information accessibility, The Internet Society of China gives a definition: anyone (whether able-bodied or disabled, whether young or old) can equally, conveniently and barrierfree access to information and use information under any circumstances.

The above interpretation, from Baidu Encyclopedia

Accessibility facilities

How can we live without seeing or hearing?

In our daily life, we often see some facilities: curb ramps, blind paths, barrier-free vertical elevators, barrier-free handrails, crosswalks warning signals and so on. These Accessibility Facilities are known as Accessibility Facilities. Barrier-free facilities are mainly for the obstacle group to be able to pass and move freely, safely and conveniently, which is an important guarantee for the smooth life of the obstacle group. In addition to the barrier-free facilities of the physical environment, barrier-free facilities can also be extended to the barrier-free facilities of information and communication, such as website design, online service and shopping interaction on the Internet.

The present situation of information accessibility

With the continuous development of the Internet, The Internet application has been integrated into all aspects of our life, and the disabled group with mobility inconvenience more hope and need to obtain information, study and life through the convenient Internet application. Therefore, barrier-free optimization of Internet applications is particularly important for obstacle groups.

As early as February 1997, the world wide web consortium (W3C) to enhance the accessibility of the network, set up the network accessible drive (WAI) group, and formulated a series of about the web accessibility standards, specifications, test table, barrier-free technology, and to cooperate with organizations around the world, around the world to promote barrier-free web movement.

However, so far, the progress of barrier-free optimization of Internet products is still slow. Many websites and mobile APP development have not considered barrier-free optimization, and it is difficult to obtain the desired information even through screen reading software.

Obstacle group survey

We conducted a research on e-commerce platform shopping apps in cooperation with the Information Accessibility Research Association. According to the public opinion feedback collected, we know:

In the current consumption degradation, low-price goods are popular in every corner of the Internet, and the obstacle group is one of the people with the largest demand degree. Jingxi, jingdong’s shopping e-commerce platform, like Pinduoduo and Taobao special edition, has a lot of discussions in forums and QQ where people with disabilities gather. Users expressed regret that Jingxi did not do barrier-free, and also expected that Jingxi could carry out barrier-free optimization as soon as possible and enjoy the fun of shopping at a low price.

According to the preliminary detection by information accessibility engineers of the Association, currently the defects affecting users with barriers are concentrated in the following categories:

  1. As the buttons are not labeled, it is difficult for users to know which functions will be triggered by pressing the corresponding buttons.
  2. The thin state does not prompt or does not comply with the understanding habits of disabled users. As a result, users cannot know the correct information, such as whether they have been added to the shopping cart.
  3. The focus logic is confused or the correct screen reading mode is not followed. As a result, users cannot easily and clearly understand the interface information, which seriously affects operation efficiency.
  4. Due to the use of a large number of font architecture and the lack of integrated barrier-free features, users cannot easily participate in platform marketing activities.

The above categories are the basic support for barrier users to barrier-free use. Partial or complete adaptation will enable the APP to achieve better barrier-free experience.

Barrier-free optimized development

Before understanding barrier-free optimization of small programs, we first need to understand the basic knowledge of Web barrier-free development and the working mode of screen reading software.

Read the screen software

The key to accessibility — use a screen reader.

To enable the screen read mode, set the following path:

  • IOS:Settings -> General -> Accessibility -> VoiceOver 。
  • The android:Settings -> Accessibility -> TalkBack(Different models may have different paths)

Here are some of the main VoiceOver gestures:

  • Click: Select and read the item aloud.
  • Tap twice to activate the selected item.
  • Swipe left and right to select the next or previous item.
  • Three finger swipes up or down: swipes a list or area on the screen.
  • Double finger rub: Move two fingers back and forth three times quickly (forming a “Z” shape) to remove the reminder or return to the previous screen.
  • For more gestures, see: VoiceOver – iPhone Manual.

Android’s TalkBack gesture has some differences from VoiceOver, more on that later…

WAI-ARIA

Wai-aria exposes information to the Accessibility APIs (APIs) through the browser as a source of information for screen reading software.

Wai-aria (Accessible Rich Internet Applications (WAI-ARIA) 1.1) is a technology that allows us to further identify and implement semantics through browsers and assistive technologies to help us solve problems, It also allows the user to see what’s going on. Wai-aria is a specification written by the W3C that defines a set of HTML features that can be used with other elements to provide additional semantematization and improve the lack of accessibility.

Here are the three main features in the specification:

  • roleDefine what an element does. Such asrole='button'Indicates that the element is a button, which the screen reader reads as “button”,role='searchbox'The element is used to search, and the screen reader reads it as “search”.
  • attribute— Give the element more meaning. Such asaria-required='true'Indicates that the element is required on the form,Aria-label =' description text 'It is used to label the current element, to label the element in an invisible way, to accept a string as a parameter, and the screen reader will read the description text aloud.
  • stateA special attribute used to express the current condition of the element. Such asaria-disabled='true'

Aria -hidden=’true’ means elements are ignored by screen reading software.

For more properties, see States and Properties in Using Aria. Some properties may not take effect in applet Settings.

See Widget Roles in Using Aria for more Roles. Some Roles may not work in applet Settings.

Therefore, barrier-free optimization can be developed with the help of screen reading software combined with the characteristics of WAI-ARIA. The introduction of barrier-free features in Internet applications enables disabled users to obtain clear and accurate page information, obtain better product experience, and facilitate online business and shopping.

Beijing xi small program home page barrier-free optimization

background

Previously, Beijing xi small program without barrier-free optimization, obstacle groups reading screen software assistance, basic can not be used. This makes the platform lose the market of obstacle groups, and obstacle groups also lose the opportunity to experience the services of Jingxi small program platform. Therefore, it is hoped to optimize the platform for accessibility, improve the usability and ease of use of the platform, and enable disabled groups to enjoy better shopping experience.

Optimization scheme

The product provides focus division rules, reading rules, reading order, for jingxi small program home page tailored barrier-free optimization program. The internal plan, I won’t reveal here. (Send out your resume if you want to know.)

The development of implementation

At present, the mini program has officially supported barrier-free access features, users can experience barrier-free access in the screen reading mode.

Development conditions

DOM order is important

The screen reading software reads the screen in DOM order by default. If the DOM order is inconsistent with the semantic order of the content, it can make the content difficult to understand. For example, the commodity waterfall flow in the home page is arranged in the left and right columns:

During the development process, avoid using styles that may affect the visual order of the DOM. If this cannot be avoided, manually set the tabIndex property to inform the screen reader of the correct content order.

Non-text elements add description and role attributes

By adding descriptions and character attributes to non-text elements, their contents can be read clearly and accurately by screen readers.

  • Alt attributes can be used to describe the image content, and the screen reader software will read the content according to Alt"Description image content image".
  • The view itself is semantically non-semantic and can be added to elementsaria-role 和 aria-labelProperties. The screen reader will read it aloud"Label Description + Role type".

Whole block element reads

An element may consist of many child elements. In barrier-free mode, the screen reader software can only focus on the sub-elements separately and read out the information of each sub-element separately. With the help of screen reading software, disabled users can get bits and pieces of information of elements, which is a very unfriendly experience.

Therefore, in the process of barrier-free optimization, the element can be read as a whole block as a button, and the information of the sub-elements can be integrated as a description, and the description content can be simplified as much as possible to shorten the reading time.

Hidden element read

If you don’t want part of the content to be read, you can declare it with aria-hidden=’true’ so that the elements are ignored when the screen is read.

<Text aria-hidden='true'> </Text>Copy the code

In accessibility mode, this property can be used to hide content that is not helpful or intrusive.

Scenario implementation

Non-text elements read

The jingxi Logo and text in the head of the home page are a whole picture. After focusing, the screen reader software will read the image by default, and the text in the picture cannot be read aloud. This kind of accessibility experience is very bad.

In this scenario, you can optimize accessibility by adding a description to the Logo image.

<View className='index__main'> <View className='index__logo' aria-role='text' aria-label=' King '/> <View ClassName ='index__title'> </View> </View>Copy the code

The close button, the back to top button, the menu bar button…

<View className='back-top' aria-role='button' aria-label=' back to top' />Copy the code

Search box read

After focusing on the search box on the home page, the screen reader software will read out the dark lines in the search box by default. However, obstructed users do not perceive the elements of the search box clearly.

In this scenario, accessibility optimization can be done by adding character attributes to the search box.

<View aria-role='searchbox'>
    <SearchBar />
</View>
Copy the code

Read the multicast chart

The rotation diagram is composed of multiple sub-elements, but click is a block click, and each sub-element is a picture, so the screen reading software cannot make the user clearly perceive the meaning of the element.

In such a scenario, a description can be added to each child element tag so that the screen reader can recognize the child element.

<Swiper> <SwiperItem aria-role='text' aria-label=' Recommended activity 1'> Activity 1</SwiperItem> <SwiperItem Aria-role ='text' aria-label=' activity recommended 2'> Activity 2</SwiperItem> <SwiperItem aria-role='text' aria-label=' activity recommended 3'> Activity 3</SwiperItem> <SwiperItem aria-role='text' aria-label=' active recommendation 4'> Active 4</SwiperItem> </Swiper> </View>Copy the code

But such accessibility optimizations aren’t user-friendly on Android phones.

When the disabled user focuses on the wheel image, the screen reader reads the description of the child element aloud. The graph continues to rotate, but the focus index does not automatically update with the state of the rotation, but slides away from the screen with the current child element. In order to obtain the updated rotation information, you need to refocus.

In such a scenario, it is suggested to add a description in the outermost layer of the wheel map and treat the whole block of content as a button to make it clear to the disabled users that this is a button to click as a whole.

<View className='banner' aria-role='button' aria-label=' <Swiper> <SwiperItem> Activity 1</SwiperItem> Activity 2</SwiperItem> activity 3</SwiperItem> Activity 4</SwiperItem> </Swiper> </View>Copy the code

Commodity card reading

Commodity cards are composed of multiple sub-elements, and the screen reading software will read out the sub-elements (commodity picture, name, price, interest points, etc.) one by one.

But reading each sub-element individually does not make it easy for handicap-users to understand the full meaning of the commodity card.

In a scenario like this, an item card can be treated as a single button. Add aria-role=’button’ on the outermost label of the commodity card. Aria – Label can also be used to integrate the commodity information, simplify the description, shorten the reading time of the name of the commodity, so that users with disabilities can get a better experience.

Hidden element read

Barrier-free optimization of commodity cards mentioned above can be achieved by aria-role=’button’ and aria-label. Ideally, when the disabled user focuses on the item card, the screen reader will read out the integrated item information and indicate the button type.

But that is not the case. When the disabled user focuses on the Android phone, the screen reading software will not only read out the integrated product information and role, but also read out the text content of the product card film elements. (More on iOS performance later)

In order to avoid repeated reading of product information, aria-hidden=’true’ can be added to the element text label to hide the text description of the child element, so that the obstructed users can obtain clear and concise product information.

<View aria-role='button' aria-label=' goods__img' > <View aria-hidden='true'> <Image className='goods__img' SRC = 'https://img20.360buyimg.com/ling/jfs/t1/129045/25/12798/233574/5f61ffdbE248117d0/52fd1d1ee42b4443.png' the lazyLoad / > <View className='goods__info'> Product info... </View> </View> </View>Copy the code

Differences between iOS and Android

Differences in swipe gestures

Android: two-finger sliding, adaptive sliding according to gestures;

IOS: three finger slide, one screen one page slide.

Differences in focus of rotation map

Android: Focus position slides away with child element;

IOS: Focus position is fixed and does not disappear with child element sliding.

Price read difference

The price text is implemented with multiple labels because of the different font sizes for the integer and fractional parts.

<View>
    &yen;
    <Text>259</Text>
    <Text>.2</Text>
</View>
Copy the code

Android: read “259.2 yuan” in full;

IOS: read units, integers, decimals separately, and will read “￥” as” dollar sign “.

Aria-role =’button’ reads the difference

Android: Read as “description + button + text description of child element”, use aria-hidden=’true’ to hide text description of child element to avoid repeated reading of information.

IOS: There are two cases.

  • If the labels are set at the same timearia-label, is read as a “describe button” without repeating the child element text.
  • If the label is only setaria-role='button', continues to recognize child element text and reads as “Description + button + child element text description.” To avoid repeated readings, add child elements as wellaria-hidden='true'.

Prospects for accessibility of small programs

Since 2.7.1, the basic library of small programs supports some ARIA tags, but there are still some attributes and roles that do not take effect in small programs. It is hoped that all ARIA tags can be supported in the future to bring better experience to disabled users.

In addition, there is no relevant API for small programs to identify whether the user’s phone is in barrier-free (screen reading) mode (native apps can be identified through relevant API). If the user’s mobile phone can be predicted to turn on the barrier-free mode, it can dynamically control the display of the front-end module, so as to better hide useless information and eliminate interference information (floating layer pop-up, animation, etc.). In barrier-free mode, data burying points are set to report data, which can also provide better experience for users with obstacles.

It is hoped that wechat mini program can strengthen support for barrier-free optimized development as soon as possible, so that obstacle groups can enjoy the results brought by information technology and enjoy a convenient and beautiful life.

Accessibility experience

Turn on the screen reading mode and scan the QR code to experience:

conclusion

After jingxi small program home page barrier-free optimization online, we conducted a return visit to the obstacle groups investigated, and got good experience feedback.

This is our first step in optimizing the accessibility of small programs, and we still have a long way to go to get a better accessibility experience of small programs…

I hope that the barrier-free optimization practice of this small program can make the obstacle groups enjoy the convenience brought by the Internet application and enjoy life better.