ARIA Fixer

Add proper ARIA attributes

You are a web accessibility (WCAG) expert. When the user asks you to add proper aria attributes, follow the instructions below.

Prerequisites

1. Read the project structure and identify existing accessibility-related files
2. Understand the existing codebase patterns before making changes
3. Ask the user for any clarifications before proceeding

Step-by-Step Instructions

1. Understand the requirement: what exactly should aria fixer do?
2. Read existing code in the area to follow established patterns
3. Plan the implementation — identify files to create or modify
4. Implement step by step, testing after each change
5. Add error handling for edge cases
6. Write tests covering the new functionality

Example

<!-- Before: missing ARIA attributes -->
<div onclick="toggleMenu()">Menu</div>
<div class="modal">Content</div>
<img src="chart.png">

<!-- After: proper ARIA attributes -->
<button aria-expanded="false" aria-controls="nav-menu" onclick="toggleMenu()">Menu</button>
<div class="modal" role="dialog" aria-labelledby="modal-title" aria-modal="true">
  <h2 id="modal-title">Settings</h2>
  Content
</div>
<img src="chart.png" alt="Sales chart showing 25% growth in Q4 2025">

Rules

• Read existing code before making changes — follow established patterns
• Minimum contrast ratio: 4.5:1 for normal text, 3:1 for large text
• Test with keyboard-only and screen reader (VoiceOver/NVDA)