Análise de acessibilidade web

Como funciona esta verificação

O Scanaris analisa o HTML que a tua página serve, sem executar JavaScript nem abrir um browser, e faz oito testes de acessibilidade que se podem decidir com certeza sobre o código. Três são de severidade média: que a etiqueta <html> declare o idioma com lang, que exista a <meta name="viewport">, e que nenhum campo de formulário (input, select, textarea, excluídos os ocultos e os botões) fique sem etiqueta acessível, ou seja, que tenha um <label for>, esteja dentro de um <label>, ou leve aria-label, aria-labelledby ou title. Os outros cinco são de severidade baixa: imagens sem atributo alt (um alt="" vazio é válido para as decorativas; o que falha é o atributo não existir), ligações com href e botões sem texto, sem aria-label e sem uma imagem com alt lá dentro, atributos id repetidos, elementos com tabindex maior que zero, e cabeçalhos h1 a h6 vazios. Cada teste que falha abre o seu próprio achado com a contagem.

Porque importa

Cerca de 15 % da população tem alguma deficiência, e muitas mais pessoas usam a web com um leitor de ecrã, só com teclado ou com o zoom no máximo em momentos concretos. Para elas, uma imagem sem alt é um buraco, um campo sem etiqueta é uma caixa de que não se sabe o que esperar e um botão que é só um ícone é anunciado como "botão" sem mais. Além de ética, é lei: a Diretiva europeia de acessibilidade aplica-se desde junho de 2025 à maioria dos serviços digitais de empresas, e nos Estados Unidos os processos por sites inacessíveis contam-se aos milhares por ano. E é SEO: o alt, o idioma e a estrutura de cabeçalhos são exatamente o que a Google lê.

Como corrigir

• Idioma: <html lang="pt">. No Nuxt configura-se em app.head.htmlAttrs ou é o módulo i18n que o põe; no Next.js, no <html> do layout raiz; no WordPress escreve-o language_attributes() no tema.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Sem maximum-scale=1 nem user-scalable=no, que bloqueiam o zoom.
• Etiquetas de formulário: um <label for="email"> por cada campo com o seu id, ou o campo dentro do <label>. Se o design não mostra etiqueta visível, aria-label="Endereço de e-mail". O placeholder não conta: desaparece ao escrever.
• Imagens: alt descritivo nas informativas ("Gráfico de vendas do terceiro trimestre"), alt="" nas decorativas. Os componentes de imagem do Nuxt e do Next.js exigem o atributo.
• Ligações e botões de ícone: aria-label="Abrir menu", ou um texto visualmente oculto com uma classe sr-only. Os ícones SVG inline levam aria-hidden="true".
• Ids duplicados: costumam vir de componentes repetidos com o id fixado à mão. Gera o id a partir de uma prop ou usa useId().
• Tabindex positivos: muda-os para 0 e ordena os elementos no HTML na ordem em que devem ser percorridos.
• Cabeçalhos vazios: se estavam para maquetar, troca-os por um div; se têm um ícone, dá-lhes texto.

Confirma que está corrigido

curl -s https://teudominio.com | grep -oE '<html[^>]*>|<meta name="viewport"[^>]*>'
curl -s https://teudominio.com | grep -oE '<img[^>]*>' | grep -vc 'alt='

O primeiro deve mostrar o lang e o viewport; o segundo deve dar 0. Para o resto, o painel Lighthouse do Chrome (separador Acessibilidade) ou a extensão axe DevTools listam-te cada elemento com o seu seletor.

Perguntas frequentes

Passar estes oito testes significa que o meu site é acessível?

Não. São os oito que se podem verificar com certeza sem browser. O contraste de cores, o foco visível, a ordem de leitura real e os componentes construídos com JavaScript precisam de uma revisão com ferramentas de browser e, para algo sério, de uma auditoria humana. Passá-los significa, sim, que não cometes os erros mais frequentes e mais fáceis de evitar.

A minha app é uma SPA e o HTML inicial está quase vazio.

Então a verificação vê pouco, e a Google também. É mais uma razão para renderizar no servidor pelo menos o conteúdo principal; explica-o conteúdo sem JavaScript.

Porque é que o alt vazio está certo e a ausência de alt não?

Porque alt="" diz ao leitor de ecrã "salta esta imagem, é decorativa", enquanto sem atributo o leitor lê o nome do ficheiro, que costuma ser algo como IMG_4821.jpg. A estrutura de cabeçalhos, que afeta a navegação por leitor de ecrã, é revista também por cabeçalhos.