A11YN: aligning LLMs for accessible web UI code generation

TL;DR

A11yn presents a reinforcement learning framework that aligns code-generating LLMs to produce accessibility-compliant web UIs by optimizing an Axe Core WCAG-based accessibility reward. The method uses Group-Relative Policy Optimization (GRPO) to update the policy without a critic, guided by a bounded reward r_i = max(0, B - p_i) where p_i aggregates severity-weighted WCAG violations. With UIReq-6.8K as training data and RealUIReq-300 as a realistic evaluation set, A11yn achieves substantial reductions in Inaccessibility Rate (IR) and Weighted Violation Score (WVS) while preserving semantic fidelity and appearance, suggesting that accessibility goals can be learned directly within LLM-driven code generation. The work emphasizes scalable, end-to-end improvement of accessibility in UI code and points to broader applications in HCI systems beyond web UIs.

Abstract

Large language models (LLMs) have recently demonstrated strong capabilities in generating functional and aesthetic web interfaces directly from instructions. However, these models often replicate accessibility flaws from their training data, resulting in interfaces that exclude users with diverse needs and contexts. To address this gap, we introduce A11yn, the first method that aligns code-generating LLMs to reliably produce accessibility-compliant web UIs. A11yn optimizes a novel reward function that penalizes violations of the Web Content Accessibility Guidelines (WCAG), with penalties scaled to the severity of each violation as identified by an accessibility testing engine. To support training, we construct UIReq-6.8K, a dataset of 6,800 diverse instructions for web UI generation. For evaluation, we introduce RealUIReq-300, a benchmark of 300 real-world web UI requests grounded and manually curated from public web pages, spanning a broad range of use cases. Empirical results show that A11yn significantly outperforms strong baselines, lowering the Inaccessibility Rate by 60% over the base model while preserving semantic fidelity and visual quality of generated UIs. These findings demonstrate that accessibility can be systematically optimized within LLMs, showing the feasibility of aligning code generation for accessibility.

Figures (7)

• Figure 1: A11yn enhances accessibility in UI-generative LLMs. Whereas base models often produce inaccessible code, A11yn generates web UIs with improved accessibility features, supporting screen readers with better readability, smoother navigation, and clearer image descriptions.
• Figure 2: A11yn optimizes accessibility through reinforcement learning (GRPO). For an instruction $q$, the policy LLM $\pi_\theta$ generates candidate UI codes $\{o_{1}, \dots, o_{G}\}$. Each code receives an accessibility reward $\{r_{1}, \dots, r_{G}\}$, which is normalized within the set of candidates to compute advantages. The policy $\pi_\theta$ is then updated via policy gradient using these advantages.
• Figure 3: t-SNE visualization of the training set. Each point represents a UI request, with colors indicating distinct application categories. The spread shows coverage across multiple domains with examples in the figure.
• Figure 4: RealUIReq-300 is curated from real web UIs with diverse use-case domains. User requests are inversely generated from screenshots and metadata extracted, then refined to produce realistic instructions aligned with the original UIs.
• Figure 5: Examples of accessibility violations (weak color contrast) in base model outputs (left) versus accessibility-aware outputs from A11yn (right). A11yn enhances color contrast beyond WCAG standards, improving readability for users with visual impairments.