HN 표시

Experiment: enforcing accessibility guardrails in AI-generated interfaces (Cursor, Lovable, Base44, Claude Code) using prompt-level instructions. AI development tools can now generate entire interfaces. But accessibility is rarely enforced during generation, and the result is that many AI-generated UIs ship with basic accessibility failures. This experiment explores whether a simple prompt-level enforcement loop can help reduce common accessibility problems during development, rather than fixing them later. The enforcement prompt instructs the AI to: - Identify critical user flows in the interface - Check a small set of high-impact accessibility requirements - Apply bounded fixes where appropriate - Produce a short report of what was improved and what remains risky The goal is not compliance. The goal is reducing accessibility risk during AI-assisted development. When enforcement mode runs, the AI follows a simple loop: - Identify critical flows (e.g., login, checkout, settings modal) - Evaluate key accessibility areas: - keyboard access - focus behavior - labels - semantic structure - Apply bounded fixes - Produce a short report: - what changed - what remains risky Problems: - No accessible name - Screen reader users cannot understand the button - The purpose of the control is unclear Fix applied: - Accessible label added - Decorative SVG hidden from screen readers - Control becomes understandable to assistive technologies - No visual change required AI-generated modals often miss keyboard support. X Problems: - No dialog role - No focus management expectations - Screen reader context unclear Subscribe × Email Fix applied: - Dialog semantics added - Accessible name provided - Form label added - Focus behavior becomes predictable for assistive technology This experiment does not claim to: - Automatically produce WCAG compliance - Replace accessibility testing - Replace accessibility expertise - Fix every accessibility issue Accessibility remains grounded in structured markup, testing, and real user validation. This experiment only explores whether AI generation can be guided toward safer defaults. - Copy the prompt from the file below - Paste it into your AI development tool (Cursor, Lovable, Base44, Claude Code, etc.) - Ask the AI to review or generate a UI using the enforcement instructions Prompt file: Use it when: - generating new interfaces - reviewing generated code - asking the AI to improve an existing UI The enforcement instructions focus on a small set of high-impact areas: - Keyboard operability - Focus management - Accessible labeling - Semantic HTML structure - Avoiding unnecessary ARIA - Bounded changes + short report (so developers can review diffs) These issues represent a large portion of real accessibility failures in generated interfaces. Example of a short enforcement summary the AI might produce: Accessibility Enforcement Summary Critical flows identified: - Login form - Settings modal Fixes applied: ✔ Added labels to icon-only buttons ✔ Corrected focus order in modal ✔ Replaced ARIA button with native button Remaining risks: - Contrast/reflow may require manual review (brand/layout sensitive) - Screen reader testing recommended - Complex components may require APG-aligned implementation AI is increasingly used to generate interfaces. If accessibility is not considered during generation, accessibility problems will scale with it. This experiment explores whether accessibility guidance can become part of the development infrastructure itself, rather than an afterthought. Accessibility Enforcement Mode did not appear fully formed. It evolved through multiple iterations while testing AI coding tools such as Cursor, Lovable, and Claude Code. During testing we repeatedly observed several failure modes: • accessibility hallucinations • uncontrolled code refactors • invented ARIA behaviors • false WCAG compliance claims • accessibility fixes drifting into UI redesign Each rule in the prompt was introduced to address one of these patterns. Over time the system evolved into a controlled remediation protocol designed to reduce accessibility risk during AI-assisted development. Instead of behaving like a generative assistant that freely rewrites code, the AI is guided to behave more like a cautious accessibility engineer performing staged remediation. If you're interested in the reasoning behind each guardrail and how the system evolved: → See EVOLUTION.md for the full retrospective. If you try this experiment, feedback is extremely valuable. Useful feedback includes: - Which AI tool you used - What the prompt fixed well - What it broke - Whether something like this would be useful in your workflow Feel free to open an issue or discussion. Improvements to guardrails, reporting structure, and standards alignment. Changes: • Added guidance to reference WCAG Success Criteria when identifying issues • Improved stability guardrails to reduce runaway edits in AI tools • Clarified contrast handling to av