How to Make Your Apps Truly Accessible with Automatic Imgcook Code

Previously I wrote about the lack of accessibility awareness in our projects; now Imgcook can generate both UI and accessibility code automatically.

Why Support Accessibility?

With smartphones ubiquitous, even seniors use video apps, news feeds, and online shopping. Blind users can also learn, shop, entertain, communicate, and work online, but many developers assume they cannot access the web.

Typical Screen‑Reader Interaction

A blind user typically follows these steps:

Touch the screen to obtain focus.

The screen reader reads the focused element.

The user performs an action and receives feedback.

Both iOS (VoiceOver) and Android (TalkBack) provide built‑in screen‑reader support.

Common Problems

Focus merging: images and text are read separately instead of as a single product description.

Content hinting: interactive elements like "Change" buttons are not announced as clickable.

Focus confusion: after changing a carousel, the reader still announces the previous title.

Developers need to ensure that screen readers convey the correct information.

What Developers Should Do

Address the issues above by:

Properly partitioning focus.

Using semantic elements.

Optimizing ARIA labels.

In code this translates to setting a few key attributes:

<div accessible={true} aria-label='This is a product' role="link" onClick={() => { window.open('xx'); }}>...</div>

<image aria-hidden={true} ... />

Best Practices from Past Campaigns

Add missing aria-label to promotional images and banners.

Reduce unnecessary focusable elements by using accessible={true} on the outer container and aria-hidden={true} on inner nodes.

For bottom navigation, aggregate the entire bar into one focusable element with an appropriate label such as "Main Hall".

Combine list items and tags into a single focusable node with a descriptive aria-label.

Label placeholder coupon images with aria-label="Activity Link" so they are announced.

Imgcook Automatic Accessibility Generation

Imgcook can inject accessibility attributes during DSL conversion. When a component has an onClick handler, Imgcook adds accessible, role, and an aria-label composed of the node’s inner text. If a component has an href, it adds accessible and aria-label. Images without click handlers receive aria-hidden={true} to remove them from the focus order.

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

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

<Picture style={styles.item} source={{uri: item.itemImg}} aria-hidden={true} />

By adding this logic to a custom DSL, any page can become accessibility‑compliant automatically.

Testing Methods

After development, test on a device:

iOS: enable VoiceOver via Settings → Accessibility → VoiceOver, or use Siri command "VoiceOver".

Android: enable TalkBack via Settings → Accessibility → TalkBack.

When enabled, tap selects and reads an element; swipe left/right moves between focusable items; double‑tap activates the element.

Further Reading

iOS Accessibility Guide: Apple Docs

Android Accessibility Guide: Android Docs

Web Accessibility (WCAG) and WAI‑ARIA specifications.

ReactNative Accessibility documentation.

By following these practices and leveraging Imgcook’s DSL, developers can ensure their web and mobile products are truly accessible to users with visual impairments.