Web accessibility isn't optional — it's a legal requirement in many jurisdictions and essential for the 15% of the global population living with disabilities. Yet accessibility issues are invisible during normal development and testing. A button might look fine but be completely inaccessible to screen readers because it's a styled div without a role attribute. Text might be readable to you but fail contrast requirements for users with low vision. Accessibility Inspector surfaces these invisible issues automatically. It checks dozens of WCAG 2.1 Level AA criteria including color contrast ratios (minimum 4.5:1 for normal text, 3:1 for large text), missing alt text on images, missing labels on form inputs, improper ARIA roles and attributes, missing document landmarks (nav, main, footer), and keyboard focus indicators. Each issue includes the affected element, the specific WCAG criterion violated, and a recommendation for how to fix it. Click any issue to highlight the element on the page.
Runs automated checks against WCAG 2.1 Level AA success criteria including perceivability, operability, understandability, and robustness categories. Each check shows the specific criterion (e.g., 1.4.3 Contrast, 1.1.1 Non-text Content) and pass/fail status.
Calculates the contrast ratio between text and background colors for every text element on the page. Flags elements below 4.5:1 for normal text or 3:1 for large text (18px+ or 14px+ bold). Shows the actual ratio and the minimum required.
Scans every img, svg, and image role element. Flags missing alt attributes, empty alt on non-decorative images, and overly generic alt text ("image", "photo"). Suggests whether each image needs descriptive alt, empty alt (decorative), or role="presentation".
Checks for improper ARIA role usage (roles on wrong elements), missing required ARIA attributes (e.g., aria-label on icon buttons), duplicate IDs referenced by aria-labelledby, and missing landmark regions (no main, no nav). Recommends semantic HTML alternatives.
Ensures every form input (text, email, password, checkbox, select) has an associated label — either through a label element with matching for/id, aria-label, or aria-labelledby. Unlabeled inputs are inaccessible to screen readers.
Issues are categorized as Errors (must fix — barriers to access), Warnings (should fix — potential barriers), and Passes (confirmed accessible). Error count is prominently displayed. Click any issue to highlight the affected element on the page.
Before launching a new page or feature, run the Accessibility Inspector to catch issues early. Missing alt text, unlabeled form fields, and contrast violations are easy to fix during development but expensive to discover in production.
Many jurisdictions require WCAG 2.1 Level AA compliance (ADA in the US, EAA in the EU). Run the inspector on your public-facing pages to identify compliance gaps before they become legal risks.
Include accessibility checking as part of your QA process. After visual QA and functional testing, run the Accessibility Inspector to verify that the implementation doesn't introduce accessibility regressions.
Run the inspector on your current site during a team meeting to show real accessibility issues. The visual highlighting and clear explanations help developers understand what accessible markup looks like and why it matters.
Audit pages that include third-party widgets, embedded content, or user-generated HTML. These sources often introduce accessibility issues (missing alt text, contrast violations) that you're still responsible for as the page owner.
Open the DevSuite Pro floating dock and click the Accessibility Inspector icon. The tool scans the page DOM for accessibility issues.
A categorized report appears with Errors (red), Warnings (yellow), and Passes (green). Each section lists specific issues with affected elements and WCAG criteria references.
Click any issue to highlight the affected element on the page with a colored border and scroll to it. The connection between the report and the DOM element is immediate.
Each issue includes a specific recommendation: "Add alt text describing the image content", "Increase font color contrast to at least 4.5:1", "Add a label element with for='email'".
Make changes in your code, reload the page, and run the audit again. The error count should decrease as issues are resolved. Aim for zero errors.
