Categorias

← View All Tools

Verificador de acessibilidade

Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas

Exemplos de resultados

2 Exemplos

Revisar um trecho de landing para rotulos ausentes

Analisa um bloco HTML e detecta botoes vazios, alt ausente e campos sem rotulo

Accessibility report with critical issues for images, links, buttons, and forms.
Ver parâmetros de entrada
{ "htmlInput": "<img src=\"/hero.png\"><a href=\"/pricing\"><svg></svg></a><button><svg></svg></button><input type=\"email\" />", "wcagLevel": "AA" }

Inspecionar um mockup por risco de contraste

Aplica heuristicas de contraste baseadas em paleta a uma imagem de design

Accessibility report with palette-based contrast warnings from a design image.
Ver parâmetros de entrada
{ "designImage": "/public/samples/images/logo.png", "wcagLevel": "AAA" }

Click to upload file or drag and drop file here

Maximum file size: 20MB Supported formats: image/png, image/jpeg, image/webp, image/svg+xml

Fatos principais

Categoria
Validation
Tipos de entrada
textarea, text, file, select
Tipo de saída
html
Cobertura de amostras
4
API disponível
Yes

Visão geral

O Verificador de Acessibilidade analisa trechos de código HTML, URLs de páginas web ou imagens de design para identificar problemas comuns de conformidade com as diretrizes WCAG 2.1. Com suporte para os níveis AA e AAA, a ferramenta detecta falhas de contraste, ausência de atributos alt, botões sem rótulos e problemas de navegação, gerando um relatório detalhado com orientações práticas para correção.

Quando usar

  • •Durante o desenvolvimento front-end para validar trechos de HTML antes de enviar para produção.
  • •Na fase de design de interface (UI) para verificar o contraste de cores em mockups e imagens.
  • •Em auditorias de acessibilidade para escanear URLs de páginas ativas em busca de violações das diretrizes WCAG.

Como funciona

  • •Insira o código HTML, informe a URL da página ou faça o upload de uma imagem de design (PNG, JPEG, WEBP ou SVG).
  • •Selecione o nível de conformidade desejado (WCAG AA ou WCAG AAA).
  • •A ferramenta processa a entrada e aplica heurísticas de acessibilidade para identificar falhas.
  • •Um relatório em HTML é gerado com os problemas encontrados e sugestões diretas de correção.

Casos de uso

Garantir que botões, links e campos de formulário em um novo componente HTML tenham rótulos adequados para leitores de tela.
Validar a paleta de cores de um protótipo de design para evitar problemas de leitura para usuários com baixa visão.
Realizar uma verificação rápida de conformidade WCAG 2.1 em uma landing page recém-publicada.

Exemplos

1. Revisão de acessibilidade em componentes HTML

Desenvolvedor Front-end
Contexto
Um desenvolvedor está criando a barra de navegação de um site com ícones SVG para links sociais e botões de busca.
Problema
Garantir que os ícones sem texto visível sejam compreendidos por leitores de tela.
Como usar
Cole o código HTML da barra de navegação no campo 'Entrada HTML' e selecione o nível 'WCAG AA'.
Configuração de exemplo
Nível WCAG: AA
Resultado
O relatório aponta que os botões com SVG estão vazios e sugere a adição de atributos 'aria-label' ou texto oculto.

2. Validação de contraste em mockup de UI

Designer de Interface (UI)
Contexto
A equipe de design finalizou a tela de login do aplicativo e precisa garantir que as cores atendam aos padrões de acessibilidade.
Problema
Verificar se o texto cinza sobre fundo claro possui contraste suficiente antes de passar o design para o desenvolvimento.
Como usar
Faça o upload do arquivo do mockup no campo 'Imagem de design' e defina o nível como 'WCAG AAA'.
Configuração de exemplo
Nível WCAG: AAA
Resultado
A ferramenta analisa a imagem e gera alertas de contraste baseados na paleta, indicando quais áreas precisam ser escurecidas para atingir a conformidade AAA.

Testar com amostras

xml, html, image
Exemplos de XML
Exemplos de formato XML (eXtensible Markup Language) de estruturas simples a complexas
preferred input family image
image
Exemplos de Processamento de Imagem Windows C++
Exemplos de processamento de imagem Windows C++ incluindo ler/salvar imagens, redimensionamento e conversão de formato usando Windows Imaging Component
preferred input family image
image
Exemplos SVG
Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG
preferred input family image
image
Exemplos de Processamento de Imagem Web Rust
Exemplos de processamento de imagem Web Rust incluindo leitura/gravação, redimensionamento e conversão de formato
preferred input family image
image

Hubs relacionados

Ferramentas de Image para Convert
Explore 100 ferramentas de image para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Text para Convert
Explore 80 ferramentas de text para fluxos de convert e encontre utilitários próximos com rapidez.
Ferramentas de Image
Explore 40 ferramentas de image para fluxos de utility e encontre utilitários próximos com rapidez.
Ferramentas de Xml para Convert
Explore 33 ferramentas de xml para fluxos de convert e encontre utilitários próximos com rapidez.

FAQ

Quais tipos de arquivos de imagem são suportados?

Você pode enviar imagens nos formatos PNG, JPEG, WEBP e SVG com tamanho máximo de 20 MB.

Qual a diferença entre os níveis WCAG AA e AAA?

O nível AA é o padrão exigido pela maioria das legislações, enquanto o AAA é o nível máximo de acessibilidade, com regras mais rígidas de contraste e navegação.

A ferramenta corrige o código automaticamente?

Não, ela gera um relatório apontando os erros e fornece orientações práticas para que você mesmo aplique as correções no seu código.

Posso testar uma página que exige login?

Não. Para páginas restritas, recomendamos copiar o código-fonte HTML da página autenticada e colá-lo no campo de entrada HTML.

O que a análise de imagem verifica?

Ela aplica heurísticas baseadas na paleta de cores da imagem para detectar possíveis riscos de baixo contraste visual.

Documentação da API

Ponto final da solicitação

POST /pt/api/tools/accessibility-checker

Parâmetros da solicitação

Nome do parâmetro Tipo Requerido Descrição
htmlInput textarea Não -
pageUrl text Não -
designImage file (Upload necessário) Não -
wcagLevel select Não -

Os parâmetros de tipo arquivo precisam ser carregados primeiro via POST /upload/accessibility-checker para obter filePath, depois filePath deve ser passado ao campo de arquivo correspondente.

Formato de resposta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentação de MCP

Adicione este ferramenta à sua configuração de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-accessibility-checker": {
      "name": "accessibility-checker",
      "description": "Detecta problemas comuns de WCAG 2.1 em HTML, paginas ou imagens de design e retorna orientacoes praticas",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessibility-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Você pode encadear várias ferramentas, ex: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máx 20 ferramentas.

Suporta links de arquivos URL ou codificação Base64 para parâmetros de arquivo.

Se você encontrar algum problema, por favor, entre em contato conosco em [email protected]