A Deep Dive Into DinamicX: Enabling Visually Impaired People to Shop Online

What is Accessibility?

Accessibility covers a broad scope. It generally means that no obstacle exists in the development process and that activities can go on smoothly. In daily life, there are many accessibility designs. For example, in some public places, such as railway stations, airports, and shopping malls, barrier-free elevators and barrier-free toilets are set up for people with leg disabilities, or hearing aids are provided for people with hearing impairments.

Permanent Disability

Permanent disability includes visual impairment, hearing impairment, and mobility impairments, such as wheelchair dependence.

Situational Disability

  • Trying to Use a Mobile Phone While Driving: Car shaking causes situational visual impairment, physical impairment, and attention deficit.
  • Receiving an Incoming Voice Message on a Chat App During a Meeting: The sound of playing the voice message will disturb the surrounding colleagues. The voice-to-text feature provided by chat apps is one of the accessibility services.
  • Encountering Language Barriers While Traveling Abroad: This is a situational verbal communication barrier.
  • Carrying Many Bags While Shopping: This is a situational physical limitation.

DinamicX’s Accessibility Support

In the rest of the article, DinamicX’s support for accessibility refers to the support for barrier-free access to information, which is aimed at people with visual impairments. Through technical means, visually impaired people can smoothly obtain and use information when they use apps.

Core Sections of Taobao Mobile

The Homepage, Details, Shopping Cart, Buy, Order, Order List, and My Taobao pages are the core of Taobao Mobile. Currently, the user interfaces (UIs) of these pages are drawn with DinamicX as the rendering engine.

What is DinamicX?

DinamicX is positioned to be a client-side dynamic solution that features unified capabilities for Android, iOS, and H52. It provides basic guarantees for high performance and high availability on the Taobao Mobile app. Through community-based operations, we hope to continuously enrich DinamicX’s capabilities and content and improve its rendering performance and stability, turning DinamicX into a standard solution for client-side dynamic systems within Alibaba.

  • DinamicX SDK’s cross-platform support for accessibility
  • Bayonet-based verification on the template development platform

Technical Solutions

System Native Accessibility

iOS Native Accessibility

There are several types of iOS native logic:

  • When isAccessibilityElement is set to YES for a view, no matter whether accesibilityLabel is set, all its child views cannot take focus.
  • The value of the isAccessibilityElement property of UILabel defaults to NO. If this value is ever actively set by code or set to NO, the UILabel text out cannot be automatically read out in the parent container.
  • If you want the parent container to automatically read all of the UILabel text after this container takes focus, you must set isAccessibilityElement to NO and accessibilityElementsHidden to NO. The isAccessibilityElement property of labels must retain the original default value and cannot be set to any other values.
  • If a parent view is nested and the accessibilityElement property of all parent views is set to off, the accessibilityLabel property values of TextViews of all of the child views under this parent view will be automatically read out in sequence. All of the automatically read text will eventually be read out on the root view.

Android Native Accessibility

Android’s view accessibility states include three types:

  • Without Accessibility Information: For example, by default, ImageView and View have no accessibility information.
  • With Accessibility Information: For example, ImageView is set with setContentDescription, or the accessibility information of TextView is its own text.
  • With the Interactive View That Has Accessibility Information: For example, ImageView is set with both setContentDescription and setOnClickListener, TextView is set with setFocusable (true) or EditText, and Checkbox is by default the interactive views that have accessibility information.

DinamicX SDK-Defined Accessibility Properties

To smooth the differences between Android and iOS and simplify the accessibility logic, DinamicX provides two accessibility properties for accessibility features.

XML Example

As shown in the following example, the view is selected when it is touched, and the “Jump to Details” text is read out:

<ImageView
width="100"
height="100"
accessibility="on"
accessibilityText="Jump to Details"
onTap="@openUrl{'detail'}"
imageUrl="https://img.alicdn.com/tfs/TB1FuMQQFXXXXXLXXXXXXXXXXXX-420-420.jpg"
/>

Unified Accessibility Behaviors on Android and iOS

The following figure shows the current unified behaviors on Android and iOS and describes the status of a layout and a child view based on different accessibility property values.

Processing on Android and iOS

To achieve the unified behaviors on Android and iOS shown in the preceding figure, the respective operations have been performed.

iOS

The following figure shows the mapping from the SDK to system API operations based on template properties:

Android

The following figure shows the mapping from the SDK to system API operations based on template properties. In Android, layout and non-layout views are treated differently.

Example

Sample Template

<LinearLayout
backgroundColor="#eeeeee"
height="match_content"
width="375"
orientation="vertical"
disableFlatten="true"
>
<LinearLayout
marginLeft="@triple{@data{cellType},20,50}"
backgroundColor="#f2f2f2"
height="match_content"
width="match_parent"
orientation="vertical"
disableFlatten="true"
accessibility="auto"
>
<!--When auto represents click, the text information under the layout can be read out-->
<TextView
width="match_content"
height="match_content"
textColor="#ff051b28"
textSize="12"
marginTop="20"
marginBottom="20"
text="This is a textView"
/>
<TextView
width="match_content"
height="match_content"
textColor="#ff051b28"
textSize="12"
marginTop="20"
marginBottom="20"
text="This is a textView with focus"
accessibility="on"
onTap="@rTap{}"
accessibilityText="This is a textView with focus"
/>
<FastTextView
width="match_content"
height="match_content"
textColor="#ff051b28"
textSize="12"
marginTop="20"
marginBottom="20"
text="This is a FastTextView"
/>
<TextView
width="match_content"
height="match_content"
textColor="#ff051b28"
textSize="12"
marginTop="20"
marginBottom="20"
accessibility="off"
text="This is a textView that does not need to be read out"
/>
<ImageView
width="100"
height="100"
marginLeft="20"
marginTop="12"
borderWidth="3ap"
borderColor="#FF0000"
accessibility="on"
accessibilityText="This is an ImageView click"
onTap="@rTap{'Test'}"
imageUrl="https://img.alicdn.com/tfs/TB1FuMQQFXXXXXLXXXXXXXXXXXX-420-420.jpg"
/>
</LinearLayout>
</LinearLayout>

Demonstration of Sample Template on a Mobile Phone

Look at the following video. The layout accessibility is set as auto, so this layout will be selected, and the text that contains accessibility information will be read out, but the second and fourth TextViews will not be read out. onTap and accessibility are set to on for the second TextView, so it is an interactive view in this case and must be selected separately. For the fourth TextView, accessibility is set to off. As such, it is disabled with the accessibility feature, and it is not selectable and cannot be read out. Moreover, it will not be selected and read out by the layout.

Accessibility Verification Bayonet

Accessibility support is one thing, whereas how to guide developers to write code is another thing.

  • First, the publicity for accessibility is insufficient, and the priority of accessibility is not high in development. Developers lack such awareness, which results in insufficient accessibility test cases.
  • Second, supporting accessibility features incurs certain costs. Moreover, a set of standards and specifications that can tell developers under what circumstances and how to support accessibility are still absent.
  • Third, supervision and control over the process are absent, so developers may forget to include accessibility features.
  • For non-interactive views, such as ImageView, FrameLayout, and LinearLayout, if the onTap property is set, the bayonet checks whether a view contains accessibility properties. If it does not contain these properties, the verification fails, and suggestions are given: Set accessibility to on, enable accessibility focus, and set accessibilityText to xx.
  • For non-interactive views, such as ImageView, FrameLayout, and LinearLayout, if accessibility is set to on, accessibilityText must be set to xx at the same time.
  • When the onTap property is set for a child view, accessibility must not be set to on for its parent layout. Otherwise, this child view cannot take focus.
  • If auto is set for a layout, you must set onTap and also set accessibility to on for the TextView. Otherwise, the TextView cannot take focus.
  • The accessibility property cannot be set to a dynamic expression.

Vision

We will continue to do our best to make Taobao Mobile a product that is inclusive for all our customers, especially visually impaired people. We hope that Taobao Mobile can engage with them and become more than a shopping app.

Original Source:

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Cloud

Alibaba Cloud

Follow me to keep abreast with the latest technology news, industry insights, and developer trends. Alibaba Cloud website:https://www.alibabacloud.com