F(X) Team of Ali Tao Department – Su Chuan

Imgcook generated the code and generated the code automatically at the same time

Design draft generated code artifact imgCook

Imgcook generates view code, data binding, and some logic code from the design draft. Imgcook is open for public use. Visit imgcook.com.

Why support accessibility?

Now the Internet high-speed development, needs a smartphone, and old grandpa grandma with tencent video, read news in today’s headlines, brush with WeChat chat friends, one of the most interesting is not taught himself learned to shopping online, the Internet brings us the convenience of product visually impaired people can enjoy? In many people’s mind, they think blind people can’t see, how can they get online?

In fact, blind people can study, shop, entertain, communicate and even work on the Internet. Watch an 8 minute video → Video link


In the video, the blind girl uses her mobile phone in the following steps:

  • Touch the screen to get focus
  • Read the screen and return focus information to the user
  • User action, focus feedback

All the smart hardware we use today can support this need.

  • VoiceOver is already built into all apple products. Users simply open VoiceOver and touch it to get voice prompts.
  • Android phones have Talkback built into them, which is similar to VoiceOver.
  • Windows system can download screen reading software, such as Yongde, Zhengdu, Sunshine, NVDA, etc. (what screen reading software can recommend?

With the support of these screen reading functions, we put ourselves in the position of the visually impaired to see if they can really easily use → video links


When VoiceOver is turned on, it receives information through touch feedback. But from the use of video process, full screen is a problem. Such as:

  • Focus merge problem – Goods, content, inventory: Image + text content is a whole, but only image and title can be read separately.
  • Focus on switching, but users do not know that this is a button that can be clicked to switch.
  • Focus disorder problem – after clicking inventory change, read the inventory title after switching, but it is still the inventory title before switching. Switching this interaction results in a loss of focus.

What can we do?

Now we can get back to the topic, what can we do as web developers? What we need to do is to have the support of these screen reading functions, so that the screen reading software can tell the user what it is and what it can do in a better way.

More specifically, it addresses the following issues: • proper segmentation of focus • semanticalization of elements • optimization of prompt content

Corresponding to the code is the setting of several properties:

<div
    accessible={true}// Merge the focusaria-label={'This is a commodity '} // optimize the prompt contentrole="link"// The element is semantically clickableonClick={()= > {
        window.open('xx');
    }}>
    ...
</div>

<image 
    aria-hidden={true}>// Make elements out of focus, inaccessible...</image>
Copy the code

In the above video, the page of beauty College looks like this after adding accessibility attributes → video link


Isn’t that much better feedback for blind people?

Best practices

Here are some of our best practices from previous campaigns.

Optimization strategy

  • Add missing read copy aria-label (active picture, banner picture)
  • Reduce unnecessary reading focus. There are two ways
    • Add to the outermost div View cellaccessible={true}Property, while increasingaria-labelRead out all the important elements of the inner node. For example, product title + price + ‘yuan’
    • Add elements that don’t need to be read aloudaria-hidden={true}To block the focus of reading aloud.



Practical cases

Version of the head

Add attribute to “big button” “double column button” outer node: aria-label=” Active link”


bubble

Remove the invalid “picture” reading and aggregate the focus as follows: aggregate the content in the image above into a large focus and read “Sports Coldplay”.

  • Aria-hidden ={true} of the inner node responds to screen reads only on the outermost cell
  • Add aria-label=” venue title “to outermost cell node


At the bottom of the column

The footpad in the navigation bar at the bottom of the android terminal is too thin, so the whole circle should be selected as shown in the green box below, and read “Main venue”.

  • Aria-hidden ={true} of the inner node responds to screen reads only on the outermost cell
  • Add aria-label=” main venue “to outermost cell node


List the tag

Merge node, aria-label value is set directly to list title, label title


Negotiable securities

Added aria-label=” active link “to placeholder map nodes without coupons


Imgcook automatically generates accessibility codes

Automatic generation of accessibility attributes can be achieved by incorporating some common practices into code generation during DSL transformations.

Imgcook’s internal version already supports automatic generation of accessibility attributes in the Double 11 event venue module. After the “visualization” mode is developed, enter the “source mode”, first “save”, and then “synchronize visualization to source”, you can see the generated barrier-free properties.


The custom DSL used automatically generates accessibility properties according to the following rules:

1. If there is an onClick event, add accessible, role, and aria-label attributes as follows. The value of aria-label is concatenated by all the text inside the node.

<View
  onClick={xxx}
	accessible={true} 
  role="link" 
  aria-label={` attention `} >.</View>
Copy the code

2. If there is an href attribute, add accessible and aria-label as follows. The value of aria-label is concatenated by all the text inside the node.

<TrackerLink
  style={styles.primary}
  href={state.url}
  accessible={true}
  aria-label={` selections ${state.price} Coupon post price ${state.originPrice} `} >.</TrackerLink>
Copy the code

Add ariA-hidden ={true} if it is an image and there is no onClick event on the image node

<Picture
   style={styles.item}
   autoScaling={false}
   autoPixelRatio={true}
   forceUpdate={true}
   source={{ uri: item.itemImg }}
   aria-hidden={true}// Make the image lose focus />
Copy the code

So, you just need to add accessibility property generation logic to your custom DSL and make your web pages accessible!

Custom DSL documents

  • Custom DSL
  • The official DSL
  • DSL Usage Guide

The test way

After the development, you can test the accessibility on your mobile phone in the following ways.

iOS

  • VoiceOver switches: Settings -> General -> Accessibility -> VoiceOver or Visual-VoiceOver.
  • Long press the Home button (setting required) to bring up Siri, say “VoiceOver” and Siri will display the entry.
  • Choose Settings > General > Accessibility > Accessibility Shortcuts and select VoiceOver. Press the Home button three times to quickly turn VoiceOver on/off.

Android

  • Android phone Talkback entry is different, find “Auxiliary functions” or “advanced functions” in “Settings”, find “Talkback” or “barrier-free” in the subdirectory to open.
  • Or “Settings,” search talkBack or barrier-free, and turn on the feature.

After the function is enabled, click the function to select and read the element, swipe left and swipe right = switch the next reading focus; Quick double click = click. Sliding requires two fingers.

Accessibility Programming Guide

  • IOS: The iOS Accessibility Programming Guide
  • Android: Accessibility Development Guide for Android
  • Web: Web Content Accessibility Guide (WCAG), WAI-ARIA Web Accessibility Specification
  • ReactNative: ReactNative accessibility
  • Weex: Weex accessibility manual
  • Rax: Rax accessibility

Further reading

  • Report on The Basic Situation of Visually impaired Internet Users in China March 2016 PDF

  • With the rapid development of the Internet, how has the life of the blind changed?


    Tao department front – F-X-team opened a weibo! (Visible after microblog recording)
    In addition to the article there is more team content to unlock 🔓