How AI Enables “Write Code, Fix Accessibility” Across Front‑End Projects

Background and Motivation

While advancing accessibility for products like Taobao, teams repeatedly encounter three major pain points: difficulty discovering problems, high remediation cost, and uncontrolled quality. These challenges hinder efficient development and degrade user experience for people with disabilities.

Goal

Build an end‑to‑end AI‑powered accessibility engineering loop that provides automatic detection, intelligent fixing, and template adaptation, enabling a “write code, fix accessibility” experience for developers.

Solution Overview

The solution consists of three tightly coupled stages – AI code review (CR), AI‑driven auto‑fix, and DX template adaptation – and covers front‑end (Weex/H5) as well as DX templates. A knowledge base, detection scripts, and auto‑completion tools are integrated into both self‑test and production pipelines, delivering >95% fix quality while dramatically reducing manual effort. Future plans include extending the workflow to native iOS/Android and D2C code generation.

Problem Analysis

Analysis of 1,504 historical accessibility defects (up to 24‑04) revealed the following distribution for the top six categories:

Focus‑management issues – 55.1% (focus dispersion, redundancy, loss, etc.)

Text‑reading problems – 30.8%

Interaction‑recognition issues (component type, selected state) – 22.8%

The top six categories together account for 86.0% of all defects.

Root causes were identified as:

Lack of accessibility awareness among developers

Insufficient accessibility testing in the QA process

Weak engineering support (missing automated detection/fix tools)

High component complexity and custom UI libraries

We need an “automatic detection + automatic fix + quantifiable” accessibility engineering solution.

Knowledge Base & Case Library

To power AI suggestions, a systematic knowledge base was built, including:

Operation & development guides (e.g., “Accessibility Operations Document”, “Accessibility Development Basics”)

Typical problem library covering common web scenarios and front‑end/DX issue classifications

These resources serve as the factual foundation for AI review and auto‑completion, ensuring consistent, standards‑compliant recommendations.

AI Experiments

1. Automatic Detection Script

Trigger: page pre‑release deployment

Method: static source analysis of JSX/TSX files

Result (as of 25‑07): 246 located issues, 100% manual review accuracy

2. Q&A‑Style AI Auto‑Fix Tool

Workflow: after detection, AI generates concrete fix code

Historical replay test showed >95% fix accuracy

Provides the foundation for IDE auto‑completion and one‑click DX adaptation

Implementation Details

Front‑End (Weex/H5) Side

IDE plugin (IDEA) adds prompts for aria‑label, role, tabIndex etc.

Runs accessibility CR before commit, offering line‑level suggestions

Realizes “write code, fix accessibility” directly in the editor

DX Template Side

One‑click template adaptation generates an accessibility‑ready version of business templates

Unified role, state, and other accessibility attributes at the template layer

Reduces repetitive adaptation effort for downstream teams

Core Workflow & Architecture

The overall pipeline follows “AI Review → Intelligent Fix”.

Stage 1: Automatic Detection (AI Review Assistant)

Trigger: code commit or CR

Scope: all added/modified JSX/TSX files

Detection dimensions (customized for high‑frequency issues):

Component type & selected/disabled state

Image reading text (speech‑enabled vs decorative)

Completeness of reading text

Focus dispersion, redundancy, loss, etc.

Output: precise file/line location, risk level (P0/P1/P2), and actionable fix suggestions

Stage 2: Intelligent Fix (AI Code Completion)

Front‑End: IDE extension provides “smart completion + one‑click fix”

DX: LLM‑orchestrated batch fix for templates

Typical fix strategies:

Auto‑add aria‑label, role, accessibility attributes

Merge focus information via aria‑label, role, tabIndex Component‑level adaptation based on semantic and interaction models

Validation

Self‑Test Validation

Weex Platform – 54 issues (49 Excellent, 5 Good) → 100% excellent rate, 90.74% excellent proportion.

DX Platform – 52 templates (47 Excellent, 3 Good, 2 Bad) → 96.15% excellent rate, 90.38% excellent proportion.

Production Validation

Weex Production – 20 issues (16 Excellent, 3 Good, 1 Bad) → 95% excellent rate, 80% excellent proportion.

DX Production – 20 templates (16 Excellent, 4 Good) → 100% excellent rate, 80% excellent proportion.

Overall, the AI‑driven accessibility tools maintain ≥95% excellent rates in real‑world scenarios, substantially lowering manual remediation effort while preserving a stable user experience.

Developer Feedback

52 unique users invoked the tools, generating 266 sessions

Positive remarks on low learning curve, high accuracy (most fixes ready for release), and significant efficiency gains (focus shifted from manual fixing to interaction/UX design)

Future Directions

Finer‑grained detection: incorporate dynamic behavior analysis and multimodal semantics for complex scenarios

Deeper integration with design and automated testing to close the quality loop from mock‑up to production

Expand to native iOS/Android: add rules for native accessibility APIs (TalkBack, VoiceOver), provide auto‑completion for native components, and release supporting libraries and sample projects

Extend to D2C code generation to eliminate “pollute‑then‑fix” cycles and achieve low‑cost pre‑production accessibility compliance

Conclusion

The AI‑enabled accessibility engineering pipeline—covering detection, intelligent fixing, and template adaptation—delivers ≥96% excellent rates in controlled tests and ≥95% in production, dramatically cuts manual effort, and makes “write code, fix accessibility” a practical reality for front‑end teams.