WCAG-Compliant UI Code Generator with A11y Guardrails

component_type: "navigation menu with dropdowns", framework: "React", styling_approach: "CSS modules", additional_requirements: "mobile responsive with hamburger menu"

```html <nav className={styles.navigation} role="navigation" aria-label="Main navigation"> <button className={styles.menuToggle} aria-expanded={isMenuOpen} aria-controls="main-menu" onClick={toggleMenu} > <span className="sr-only">Toggle navigation menu</span> <span className={styles.hamburger}></span> </button> <ul id="main-menu" className={`${styles.menu} ${isMenuOpen ? styles.open : ''}`}> <li className={styles.menuItem}> <button aria-expanded={dropdownOpen} aria-haspopup="true" onKeyDown={handleKeyDown} > Products <span aria-hidden="true">▼</span> </button> <ul className={styles.dropdown} role="menu"> <li><a href="/software" role="menuitem">Software</a></li> <li><a href="/hardware" role="menuitem">Hardware</a></li> </ul> </li> </ul> </nav> ``` ```css .menuToggle:focus, .menu a:focus { outline: 2px solid #005fcc; outline-offset: 2px; } .menu a { color: #333; /* Ensures 4.5:1 contrast ratio */ } @media (prefers-reduced-motion: reduce) { .dropdown { transition: none; } } ``` ## ACCESSIBILITY AUDIT: ✓ Semantic HTML: nav element with proper role ✓ ARIA patterns: expanded states, haspopup, controls ✓ Keyboard navigation: Enter/Space for buttons, Arrow keys for menu ✓ Color contrast: All text meets WCAG AA standards ✓ Screen reader: Hidden labels and proper announcements