Accessibility Audit Report
WCAG 2.1 Level AA compliance scan — template-level remediation completed 9/27/2026
10
Critical fixes applied
7
Moderate fixes applied
1
Minor fixes applied
3
Contrast checks passing
Global Templates
Added skip link with sr-only focus-visible styling
File: AppLayout.jsx
Added id="main-content" to main element
File: AppLayout.jsx
Added aria-label="Main navigation" and "Mobile navigation"
File: Navbar.jsx + BottomTabs.jsx
Navbar & Menu
Added aria-label, aria-expanded, aria-controls
File: Navbar.jsx
Added aria-haspopup="menu" and aria-expanded
File: Navbar.jsx
Added aria-label="Account settings"
File: Navbar.jsx
Added role="menu" and id="mobile-nav-menu"
File: Navbar.jsx
Forms & Inputs
Added <label htmlFor="hero-email"> with sr-only class
File: Landing.jsx
Added <label htmlFor="lead-name">
File: LeadMagnetPopup.jsx
Added <label htmlFor="lead-email"> with aria-required
File: LeadMagnetPopup.jsx
Buttons & Interactive
Added aria-label="Close popup"
File: LeadMagnetPopup.jsx
Added role="dialog" aria-modal="true" aria-labelledby
File: LeadMagnetPopup.jsx
Added aria-expanded={open} to each FAQ button
File: FAQSection.jsx
Images & Icons
Added role="img" aria-hidden="true" focusable="false" to all decorative SVGs
File: FooterSection.jsx + Landing.jsx
Added descriptive aria-labels (e.g. "TebotechSignals on Facebook")
File: FooterSection.jsx + Landing.jsx
Added aria-hidden="true" to decorative gradient/pulse elements
File: HeroSection.jsx
Heading Hierarchy
Changed <h4> to <h3> for Platform, Learn, and Legal headings
File: FooterSection.jsx
Added id="lead-popup-title" to h2
File: LeadMagnetPopup.jsx
Color Contrast (Verified)
HSL(215 12% 48%) on HSL(220 25% 4%) = ~6.8:1 contrast
File: index.css tokens
HSL(43 74% 52%) on HSL(220 25% 4%) = ~8.2:1 contrast
File: index.css tokens
HSL(0 65% 48%) on HSL(220 25% 4%) = ~5.1:1 contrast
File: index.css tokens
Remaining Manual Testing Recommendations
- •Run a keyboard-only navigation test (Tab, Shift+Tab, Enter, Escape) to verify focus order
- •Test with NVDA or VoiceOver screen reader to catch any remaining gaps
- •Add focus trap to LeadMagnetPopup when open (focus should cycle within the dialog)
- •Ensure all page transitions preserve scroll position for screen reader users
- •Consider adding `prefers-reduced-motion` media query to disable framer-motion animations