Glossário

Erros de acessibilidade, explicados

Cada falha que o nosso verificador (e o Lighthouse, e o axe) pode reportar, em palavras simples: o que significa, quem fica de fora e como corrigir, com código e sem código.

A acessibilidade é o centro do que a Rampa verifica em um único escaneamento grátis, junto com segurança, privacidade e legal.

• A página não declara seu idioma html-has-langO leitor de tela adivinha o idioma e lê português com voz em inglês (ou o contrário): não se entende nada.pessoas cegas (leitor de tela)
• A página não tem título document-titleA aba do navegador fica vazia e o leitor de tela não consegue dizer em que página está. Também prejudica no Google.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• A página não tem um título principal page-has-heading-onePessoas cegas navegam por títulos; sem um principal a página não tem ponto de partida.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• A página recarrega ou redireciona sozinha meta-refreshA página recarrega por conta própria; quem usa leitor de tela perde o fio.pessoas com deficiência cognitiva · pessoas cegas (leitor de tela)
• Áreas clicáveis de imagem sem nome area-altAs áreas de um mapa de imagem não têm texto e o leitor de tela não consegue dizer aonde cada uma leva.pessoas cegas (leitor de tela)
• Áreas com rolagem inalcançáveis pelo teclado scrollable-region-focusableUma caixa com rolagem (menu, lista de produtos) não pode ser percorrida sem mouse.pessoas que não conseguem usar o mouse
• Áreas de navegação repetidas sem nome landmark-uniqueVários menus são anunciados da mesma forma; não dá para distingui-los.pessoas cegas (leitor de tela)
• Atalhos de teclado duplicados accesskeysDois elementos compartilham a mesma tecla de atalho; só um funciona.pessoas que não conseguem usar o mouse
• Atributos de acessibilidade escritos errado aria-valid-attrUm atributo aria-* está escrito errado e não faz nada.pessoas cegas (leitor de tela)
• Atributos de acessibilidade mal usados aria-allowed-attrParte da marcação de acessibilidade é contraditória e as tecnologias assistivas podem ignorá-la ou lê-la errado.pessoas cegas (leitor de tela)
• Áudio que toca sozinho no-autoplay-audioO som começa automaticamente e abafa o leitor de tela.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• Áudio sem transcrição audio-captionVisitantes surdos não recebem nada do áudio.pessoas surdas
• Barra lateral aninhada dentro de outra área landmark-complementary-is-top-levelUma barra lateral está dentro do conteúdo principal e é anunciada no lugar errado.pessoas cegas (leitor de tela)
• Barras de progresso sem nome aria-progressbar-nameUma barra de progresso não diz o que está avançando.pessoas cegas (leitor de tela)
• Botões de formulário sem nome input-button-nameUm botão de enviar ou limpar não tem texto e é anunciado só como "botão".pessoas cegas (leitor de tela)
• Botões de imagem sem nome input-image-altUm botão feito com uma imagem (buscar, enviar) é anunciado como "botão" sem dizer para que serve.pessoas cegas (leitor de tela)
• Botões pequenos demais para tocar target-sizeAlguns botões ou links são menores que a ponta de um dedo. Clientes mais velhos e pessoas com tremor não acertam.pessoas que não conseguem usar o mouse · quem entra pelo celular
• Botões personalizados sem nome aria-command-nameElementos que se comportam como botões ou links não têm nome para o leitor de tela.pessoas cegas (leitor de tela)
• Botões sem nome button-nameBotões que são só um ícone (menu, carrinho, fechar) são lidos apenas como "botão". Um cliente cego não distingue o carrinho do botão de fechar.pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Cabeçalho aninhado dentro de outra área landmark-banner-is-top-levelO cabeçalho está dentro de outra área.pessoas cegas (leitor de tela)
• Cabeçalhos de tabela com scope inválido scope-attr-validAs células de cabeçalho declaram um scope que não existe.pessoas cegas (leitor de tela)
• Cabeçalhos de tabela sem dados th-has-data-cellsUm cabeçalho não tem células abaixo; o leitor de tela anuncia uma coluna vazia.pessoas cegas (leitor de tela)
• Campos com dois rótulos form-field-multiple-labelsO leitor de tela pode ler o errado.pessoas cegas (leitor de tela)
• Campos de formulário sem rótulo labelNos seus formulários (compra, contato, cadastro) há campos que não dizem o que vai ali. Um cliente cego ouve "caixa de texto" e não consegue terminar a compra.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• Campos personalizados sem nome aria-input-field-nameUm campo de texto, controle deslizante ou combobox personalizado não tem nome para o leitor de tela.pessoas cegas (leitor de tela)
• Campos rotulados só por uma dica label-title-onlyO único rótulo do campo é uma dica ao passar o mouse, que o leitor de tela e quem usa tela sensível ao toque podem nunca receber.pessoas cegas (leitor de tela)
• Células de tabela apontando para o cabeçalho errado td-headers-attrAs células referenciam um cabeçalho que não existe e a tabela é lida fora de ordem.pessoas cegas (leitor de tela)
• Colunas de tabela sem cabeçalho empty-table-headerUma tabela tem uma célula de cabeçalho vazia e o leitor de tela não consegue dizer o que a coluna contém.pessoas cegas (leitor de tela)
• Conteúdo incorporado inalcançável pelo teclado frame-focusable-contentUm quadro está oculto para o teclado, mas contém coisas com que interagir.pessoas que não conseguem usar o mouse
• Conteúdo incorporado que não conseguimos testar frame-testedUm quadro incorporado (mapa, vídeo, formulário) não pôde ser verificado; pode esconder mais problemas.pessoas cegas (leitor de tela)
• Conteúdo incorporado sem título frame-titleUm mapa, vídeo ou formulário incorporado é anunciado como "quadro" sem dizer o que é.pessoas cegas (leitor de tela)
• Conteúdo principal aninhado dentro de outra área landmark-main-is-top-levelA área de conteúdo principal está envolvida por outra e o atalho cai no lugar errado.pessoas cegas (leitor de tela)
• Descrições de imagem redundantes image-redundant-altA descrição diz "imagem de…"; o leitor já diz "imagem", então se ouve duas vezes.pessoas cegas (leitor de tela)
• Dicas sem texto aria-tooltip-nameUm elemento de dica não tem conteúdo para o leitor de tela.pessoas cegas (leitor de tela)
• Dois cabeçalhos de página landmark-no-duplicate-bannerDuas áreas dizem ser o cabeçalho; o leitor de tela não sabe qual é o real.pessoas cegas (leitor de tela)
• Dois idiomas diferentes declarados html-xml-lang-mismatchA página declara um idioma em lang e outro em xml:lang.pessoas cegas (leitor de tela)
• Dois rodapés de página landmark-no-duplicate-contentinfoDuas áreas dizem ser o rodapé.pessoas cegas (leitor de tela)
• Elementos com o papel errado aria-allowed-roleUm elemento diz ser algo que não é (um link que diz ser botão). Confunde o leitor de tela.pessoas cegas (leitor de tela)
• Elementos focáveis que não são controles focus-order-semanticsElementos simples recebem o foco do teclado sem ser botões nem links; a pessoa cai em algo que não faz nada.pessoas que não conseguem usar o mouse · pessoas cegas (leitor de tela)
• Elementos ocultos mas ainda interativos presentation-role-conflictUm elemento foi marcado como decorativo mas é focável ou tem nome, o que confunde as tecnologias assistivas.pessoas cegas (leitor de tela)
• Elementos ocultos que ainda recebem foco aria-hidden-focusQuem navega com teclado cai em elementos invisíveis: o cursor "desaparece".pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Espaçamento de texto travado avoid-inline-spacingOs estilos forçam o espaçamento de letras ou linhas e quem precisa de mais espaço não consegue ajustar.pessoas com baixa visão · pessoas com deficiência cognitiva
• Falta informação de acessibilidade aria-required-attrUm controle personalizado (interruptor, caixa de seleção) não diz ao leitor de tela seu estado, por exemplo ligado ou não.pessoas cegas (leitor de tela)
• Formulários que bloqueiam o preenchimento automático autocomplete-validO navegador não consegue preencher nome, e-mail ou endereço sozinho, e disso dependem muitas pessoas com deficiência motora ou cognitiva.pessoas com deficiência cognitiva · pessoas que não conseguem usar o mouse
• Gráficos sem descrição role-img-altUm elemento marcado como imagem não tem descrição.pessoas cegas (leitor de tela)
• Ícones sem descrição svg-img-altOs ícones vetoriais (logo, redes sociais) não têm nome para o leitor de tela.pessoas cegas (leitor de tela)
• Idioma inválido em parte da página valid-langUma seção declara um código de idioma que não existe.pessoas cegas (leitor de tela)
• Imagens sem descrição image-altO leitor de tela de uma pessoa cega diz "imagem" e nada mais. Se a imagem é um produto, uma promoção ou um botão, ela simplesmente não sabe o que é.pessoas cegas (leitor de tela)
• Interruptores ou caixas de seleção sem nome aria-toggle-field-nameUm controle personalizado não diz o que liga ou desliga.pessoas cegas (leitor de tela)
• Itens de definição fora da lista dlitemTermos ou definições estão fora da sua lista.pessoas cegas (leitor de tela)
• Itens de lista soltos listitemOs itens são lidos sem o contexto da lista.pessoas cegas (leitor de tela)
• Janelas pop-up sem nome aria-dialog-nameQuando uma janela abre (carrinho, aviso de cookies, login), a pessoa cega não fica sabendo o que é.pessoas cegas (leitor de tela)
• Links que não dizem aonde levam link-nameLinks como "clique aqui" ou uma imagem sem texto são lidos como "link". Quem usa leitor de tela navega pulando entre links, então esses são becos sem saída.pessoas cegas (leitor de tela)
• Links que parecem texto normal link-in-text-blockDentro dos parágrafos os links não são sublinhados e a cor quase não muda. Muita gente nunca percebe que pode clicar.pessoas com baixa visão · pessoas com deficiência cognitiva
• Listas de definições mal construídas definition-listUma lista de termo/definição tem elementos soltos e é lida errado.pessoas cegas (leitor de tela)
• Listas mal construídas listO leitor de tela anuncia "lista de 5 itens"; aqui a contagem sai errada ou a lista está quebrada.pessoas cegas (leitor de tela)
• Mapa de imagem que precisa de mouse server-side-image-mapUm mapa de imagem antigo só pode ser usado com mouse.pessoas que não conseguem usar o mouse · pessoas cegas (leitor de tela)
• Medidores sem nome aria-meter-nameUm indicador ou medidor não diz o que mede.pessoas cegas (leitor de tela)
• Menus ou listas incompletos aria-required-childrenUm contêiner se anuncia como menu ou lista, mas não tem itens corretos dentro.pessoas cegas (leitor de tela)
• Menus suspensos sem rótulo select-nameUm menu suspenso (tamanho, cidade, quantidade) é anunciado sem dizer o que escolhe.pessoas cegas (leitor de tela)
• Mesmo texto de link, destinos diferentes identical-links-same-purposeLinks que se leem igual levam a lugares diferentes; não dá para prever aonde se vai.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• Não há área de conteúdo principal landmark-one-mainNão há como pular direto para o conteúdo: quem usa leitor de tela ouve o menu em cada página.pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Não há como pular o menu bypassQuem usa teclado precisa passar por cada opção do menu em cada página antes de chegar ao conteúdo.pessoas que não conseguem usar o mouse
• Nomes internos repetidos duplicate-idDois elementos compartilham o mesmo nome interno, o que confunde as tecnologias assistivas e pode quebrar formulários.pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Nomes internos repetidos em rótulos duplicate-id-ariaUm rótulo aponta para um nome usado duas vezes e pode descrever o elemento errado.pessoas cegas (leitor de tela)
• O contraste poderia ser maior color-contrast-enhancedDá para ler, mas fica abaixo do nível mais rígido (AAA) que alguns órgãos públicos exigem.pessoas com baixa visão
• O idioma declarado não é válido html-lang-validO código de idioma está errado e os leitores de tela o ignoram.pessoas cegas (leitor de tela)
• O link "pular para o conteúdo" está quebrado skip-linkO atalho do qual quem usa teclado depende não leva a lugar nenhum.pessoas que não conseguem usar o mouse
• O zoom está bloqueado no celular meta-viewportSeu site proíbe ampliar com os dedos. Quem precisa ver maior não consegue.pessoas com baixa visão · quem entra pelo celular
• Objetos incorporados sem descrição object-altUm arquivo incorporado (PDF, animação) não tem alternativa em texto.pessoas cegas (leitor de tela)
• Ordem do teclado forçada à mão tabindexA ordem de tabulação foi alterada e quem usa teclado pula pela página sem lógica.pessoas que não conseguem usar o mouse
• Orientação da tela travada css-orientation-lockA página só funciona em uma orientação; dispositivos montados em cadeiras de rodas não podem girar.pessoas que não conseguem usar o mouse · quem entra pelo celular
• Papéis de acessibilidade inválidos aria-rolesUm elemento usa um nome de papel que não existe e as tecnologias assistivas o ignoram.pessoas cegas (leitor de tela)
• Peças de menu ou lista fora do lugar aria-required-parentPartes de um menu, abas ou lista estão fora do seu contêiner e o leitor de tela as anuncia errado.pessoas cegas (leitor de tela)
• Quadros incorporados com o mesmo título frame-title-uniqueVários quadros são anunciados da mesma forma.pessoas cegas (leitor de tela)
• Referências de acessibilidade quebradas aria-valid-attr-valueUm atributo de acessibilidade aponta para algo que não existe.pessoas cegas (leitor de tela)
• Rodapé aninhado dentro de outra área landmark-contentinfo-is-top-levelO rodapé está dentro de outra área.pessoas cegas (leitor de tela)
• Rótulos em elementos que não podem tê-los aria-prohibited-attrColocaram um aria-label em texto simples ou em um contêiner, onde o leitor de tela o ignora.pessoas cegas (leitor de tela)
• Sem regiões para se orientar regionQuem usa leitor de tela pula entre regiões (menu, conteúdo, rodapé). Sem elas, precisa ouvir a página inteira desde o topo.pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Texto difícil de ler color-contrastHá textos claros demais sobre o fundo. Pessoas com baixa visão, clientes mais velhos e qualquer um com o celular no sol não conseguem ler. É a descoberta mais comum em processos de acessibilidade.pessoas com baixa visão · quem entra pelo celular
• Texto em movimento marqueeTexto que rola não pode ser pausado e é difícil de ler.pessoas com deficiência cognitiva
• Texto em negrito usado como título p-as-headingOs títulos são parágrafos em negrito e o leitor de tela não consegue navegar por eles.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• Texto marcado incorretamente para o leitor de tela aria-textUm contêiner marcado como texto simples contém elementos focáveis, que desaparecem para o leitor de tela.pessoas cegas (leitor de tela)
• Texto piscando blinkConteúdo que pisca não pode ser pausado e pode provocar crises ou distração.pessoas com deficiência cognitiva
• Título da tabela repetido no resumo table-duplicate-nameO mesmo texto é anunciado duas vezes para a tabela.pessoas cegas (leitor de tela)
• Títulos de tabela feitos com células table-fake-captionO título de uma tabela é uma célula mesclada em vez de um caption real, e não fica associado à tabela.pessoas cegas (leitor de tela)
• Títulos fora de ordem heading-orderOs títulos pulam níveis (como um documento que vai do capítulo 1 à seção 1.1.1). A estrutura da página deixa de fazer sentido para o leitor de tela.pessoas cegas (leitor de tela) · pessoas com deficiência cognitiva
• Títulos vazios empty-headingUm título sem texto é anunciado como "título" e confunde a navegação.pessoas cegas (leitor de tela)
• Um botão dentro de outro nested-interactiveDuas coisas clicáveis estão aninhadas; o leitor de tela e o teclado só alcançam uma.pessoas cegas (leitor de tela) · pessoas que não conseguem usar o mouse
• Vídeos sem legendas video-captionClientes surdos não recebem nada dos seus vídeos.pessoas surdas