4 Accessibility Mistakes AI Coding Assistants Make, and How to Catch Them
AI coding assistants are good at producing working components quickly. They learned from a huge amount of public code, and public code is full of accessibility mistakes — so the same mistakes come back in generated components, looking clean and passing a quick visual review. Here are four that show up often, the WCAG criterion each one fails, and how to catch them before they merge. 1. A…
AI coding assistants excel at generating functional code swiftly, but they frequently inherit accessibility errors from public code, which can then appear polished and pass superficial visual inspections. Four common accessibility blunders are identified, along with their associated Web Content Accessibility Guidelines (WCAG) criteria and methods for detection before deployment.
1. Clickable div lacking keyboard support: This occurs when users request a clickable card or custom button, resulting in a div with onClick functionality, leading to inaccessibility for keyboard users. The remedy involves using a button element, which is inherently focusable, activates with Enter and Space keys, and is recognized as a button by screen readers.
2. Inaccurate aria-labels: Some assistants add aria-labels to provide additional accessibility context, often using more descriptive phrases than the visible button text. However, this replaces the visible label, causing confusion for users relying on screen readers. The solution is to align the aria-label with the visible text or complement it with descriptive text immediately following the label.
3. Placeholders as labels: Input fields frequently utilize placeholders as labels, which disappear once typed, lack sufficient contrast, and cannot serve as dependable labels. Every input field should be accompanied by a visible, associated label.
4. Removed focus outlines: Some generated CSS resets remove focus outlines entirely, erasing the only visual indication for keyboard users of their position on the page. A better approach is to customize focus styles rather than removing them, ensuring keyboard-focused elements remain clearly visible.
To catch these accessibility issues, multiple strategies can be employed, including using linters, asking the assistant to generate native elements, manually checking keyboard navigation, inspecting the rendered page, and utilizing tools like ADAGuard. While AI assistants can help apply fixes once identified, they cannot verify a component's keyboard accessibility, making testing essential.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
