Make Your Apps and Websites Fully Accessible: Practical Tips and Auto‑Generated Code

Why Support Accessibility?

With smartphones in almost every hand, even seniors use video platforms, news apps, and social media. Blind users can also learn, shop, entertain, communicate, and work online, but they rely on screen‑reader support to navigate content.

Typical Screen‑Reader Interaction

Touch the screen to set focus.

The screen reader announces the focused element.

The user interacts, and focus updates accordingly.

Built‑In Platform Support

iOS devices include VoiceOver.

Android devices include TalkBack.

Windows offers screen‑reader software such as NVDA, 永德, 争渡, and 阳光.

Common Accessibility Problems

Focus merging: Images and text are read separately instead of as a single item.

Content hinting: Buttons like “换一换” are not announced as clickable.

Focus confusion: After changing content, the reader may still announce the previous title.

What Developers Should Do

After enabling screen‑reader support, developers need to help the reader convey the right information:

Reasonably divide focus.

Use semantic elements.

Optimize spoken hints.

In code this translates to setting a few key attributes:

<div
    accessible={true}   // merge focus, divide focus logically
    aria-label={'这是一个商品'} // improve spoken hint
    role="link"        // semantic element, indicates clickable
    onClick={() => {
        window.open('xx');
    }}
>
    ...
</div>

<image aria-hidden={true}>  // remove from focus, not accessible
    ...
</image>

Best Practices

Add missing aria-label to images and banners.

Reduce unnecessary focusable elements by using aria-hidden={true} on inner nodes.

Combine related nodes into a single focusable area with an appropriate aria-label.

Examples include:

Header buttons: add aria-label="活动链接".

Carousel items: set aria-hidden={true} on inner cells and aria-label="运动酷玩" on the outer cell.

Bottom navigation: hide inner items and label the outer cell as aria-label="主会场".

Ranking tags: set aria-label to the title of the list.

Empty coupon placeholders: add aria-label="活动链接".

Imgcook Auto‑Generates Accessibility Code

During DSL conversion, Imgcook inserts common accessibility attributes automatically.

Rules:

If a node has an onClick event, Imgcook adds accessible={true}, role="link", and an aria-label composed of the node’s inner text.

If a node has an href attribute, it adds accessible={true} and an appropriate aria-label.

If a node is an image without an onClick, Imgcook adds aria-hidden={true} to remove it from the focus order.

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

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

<Picture
    style={styles.item}
    source={{uri: item.itemImg}}
    aria-hidden={true}   // hide image from screen reader
/>

Testing Accessibility

iOS: Enable VoiceOver via Settings → General → Accessibility → VoiceOver. Use Siri to toggle, or set a shortcut for quick activation.

Android: Enable TalkBack via Settings → Accessibility → TalkBack (or search for “talkback”).

After activation, tap an element to hear it, swipe left/right to move focus, double‑tap to activate, and use two‑finger gestures for scrolling.

Further Reading

iOS Accessibility Programming Guide – link

Android Accessibility Development Guide – link

Web Content Accessibility Guidelines (WCAG) – link

WAI‑ARIA Specification – link

React Native Accessibility – link