AI can suggest alt text, ARIA attributes, and accessibility improvements. It can also miss context or suggest patterns that do not fit your UI. Use it as a helper and always verify with real testing and tools.
How AI can help with accessibility
AI assistants can:
- Draft alt text for images based on descriptions
- Suggest ARIA attributes for interactive elements
- Identify potential issues in existing markup
- Generate accessible component patterns
- Explain accessibility requirements and best practices
This speeds up a11y work, but AI does not replace testing.
Why AI accessibility suggestions need verification
| AI limitation | Example | Why it matters |
|---|---|---|
| Lacks visual context | Cannot see the actual image | Alt text may not match image content |
| Does not know page context | Suggests generic alt | Alt should reflect image's purpose on the page |
| May suggest wrong ARIA | Adds roles to native elements | Wrong ARIA can break accessibility |
| Cannot test interactions | Suggests keyboard handling | Does not verify it actually works |
| Missing runtime context | Suggests focus management | Does not test real focus behavior |
Always verify AI suggestions before shipping.
Using AI for alt text
AI can draft alt text from image descriptions or by analyzing surrounding code context.
Good prompts for alt text
This is a product image showing a blue running shoe from the side angle.
Write concise alt text for an e-commerce site.
Expected output: "Blue running shoe, side view"
This is a decorative background pattern.
Should it have alt text?
Expected output: Use alt="" for decorative images
Alt text verification checklist
- Alt is accurate to the image content
- Alt is concise (typically under 125 characters)
- Alt is not redundant (no "Image of" when context is clear)
- Alt reflects the image's purpose on this specific page
- Decorative images have empty alt (
alt="")
When to rewrite AI alt text
AI often produces generic or verbose alt text. Rewrite when:
- Too generic: "Person using computer" for a specific photo
- Too verbose: Long descriptions for simple images
- Wrong purpose: Describes appearance when function matters
- Redundant: "Click here button" when context is clear
Good alt text describes what the user needs to know, not everything visible.
ARIA attributes need human verification
AI can suggest ARIA roles and attributes, but wrong ARIA is worse than no ARIA.
ARIA principles to verify
- First rule of ARIA: Do not use ARIA if native HTML works
- No ARIA is better than bad ARIA: Wrong roles confuse users
- All ARIA roles must be complete: Role without required attributes fails
Common AI ARIA mistakes
| AI suggestion | Problem | Fix |
|---|---|---|
role="button" on <button> |
Redundant, already has role | Remove the role attribute |
aria-label duplicating visible text |
Redundant, causes double announcement | Remove aria-label |
role="link" on <div> |
Missing keyboard handling | Use <a> instead |
tabindex="1" |
Disrupts natural tab order | Use tabindex="0" or remove |
aria-hidden="true" on focusable element |
Creates invisible focus trap | Remove aria-hidden or remove from tab order |
Verification process
- Check ARIA Authoring Practices for correct patterns
- Test with a screen reader (VoiceOver, NVDA, or Narrator)
- Verify announced name, role, and state make sense
- Test keyboard navigation
Do not rely on AI alone for audits
AI can suggest improvements, but cannot replace proper testing:
Use AI for:
- Generating initial suggestions
- Explaining WCAG requirements
- Drafting accessible component patterns
- Identifying obvious issues in code
Still required:
- Automated tools: axe, WAVE, Lighthouse accessibility
- Keyboard testing: Tab through every interactive element
- Screen reader testing: Test with NVDA, VoiceOver, or Narrator
- Zoom testing: Test at 200% and 400% zoom
- Color testing: Check contrast ratios
Accessibility testing workflow
- AI review: Ask AI to identify potential issues
- Automated scan: Run axe or similar tool
- Keyboard test: Tab through the entire page
- Screen reader test: Use real screen reader
- Manual review: Check color contrast, zoom, focus indicators
Keep accessibility in your prompts
When requesting new UI, include accessibility requirements:
In component prompts
Create a dropdown menu component.
Requirements:
- Keyboard navigable with arrow keys
- Escape closes the menu
- Focus returns to trigger on close
- Proper ARIA attributes (menu, menuitem roles)
- Visible focus indicators
In UI feature prompts
Add a modal dialog to this component.
Accessibility requirements:
- Focus trap inside modal
- Escape key closes
- Focus returns to trigger on close
- role="dialog" with aria-labelledby
- Backdrop click closes (with keyboard alternative)
Better prompts produce better first drafts.
Accessibility issues AI often misses
| Issue | Why AI misses it | How to catch it |
|---|---|---|
| Focus indicator visibility | AI does not see the visual result | Manual visual review |
| Focus order | AI does not test tab sequence | Keyboard testing |
| Dynamic content announcements | AI does not test screen readers | Live region testing |
| Touch target size | AI does not test on mobile | Manual device testing |
| Motion preferences | AI may not consider prefers-reduced-motion | Check CSS for motion queries |
| Color-only information | AI may not recognize color reliance | Color blindness simulators |
Learn basics to verify effectively
You do not need to be an accessibility expert to catch obvious issues. Learn:
- Semantic HTML: Use the right elements (
<button>,<a>,<nav>) - Focus management: Understand tab order and focus indicators
- ARIA basics: Know when to use it and when not to
- Color contrast: Understand WCAG AA requirements (4.5:1 for text)
- Keyboard navigation: Every interactive element must be keyboard accessible
This baseline knowledge helps you evaluate AI suggestions.
Summary
AI helps with accessibility by suggesting alt text, ARIA attributes, and improvements. But it cannot replace proper testing:
- Use AI for drafts: Alt text, ARIA suggestions, accessible patterns
- Verify everything: Check against ARIA practices, test with real tools
- Never skip testing: Keyboard, screen reader, automated tools
- Include a11y in prompts: Better requirements yield better output
- Learn the basics: Knowledge helps you evaluate AI suggestions
For more on accessibility fundamentals, see Web accessibility basics. For general AI coding practices, see AI-assisted coding: practical tips.