How do I make my web app accessible to screen readers and keyboard users?▼
Accessibility requires semantic HTML, ARIA roles and labels, logical keyboard navigation with visible focus indicators, and screen reader testing. This Skill guides implementation of WCAG 2.1/2.2 patterns across SPAs, PWAs, and traditional apps, covering ARIA semantics, keyboard tab order, skip links, focus management, and screen reader announcements to meet AA/AAA compliance.
What does WCAG compliance mean and how do I audit my app against it?▼
WCAG (Web Content Accessibility Guidelines) 2.1/2.2 defines accessibility standards at AA and AAA levels, covering keyboard navigation, color contrast, screen reader support, and focus management. This Skill automates audits using Axe-core, Lighthouse, and Pa11y, then guides manual keyboard and screen reader testing to identify gaps and enforce best practices across your application.
How do I implement ARIA patterns correctly in my components?▼
ARIA patterns standardize roles, states, and live regions for interactive components. This Skill provides a pattern library with proper ARIA implementation guidance for buttons, modals, menus, and other controls, ensuring screen readers announce dynamic content changes and keyboard users can navigate logically without relying on mouse events.
Can I use this Skill to test accessibility on single-page apps and PWAs?▼
Yes. This Skill applies to SPAs, PWAs, and multi-page applications across planning, development, and QA phases. It covers automated testing with Axe-core and Lighthouse, plus manual keyboard and screen reader validation workflows that account for dynamic content, focus management, and live region updates unique to client-side rendering.
What accessibility issues does automated testing miss?▼
Automated tools like Axe-core catch color contrast and missing alt text, but miss keyboard navigation logic, screen reader announcement clarity, focus trap behavior, and real user workflows. This Skill combines automated scanning with manual keyboard and screen reader testing to validate focus management, tab order, and semantic meaning that automated checks cannot confirm.
Does this cover visual accessibility beyond color contrast?▼
Yes. Beyond color contrast fixes, this Skill addresses text sizing, motion preferences (respecting prefers-reduced-motion), readable font sizes, and visual focus indicators. It ensures compliance with WCAG visual accessibility criteria and supports users with low vision, color blindness, and motion sensitivity across Section 508 and ADA requirements.
