Tornar o site utilizável para pessoas com deficiência

Corrigir as barreiras práticas que impedem as pessoas de ler, navegar ou preencher formulários usando teclado ou tecnologia assistiva.

Tempo: ~45 minutos, mais testes manuais Dificuldade: Intermediate Funciona com: Base44 / Lovable / v0

Quando usar

Antes do lançamento e após qualquer mudança importante de design, navegação ou formulário.

Antes de começar

  • Conteúdo e imagens reais da página; textos alternativos significativos não podem ser escritos honestamente a partir de espaços reservados vazios.
  • O fluxo de usuário mais importante, como enviar uma consulta, fazer uma reserva ou concluir o checkout.
  • Quaisquer legendas ou transcrições que você já tenha para áudio e vídeo.
  • Tempo para realizar as verificações manuais de teclado e zoom no resultado esperado.

O prompt

Esses prompts funcionam melhor em inglês — cole-os como estão, mesmo em páginas traduzidas.

Review and improve the entire site for people with disabilities without changing its purpose or visual identity.

A screen reader is software that reads a page aloud and lets someone navigate by headings, links and controls. Make every page understandable in that order: use one clear main heading, sensible subheadings, meaningful link text, real buttons for actions, and labels that say what every form field does.

Make every menu, link, button, form, popup and close control usable with only a keyboard. Keyboard focus means the item currently selected by the keyboard: it must have a clearly visible outline and move in a sensible order. Do not trap someone inside a popup, and return focus to the right place when it closes.

Check text, button, form and error-message contrast in every normal, hover, selected and disabled state. Never use color alone to communicate success, warning, error or selection. Keep text readable when a visitor zooms to 200 percent and on a narrow phone.

Add useful alt text, which is a short description read aloud instead of an image, to images that carry information. Use [REAL DESCRIPTION OR PURPOSE] where my input is needed. Mark purely decorative images so the screen reader skips them. Do not invent details about people, products, food, places or results that are not visibly present.

Give every form field a persistent label, connect each error to the field that caused it, and move focus to a clear error summary after a failed submission. Add captions or a written transcript for [VIDEO OR AUDIO], and respect a visitor's reduced-motion setting, which is a device preference asking sites to limit movement.

Keep the style [CURRENT BRAND FEELING] with visible focus states that belong in the design. Test the main navigation and [MOST IMPORTANT USER FLOW] using only the keyboard, then give me a plain-language list of what you fixed, what I still need to describe or caption, and what requires a human test.

Já está criando? Cole isto no seu projeto. Começando do zero? Abra uma conta gratuita em um criador compatível abaixo.

Crie em

Como ganhamos dinheiro

O que isto cria

  • Estrutura de página, texto de link e rótulos de formulário claros
  • Acesso total via teclado com foco visível
  • Contraste mais forte e dicas de status que não dependam apenas de cores
  • Texto alternativo honesto e imagens decorativas corretamente ignoradas
  • Melhores erros de formulário, suporte a movimento reduzido e uma lista de testes humanos

Confira se funcionou

Cole o prompt, espere a construção terminar e então confirme estes pontos — em linguagem simples, sem verificações técnicas:

  • Começando no topo da página, você pode alcançar e usar o menu, todos os controles principais e todo o fluxo importante pressionando Tab, Shift+Tab, Enter e Espaço
  • Você sempre pode ver qual item está selecionado pelo teclado, e nenhum popup o mantém preso
  • Com 200 por cento de zoom, o texto permanece legível e os controles não se sobrepõem
  • Desligando a tela ou olhando para outro lado, a página ainda faz sentido quando lida por um leitor de tela
  • Erros de formulário nomeiam o problema e o levam de volta ao campo que precisa ser corrigido
  • Cada imagem significativa tem uma descrição precisa, e imagens decorativas não são lidas em voz alta

Faltou algo? É normal — peça em uma mensagem curta de acompanhamento em vez de rodar o prompt inteiro de novo.

Próximos passos

Testar um fluxo completo pelo teclado

Após a verificação geral de acessibilidade

Test [USER FLOW, e.g. choose a service and submit a booking] from beginning to end using only the keyboard. Fix anything that cannot be reached, activated, understood or escaped. Do not use a mouse during the test. Report each step in plain language and confirm where focus moves after errors and success.

Você saberá que funcionou quando: O fluxo completo pode ser concluído sem um mouse e o caminho de foco está documentado.

Revisar descrições de imagens comigo

Quando o site possui muitas fotos, diagramas ou imagens de produtos importantes

List every meaningful image on [PAGE OR SECTION] with its current alt text and the reason the image is there. Flag descriptions that are empty, generic, repetitive or that claim details not visible in the image. Do not rewrite the flagged items until I provide [THE REAL DESCRIPTION OR PURPOSE].

Você saberá que funcionou quando: Você recebe uma revisão honesta e uma lista curta de descrições que somente você pode fornecer.

Adicionar legendas e transcrições

Antes de publicar páginas com fala ou sons importantes

Add synchronized captions to [VIDEO] using [CAPTION FILE OR VERIFIED TEXT], and place a readable transcript near [VIDEO OR AUDIO]. Include spoken words and important non-speech sounds without inventing anything. Make both usable on a phone and by keyboard.

Você saberá que funcionou quando: Os visitantes podem acompanhar a mídia com o som desligado e ler as mesmas informações como texto.

Fique atento a

  • Uma pontuação automatizada não é uma prova. Scanners perdem ordens de leitura confusas, textos alternativos enganosos e fluxos que são exaustivos de usar. A solução é um curto teste manual de teclado e leitor de tela nas páginas reais.
  • Textos alternativos gerados podem inventar detalhes com confiança. Descreva apenas o que é visível e relevante para o propósito da imagem; deixe uma tarefa claramente marcada para o proprietário quando o construtor não puder saber.
  • Remover contornos de foco torna o site inutilizável pelo teclado. Substitua um padrão feio por um contorno claro e adequado à marca, nunca por nada.
  • O contraste deve cobrir todos os estados. Texto de marcador, botões desativados, guias selecionadas e erros embutidos são frequentemente esquecidos, mesmo quando o texto normal do corpo passa.
  • Widgets de acessibilidade adicionais, frequentemente chamados de overlays, não são um substituto confiável para a correção do site. Eles podem adicionar controles enquanto deixam as barreiras subjacentes no lugar, e podem criar novas.

Notas por plataforma

Todas as três plataformas principais podem implementar essas mudanças, mas nenhum construtor pode comprovar a acessibilidade apenas a partir do código gerado. A revisão de site publicado do Lovable pode sinalizar problemas comuns de acessibilidade, enquanto o Base44 e o v0 também podem aplicar correções de código e design quando solicitado explicitamente; todas as plataformas ainda precisam de testes de teclado, zoom e leitor de tela realizados por uma pessoa. Verificações automatizadas podem detectar texto alternativo ausente, mas não podem saber se a descrição é honesta ou útil.

Gaste menos créditos

Toda plataforma cobra pelo trabalho que a IA dela faz — então o hábito mais barato é pensar antes de construir. Estas seis regras cortam a maior parte do desperdício, qualquer que seja a plataforma.

  1. Planeje primeiro em um chat gratuito. Esboce tudo no ChatGPT, Claude ou Gemini — páginas, recursos, o que cada formulário coleta, como deve ficar. Pensar lá é grátis; pensar dentro de um builder é cobrado.
  2. Comece com um prompt escrito, não com uma frase. "Faça um site para mim" é a frase mais cara na construção com IA. Um primeiro prompt completo — como os deste site — economiza dezenas de rodadas de correção.
  3. Não tenha preguiça dos detalhes. Cada detalhe omitido volta como uma correção que você paga. Nome do negócio, cores, cada página, cada campo de formulário, o que acontece após o envio — coloque tudo no primeiro prompt.
  4. Depois, uma mudança por mensagem. "Arrume o cabeçalho, e o formulário, e as cores" gera um emaranhado que custa mais para desfazer do que economizou.
  5. Travou? Pare de remendar. Se a mesma correção falhar umas três vezes, não mande uma quarta — descreva o estado final desejado da seção inteira em uma mensagem nova.
  6. Comece grátis. Faça upgrade quando precisar de mais. Use a cota gratuita para criar e explorar sua primeira versão. Faça upgrade quando precisar de mais uso ou de recursos pagos, e confira os custos de serviços conectados antes de lançar.

Os prompts desta página foram escritos para fazer a maior parte desse trabalho por você — é esse o objetivo deles.

Leia o guia completo
accessibility keyboard screen-readers contrast

Revisado em: 2026-07-27

Perguntas Frequentes

Usamos cookies para analisar tráfego e rastrear cliques de afiliados. Ao continuar, você concorda com nossa Política de Privacidade.