Accessibility & Responsive Checker

Accessibility & Responsive Checker is an all-in-one developer tool designed to audit web pages for accessibility (WCAG) compliance and mobile responsiveness in a single click. Unlike standard checkers that only look at the desktop view, this extension performs a Dual-Pass Analysis: Desktop Analysis: Scans the current view for structural and accessibility issues. Mobile Simulation: Automatically attaches the debugger to simulate a mobile viewport (iPhone X dimensions), detecting layout breakages that only appear on smaller screens. Whether you are a Developer, QA Tester, or Designer, this tool helps you deliver higher-quality, inclusive web experiences. 🔍 Key Features 1. Advanced Accessibility Testing (Powered by axe-core) Detects WCAG 2.1/2.2 A and AA violations. Identifies low contrast text, missing ARIA labels, and incorrect roles. Flags "ghost" interactive elements (buttons without tabindex). Checks for focusable elements hidden from screen readers (aria-hidden="true"). 2. Deep Responsive Design Analysis Horizontal Overflow Detection: Finds elements causing unwanted horizontal scrolling on mobile. Touch Target Validator: Checks interactive elements against modern usability standards: Critical: Elements smaller than 24px (impossible to tap). Warning: Elements smaller than 44px (hard to tap). Font Legibility: flags text smaller than 11px. Responsive Tables & Media: Identifies tables, images, or videos that break the layout without scroll wrappers. 3. Mobile UX Enhancements Input Field Analysis: Suggests specific input types (e.g., email, tel, numeric) instead of generic text inputs to trigger the correct mobile keyboard. Viewport Configuration: Checks for missing meta tags or user-zoom restrictions (user-scalable=no). 4. Detailed Reporting View a clean, categorized summary of all issues directly in the popup. One-Click Copy: Generate a full text report (including HTML snippets and selectors) to paste into tickets (Jira, Trello, GitHub) or emails.