/
← L2: Design Systems and AI-Driven Scaffoldings Lab 1: Generate a UI design system in Figma →
Module 6 — UI and Experience Generation with AI

L3: Accessibility and Responsiveness Constrain

L3: Accessibility and Responsiveness Constrain

Accessibility and Responsiveness Constraints

In the previous lessons, we successfully scaffolded design systems and generated UI components from Figma. However, an enterprise frontend is not considered production-ready just because it looks good on a 1080p desktop monitor. It must work flawlessly on mobile devices and remain fully accessible to users with disabilities.

Because LLMs do not inherently "see" screen sizes or use screen readers, they will default to fixed-width, inaccessible code unless explicitly constrained. This lesson covers how AI Architects enforce Responsiveness and Accessibility (a11y) during autonomous UI generation.

1. The "Lazy UI" Hallucination

When Claude generates HTML/CSS without structural boundaries, it often falls victim to the "Lazy UI" pattern:

  • Fixed Widths: Generating <div class="w-[800px]"> instead of fluid percentages or flexbox layouts.

  • Div-ification: Using generic <div> tags for interactive elements, which screen readers cannot interpret.

  • Missing States: Forgetting to generate :hover, :focus, or :active states, making keyboard navigation impossible.

The Architectural Fix: You cannot ask Claude to "make it accessible and responsive" as a vague afterthought. You must weave mathematical WCAG (Web Content Accessibility Guidelines) rules and mobile-first paradigms directly into the system prompt.

2. Enforcing "Mobile-First" Responsiveness

Responsive design should not be a secondary pass; it must be the default generation state. In modern frameworks like Tailwind CSS, this means enforcing a Mobile-First paradigm.

Architectural Constraints (CLAUDE.md snippet):

  • "You MUST write UI code using a mobile-first approach. All base utility classes must target mobile screens (e.g.,flex-col, w-full)."

  • "Use breakpoints (md:, lg:) strictly to scale up for larger screens (e.g., flex-col md:flex-row)."

  • "You are forbidden from using fixed pixel widths (likew-[500px]) for layout containers. Use relative sizing (w-full, max-w-7xl, flex-1)."

By forcing the agent to write the mobile layout first, you mathematically prevent the UI from overflowing on small devices, which is the most common AI-generated frontend bug.

3. Engineering Accessibility (a11y) by Default

Accessibility is often the hardest thing for human developers to remember, making it the perfect task to offload to an autonomous agent—provided the agent is given the right checklist.

When defining the UI generation prompt, architects mandate the following a11y standards:

  • Semantic Native Elements: "If an element triggers an action, it must be a <button> or <a>. Never use a <div onClick={...}>."

  • ARIA Attributes: "If you generate a complex custom component (like a modal or a dropdown), you MUST include the correct ARIA roles (role="dialog", aria-expanded, aria-hidden)."

  • Keyboard Focus: "Every interactive element must have a distinct, highly visible focus state (e.g., focus:ring-2 focus:ring-blue-500 focus:outline-none) to support keyboard navigation."

  • Color Contrast: "Ensure all text-to-background combinations meet the WCAG AA contrast ratio of at least 4.5:1."

4. The "Dark Mode" and Theming Constraint

Modern enterprise apps require Dark Mode. An unconstrained agent will often hardcode text as text-black and backgrounds as bg-white, completely breaking the app when a user switches to a dark theme.

The Agentic Pattern:

Force Claude to use semantic theme tokens instead of absolute colors.

  • Constraint: "Do not hardcode bg-white or text-black. You must support both Light and Dark modes simultaneously using Tailwind's dark: modifier (e.g., bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100)."

5. Automated Auditing via the Reviewer Agent

Just as we use a Reviewer Agent for backend Python code (Module 5), architects deploy a specialized UI Auditor Agent for frontend code.

  • The Workflow: After the Generator Agent writes the React component, the code is passed to the UI Auditor Agent.

  • The Auditor Prompt: "You are a strict Web Accessibility Expert. Scan this generated DOM. List any missingalt tags on images, any interactive elements lacking a focus state, and any containers that lack responsive breakpoint modifiers. If you find violations, reject the code and send it back for revision."

  • Architectural Advantage: This multi-pass strategy catches a11y and responsiveness errors in the CI/CD pipeline, ensuring that non-compliant code never reaches the human PR review stage, let alone production.