Community

Blog Events Webinars Tutorials Forum
  1. Blog
  2. Events
  3. Webinars
  4. Tutorials
  5. Forum
Create Account
×
Community Blog Building Accessible Apps for the Visually Impaired with Imgcook

Building Accessible Apps for the Visually Impaired with Imgcook

The article shows how imgcook can help simplify the development process of apps for the visually impaired and improve the user experience.

By Suchuan from F(x) Team

Imgcook: A Powerful Design Draft Code Generator

imgcook can generate codes for views, data binding modules, and some logic in the design draft. Visit imgcook.com to use this open-source tool.

Why Barrier-Free Design?

With the rapid development of the Internet, smartphones have become daily essentials for everyone; even senior citizens in their 70s or 80s are active users, watching TV shows on Tencent Video, reading the news on Toutiao, and speaking to friends on WeChat. Do you know the most interesting part? They have taught themselves to shop online. However, can visually impaired people also enjoy the convenience of these Internet products? If they cannot see, can they surf the Internet?

To the surprise of many, visually impaired people can study, shop, have fun, communicate, and work on the Internet. Click here to see the video

This is how the visually impaired woman in the video uses her phone:

  • She touches the screen to focus on a specific area.
  • The screen reader on her phone reads out the content in focus for her.
  • She clicks the different areas to get verbal feedback from the voice assistant.

The intelligent hardware we use today offers barrier-free assistance.

  • Apple products have a built-in tool called VoiceOver. After enabling this feature, users can touch the different parts of the screen to get voice messages explaining what is on the screen.
  • Android phones have a built-in tool Talkback, which is similar to VoiceOver.
  • Windows users can download screen reading software, such as Yongde, Zhengdu, Yangguang, and NVDA.

Now, let's stand in the shoes of visually impaired people and use a mobile phone powered with a screen reading function to see if things have become easier for them. Click here to see the video

After VoiceOver is enabled, the user can receive feedback information by touching the screen. However, we have also noticed a lot of problems in the video, such as:

  • Scattered Focus: The image and text for a product form a composite element, but the reader could only read them separately.
  • Unclear Prompt: When users moved from Best Sellers to Next Batch, the reader tool failed to suggest that they could click the Next Batch link to show more products.
  • Loss of Focus: After clicking on the Next Batch link, the user clicked a new product title. However, the reader still read the title of the previous product. The interactive action caused the loss of focus.

How Can We Make It Better?

How can we make things better as website developers? We need to find a better way that enables the screen reading software to tell users what everything is and what everything does correctly.

More specifically, we need to complete these tasks:

  • Reasonable division of focus areas
  • Element semantization
  • Optimization of the prompt content

We need to set a few properties in the code:

<div
    accessible={true}   //Merge focus areas and divide them in a better way.

    aria-label={'This is a product.'}  //Optimize the prompt content.
    role="link"   //The element is semantized to inform the user. 
    onClick={() => {
        window.open('xx');
    }}>
    ...
</div>

<image 
    aria-hidden={true}>  //This element is hidden and inaccessible because it causes loss of focus.
  ...
</image>

Click here to see the video

This way works better for the visually impaired, right?

Best Practices

Let me introduce you to some of the best practices we applied in a bunch of big marketing events:

Optimization Strategies

  1. Add the missing readable text aria-label (pictures and banners)
  2. Cut off unnecessary focus areas for reading. Two methods to do this:
  • Add the accessible={true} property to the outermost div view cell and insert the aria-label to read out all the important elements in the inner nodes, such as product title + price + yuan (or other currency units)
  • Attach the aria-hidden={true} to elements that do not need to be read, shielding the action of acquiring the reading focus

4

Examples

Header

Add the property aria-label="event link" to the outer node of the "big button" and "double-column button" in the header

5

Bubble

We can weed out meaningless "picture reading" and merge the focus areas. The content in the upper figure is merged into a larger focus and only "sports" is read.

  • Add the property aria-hidden={true} to the inner node, so only the outermost cell can respond to the screen reader
  • Add the aria-label="venue title" to the outermost cell node

6

Bottom Bar

The navigation bar at the bottom of the Android device is overly divided. It's better to select the elements in the green box altogether and read "main venue." Please see the following figure.

  • Add the property aria-hidden={true} to the inner node, so only the outermost cell can respond to the screen reader.
  • Add the aria-label="main venue" to the outermost cell node

7

Ranking Tabs

We can merge the nodes and set the value of aria-label to the titles of ranking lists and tabs.

8

Coupons

Add the property aria-label="event link" to the placeholder node that does not have a coupon

9

imgcook Generates Codes with Accessibility Properties Automatically

You can add some commonly used codes during DSL conversion to realize the automatic code generation with accessibility properties.

The automatic generation of accessibility properties is already supported by the internal version of imgcook, which serves the major shopping events, and has been applied in the promotion module of the Double 11 Global Shopping Festival. To view the accessibility properties generated, you need to finish the development in the Visual mode, switch to the Source Code mode, and click Save and then Synchronize to Source Code.

10

Custom DSL Generates Accessibility Properties Automatically Based on the Following Rules

1.  If there is an onClick event, the accessible, role, and aria-label properties are added, as shown below. The value of aria-label is to include all texts inside the node.

<View
  onClick={xxx}
    accessible={true} 
  role="link" 
  aria-label={`concerns`}>
  ...
</View>

2.  If there is a href property, the accessible and aria-label properties are added, as shown below. The value of aria-label is to include all texts inside the node.

<TrackerLink
  style={styles.primary}
  href={state.url}
  accessible={true}
  aria-label={`¥${state.price}Discounted price${state.originPrice}`}
>
  ...
</TrackerLink>

3.  If it is an image and there is not an onClick event on the image node, the aria-hidden={true} is added.

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

That's it! You just need to add the accessibility properties generation logic to your custom DSL and ta-da! All your pages are barrier-free!

Custom DSL Document

Test Method

After finishing your development jobs, check the accessibility in the following ways:

iOS

  • Turning on VoiceOver: Settings :arrow_right: Accessibility :arrow_right: VoiceOver.
  • Long press the Home button to wake up Siri (to be configured), say "VoiceOver" and Siri will display the port
  • Go to Settings :arrow_right: General :arrow_right: Accessibility :arrow_right: Accessibility Shortcut Keys :arrow_right: select VoiceOver. After that, you can turn VoiceOver on and off by pressing the Home button quickly three times.

Android

  • Accessing Talkback on Android phones is slightly different. Go to Settings :arrow_right: find Accessibility or Advanced. In the subdirectory, find Talkback or Accessibility
  • Alternatively, you can go to Settings, search for Talkback or Accessibility, and turn on the feature.

After the feature is enabled, you can use the following gesture control:

  • Tap Once: Select and read the element
  • Slide Left or Right: Go to the previous or next readable focus area
  • A Quick Double-Tap: This is equivalent to a single tap, and you should use two fingers to slide.

Accessibility Programming Guide

Trends Artificial Intelligence Developers Mobile development Frontend Development imgcook Accessibility Barrier Free Design
0 0 0
Share on

Read previous post:

The Interpretation of iMove, the Process Visualization Tool

Read next post:

Imgcook: Intelligent Code Generation from Design Drafts with a 100% Accuracy Rate

Alibaba F(x) Team

66 posts | 3 followers

You may also like

Comments

Alibaba F(x) Team

66 posts | 3 followers

Related Products

More Posts by Alibaba F(x) Team

See All