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

What is Accessibility?

Permanent Disability

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

Core Sections of Taobao Mobile

What is DinamicX?

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

Technical Solutions

System Native Accessibility

iOS Native Accessibility

  • 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

  • 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

XML Example

<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

Processing on Android and iOS

iOS

Android

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

Accessibility Verification Bayonet

  • 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

Original Source:

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Two ways Terraform can make life easier

Automating Infrastructure skill badge image on a gray background

How Kubernetes SIG-Cloud-Provider-Alibaba Works

5 Principles for Designing Evolvable Event Streams

Speech Recognition + VoiceCmd + IOT

Best Website For Mac Software

Getting Started with Serverless | Architecture Evolution

Managing Kubernetes Environments using Namespaces and Terraform

鬼灭之刃剧场版:无限列车篇 完整版本 [Demon Slayer: Kimetsu no Yaiba] 完整版觀看電影在線小鴨 (2020-HD)完整的電影

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

More from Medium

Notes on “Paxos made moderately complex”

ElastiCache Upgrade Engine for Redis

Make database isolation levels understandable