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:

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

&lt;image aria-hidden={true}&gt;  // remove from focus, not accessible
    ...
&lt;/image&gt;</code>

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.

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

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

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

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