O Inspetor de Acessibilidade executa verificações automatizadas de WCAG 2.1 Nível AA em qualquer página web e produz um relatório categorizado de problemas de acessibilidade. Detecte taxas de contraste de cores insuficientes, texto alternativo de imagem ausente, funções e atributos ARIA impróprios, rótulos de formulário ausentes, problemas de navegação por teclado e regiões de marcos ausentes — com destaque de elemento em um clique para cada problema encontrado.
A acessibilidade na web não é opcional — é um requisito legal em muitas jurisdições e essencial para os 15% da população global que vivem com deficiências. No entanto, os problemas de acessibilidade são invisíveis durante o desenvolvimento e testes normais. Um botão pode parecer bom, mas ser completamente inacessível para leitores de tela porque é uma div estilizada sem um atributo de função (role). O texto pode ser legível para você, mas falhar nos requisitos de contraste para usuários com baixa visão. O Inspetor de Acessibilidade traz esses problemas invisíveis à tona automaticamente. Ele verifica dezenas de critérios WCAG 2.1 Nível AA, incluindo taxas de contraste de cores (mínimo 4.5:1 para texto normal, 3:1 para texto grande), texto alternativo ausente em imagens, rótulos ausentes em entradas de formulário, funções e atributos ARIA impróprios, marcos de documento ausentes (nav, main, footer) e indicadores de foco de teclado. Cada problema inclui o elemento afetado, o critério WCAG específico violado e uma recomendação de como corrigi-lo. Clique em qualquer problema para destacar o elemento na página.
Executa verificações automatizadas contra os critérios de sucesso WCAG 2.1 Nível AA, incluindo as categorias de perceptibilidade, operabilidade, compreensibilidade e robustez. Cada verificação mostra o critério específico (ex: 1.4.3 Contraste, 1.1.1 Conteúdo Não Textual) e o status de aprovação/falha.
Calcula a taxa de contraste entre as cores do texto e do fundo para cada elemento de texto na página. Sinaliza elementos abaixo de 4.5:1 para texto normal ou 3:1 para texto grande (18px+ ou 14px+ negrito). Mostra a taxa real e o
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.
Instale o DevSuite Pro gratuitamente e desbloqueie mais de 39 ferramentas de desenvolvedor para seu navegador.
