Leia o resumo: a situação, o risco e o que fazer, num minuto.
Passe esta ligação a quem mantém o seu site: os erros vão do mais grave ao menos grave, com onde estão e como corrigi-los.
Guarde esta ligação: é o seu acesso ao relatório. Partilhe-a apenas com quem quiser que o veja.
Em resumo
Para quem decide, num minuto.
Situação: há coisas que um leitor de ecrã não consegue nomear ou que não podem ser usadas sem rato; comece por elas.
Risco: se o site vende ou presta serviços a consumidores (comércio eletrónico, banca, transportes…), o Decreto-Lei n.º 82/2022 obriga a que seja acessível, salvo se o serviço for prestado por uma microempresa, e não encontrámos informação sobre a acessibilidade do site. Um utilizador pode apresentar queixa (por exemplo, ao INR ou à ASAE), e a ASAE pode aplicar coimas. Se for o seu caso, consulte o seu consultor.
Primeiro: botões sem nome (menu, pesquisar, fechar…) que não podem ser usados com leitor de ecrã.
O que fazer: passar este relatório a quem mantém o site, corrigir os erros pela ordem em que aparecem e publicar a declaração.
Antes de começar
A lei remete para normas técnicas de acessibilidade baseadas numa lista de diretrizes chamadas WCAG (a norma de referência, EN 301 549, inclui a versão 2.1, nível AA, e nós acrescentamos o que há de novo na 2.2 e que pode ser medido, como o tamanho dos botões). Uma máquina consegue verificar mais ou menos um terço dessa lista, e é isso que este relatório mede.
O resto tem de ser revisto por uma pessoa: por exemplo, se o site pode ser usado por inteiro só com o teclado, se se lê numa ordem lógica ou se as descrições das imagens dizem algo útil.
Primeiro aparecem os erros que impedem de usar o site e depois os restantes, do mais grave para o menos grave. Em cada um encontra o que significa, como se corrige e exemplos tirados do seu próprio site. O que medimos e o que não medimos.
Assim começa a sua página inicial para quem não a vê
«Ligação: Café de Muestra, inicio.»
«Ligação: Shop.»
«Ligação: Cafés.»
«Ligação: About us.»
«Ligação: Contacto.»
«Botão: Buscar.»
«Botão: Carrito.»
«Imagem: Taza de café recién hecho. Recién tostado cada lunes.»
«Botão: ‹.»
«Botão: ›.»
«Ligação: IMG_2034.jpg.»
«Ligação: Leer más.»
As primeiras ligações, botões e imagens, tal como um leitor de ecrã os nomeia (além disso, lê os textos e os títulos que há entre eles). Cada «sem nome» é algo que quem não vê o ecrã não consegue usar.
Usar o site só com o teclado
Muita gente não usa rato: pessoas cegas, com pouca mobilidade nas mãos ou que navegam com um manípulo. Percorremos as suas páginas premindo a tecla Tab, como elas o fariam.
Página inicial
https://cafedemuestra.example/
·Recomendação: Recomendação: Não há uma ligação para saltar para o conteúdo. A página tem outra forma de saltar o menu (zonas marcadas), mas a ligação no início ajuda muito quem usa o teclado.
✓Correto: Correto: Não encontrámos pontos onde o foco fique preso.
✗Erro: Erro: Em 15 ou mais elementos não se vê onde está o foco. Quem usa o teclado fica perdido. Correção: não retirar o contorno de foco (outline: none) ou substituí-lo por outro bem visível.
✓Correto: Correto: O foco não entra em elementos ocultos.
✗Erro: Erro: 1 elemento pode ser clicado com o rato, mas não ativado com o teclado, por exemplo: «Ver ofertas». Correção: usar botões e ligações verdadeiros (<button>, <a href>) em vez de <div> ou <span> com clique.
Sem foco visível, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Página /producto.html
https://cafedemuestra.example/producto.html
·Recomendação: Recomendação: Não há uma ligação para saltar para o conteúdo. A página tem outra forma de saltar o menu (zonas marcadas), mas a ligação no início ajuda muito quem usa o teclado.
✓Correto: Correto: Não encontrámos pontos onde o foco fique preso.
✗Erro: Erro: Em 13 elementos não se vê onde está o foco. Quem usa o teclado fica perdido. Correção: não retirar o contorno de foco (outline: none) ou substituí-lo por outro bem visível.
✓Correto: Correto: O foco não entra em elementos ocultos.
✓Correto: Correto: Não encontrámos elementos que se ativem com o rato e não com o teclado (os que são feitos à medida, como menus ou carrosséis, convém testá-los manualmente).
Sem foco visível, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
Página /contacto.html
https://cafedemuestra.example/contacto.html
·Recomendação: Recomendação: Não há uma ligação para saltar para o conteúdo. A página tem outra forma de saltar o menu (zonas marcadas), mas a ligação no início ajuda muito quem usa o teclado.
✓Correto: Correto: Não encontrámos pontos onde o foco fique preso.
✗Erro: Erro: Em 12 elementos não se vê onde está o foco. Quem usa o teclado fica perdido. Correção: não retirar o contorno de foco (outline: none) ou substituí-lo por outro bem visível.
✓Correto: Correto: O foco não entra em elementos ocultos.
✓Correto: Correto: Não encontrámos elementos que se ativem com o rato e não com o teclado (os que são feitos à medida, como menus ou carrosséis, convém testá-los manualmente).
Sem foco visível, por exemplo: «Café de Muestra, inicio», «Shop», «Cafés», «About us».
As imagens, uma a uma
Revimos uma a uma 6 imagens do seu site, comparando cada uma com a respetiva descrição.
3 não têm uma descrição útil. Deixamos-lhe a que propomos: reveja-a e copie-a para o atributo alt.
As propostas são redigidas por uma máquina a partir da imagem: reveja-as antes de as usar. Os comentários desta revisão estão na língua em que a análise foi pedida (Español).
Descrição que não serve
Es un nombre de archivo y no dice qué producto es.
Agora: alt="IMG_2034.jpg"
Proposta: alt="Bolsa de café de Colombia Huila, 250 gramos"
Sem descrição
No tiene texto alternativo y muestra un producto.
Agora: sem atributo alt
Proposta: alt="Bolsa de café de Etiopía Yirgacheffe, 250 gramos"
Descrição que não serve
La palabra «foto» no explica qué producto se muestra.
Agora: alt="foto"
Proposta: alt="Bolsa de café descafeinado por proceso de agua, 250 gramos"
E 3 imagens com uma boa descrição.
O que dizem os seus botões e ligações
Quem usa um leitor de ecrã ouve o nome de cada botão e ligação. Revimos os 23 que aparecem nas suas páginas.
11 não se percebem bem: estão noutra língua, usam jargão técnico, repetem-se ou não dizem para onde levam. Correção: substituir o texto ou o aria-label pelo que propomos. Os comentários desta revisão estão na língua em que a análise foi pedida (Español).
Outra língua · ligação
Agora ouve-se: «Shop» (3 vezes). Está en inglés y la página en español.
Proposta: «Inicio»
Outra língua · ligação
Agora ouve-se: «About us» (3 vezes). Está en inglés y lleva a la página de contacto.
Proposta: «Contacto»
Não diz para onde leva · botão
Agora ouve-se: «‹». Un símbolo no dice qué hace el botón.
Proposta: «Anterior»
Não diz para onde leva · botão
Agora ouve-se: «›». Un símbolo no dice qué hace el botón.
Proposta: «Siguiente»
Jargão técnico · ligação
Agora ouve-se: «IMG_2034.jpg». Es el nombre de un archivo, no dice adónde lleva.
Proposta: «[Destino del enlace]»
Não diz para onde leva · ligação
Agora ouve-se: «Leer más» (4 vezes). No dice qué se va a leer.
Proposta: «Leer más sobre nuestros cafés»
Não diz para onde leva · ligação
Agora ouve-se: «foto». No dice qué muestra ni adónde lleva.
Proposta: «[Descripción de la foto y destino]»
Outra língua · botão
Agora ouve-se: «Subscribe» (3 vezes). Está en inglés y la página en español.
Proposta: «Suscribirme»
Outra língua · botão
Agora ouve-se: «Add to cart». Está en inglés y la página en español.
Proposta: «Añadir al carrito»
Não diz para onde leva · ligação
Agora ouve-se: «Click here». Está en inglés y no dice adónde lleva.
Proposta: «Volver a la página de inicio»
Outra língua · botão
Agora ouve-se: «Send». Está en inglés y la página en español.
Proposta: «Enviar mensaje»
Ligações que não dizem para onde levam
Os leitores de ecrã permitem saltar de ligação em ligação. Se dez ligações dizem «Ler mais», a pessoa não sabe qual é qual. Correção: o texto deve dizer o destino («Ler mais sobre envios») ou acrescentar um aria-label.
«Leer más» · 4 vezes
«Click here» · 1 vez
Declaração de acessibilidade
Não a encontrámos. O Decreto-Lei n.º 82/2022 obriga as empresas abrangidas a explicar, nas suas condições gerais ou num documento equivalente e em formato acessível, como o seu serviço cumpre os requisitos de acessibilidade; o habitual é uma página «Acessibilidade» com ligação no rodapé. As entidades públicas têm ainda de publicar uma declaração que indique o seu grau de conformidade, o conteúdo que não é acessível, quando foi feita a avaliação e como comunicar um problema, com ligação em todas as páginas.
Deixamos-lhe um rascunho com os dados deste relatório. Complete o que está entre parênteses retos, verifique se tudo é verdade e publique-o.
Antes de o publicar, convém que uma pessoa reveja o que este relatório não cobre: os processos completos (pesquisar, comprar, registar-se, pagar), as mensagens de erro dos formulários, as janelas pop-up, os vídeos e os documentos para descarregar. Se encontrar mais erros, acrescente-os à lista.
Atenção: se o seu serviço estiver abrangido pelo Decreto-Lei n.º 82/2022 e não cumprir, a lei obriga-o a corrigi-lo e a informar a ASAE. Fale com o seu consultor antes de publicar.
O seu rascunho: Declaração de acessibilidade
[Nome da sua empresa] compromete-se a tornar acessível o seu sítio web cafedemuestra.example, de acordo com o Decreto-Lei n.º 82/2022. Como referência técnica, utiliza a norma EN 301 549, que inclui as diretrizes WCAG 2.1 de nível AA; revimos também os novos critérios das WCAG 2.2.
Descrição do serviço
[Descreva brevemente o seu serviço, como é prestado e como se usa com leitor de ecrã, teclado ou ampliação.]
[Pendente de revisão por um especialista antes de publicar.]
Situação de conformidade
Este sítio web não está em conformidade com as diretrizes WCAG 2.1 de nível AA, pelos motivos indicados a seguir.
Conteúdo não acessível
Botões sem nome (menu, pesquisar, fechar…) que não podem ser usados com leitor de ecrã.
Campos de formulário sem etiqueta: quem usa leitor de ecrã não sabe o que escrever.
Ligações vazias: uma pessoa cega ouve «ligação» sem saber para onde leva.
O site impede ampliar com os dedos no telemóvel.
Campos cujo único nome é o texto de exemplo lá dentro: ao começar a escrever desaparece, e alguns leitores de ecrã nem o leem.
Imagens sem descrição: um leitor de ecrã não sabe o que mostram.
Algumas imagens não têm uma descrição adequada.
Alguns botões e ligações têm nomes que não se percebem com leitor de ecrã.
Em alguns elementos não se vê onde está o foco ao navegar com o teclado.
Há elementos que podem ser clicados com o rato, mas não ativados com o teclado.
Estamos a trabalhar para o corrigir antes de [data prevista].
Preparação desta declaração
Declaração preparada em 2026-11-01 por autoavaliação: análise automática segundo as WCAG 2.2 A e AA, testes automatizados de utilização com teclado e revisão automatizada das imagens e dos nomes dos botões e ligações[, e revisão manual de …].
Observações e dados de contacto
Se encontrar algum problema de acessibilidade ou precisar da informação noutro formato, escreva-nos para [e-mail] ou ligue-nos para o [telefone]. Responderemos no prazo máximo de [prazo: o que fixar, por exemplo 20 dias úteis].
Vias de reclamação
Se considerar que este serviço não cumpre os requisitos de acessibilidade, pode apresentar queixa, por exemplo ao Instituto Nacional para a Reabilitação (INR) ou à ASAE.
Os erros, um a um
1. Botões sem nome (menu, pesquisar, fechar…) que não podem ser usados com leitor de ecrã
Crítico · 1 elemento em 1 de 3 páginas · regra button-name
Como corrigir. Dar nome a cada botão: texto visível ou aria-label ("Adicionar ao carrinho", "Fechar", "Pesquisar").
5. Campos cujo único nome é o texto de exemplo lá dentro
Ao começar a escrever desaparece, e alguns leitores de ecrã nem o leem.
Grave · 6 elementos em 3 de 3 páginas · regra wa-placeholder
Como corrigir. Acrescentar a cada campo um <label> visível (ou, se não puder ser visível, um aria-label). O placeholder pode ficar como exemplo, mas não substitui a etiqueta.
Crítico · 1 elemento em 1 de 3 páginas · regra image-alt
Como corrigir. Acrescentar a cada <img> um atributo alt que descreva o que a imagem transmite (p. ex. alt="Sapatilha de corrida azul, vista lateral"). Se for apenas decorativa, alt="" vazio.
7. Textos com pouco contraste, difíceis de ler para pessoas com baixa visão
Grave · 13 elementos em 3 de 3 páginas · regra color-contrast
Como corrigir. Escurecer o texto ou clarear o fundo até um contraste de 4,5:1 (3:1 em textos grandes). No relatório aparece cada par de cores que falha.
https://cafedemuestra.example/Código: Código: <p class="promo">Envío gratis a partir de 35 € · Tostamos cada lunes en pequeños lotes</p>Texto #9a8775 sobre fundo #fffaf2: contraste 3.31:1, é preciso 4.5:1.
https://cafedemuestra.example/Código: Código: <p class="precio">12,90 €</p>Texto #a08b78 sobre fundo #fffaf2: contraste 3.12:1, é preciso 4.5:1.
https://cafedemuestra.example/producto.htmlCódigo: Código: <p class="precio">12,90 €</p>Texto #a08b78 sobre fundo #fffaf2: contraste 3.12:1, é preciso 4.5:1.
https://cafedemuestra.example/contacto.htmlCódigo: Código: <p class="promo">Respondemos en menos de 24 horas laborables.</p>Texto #9a8775 sobre fundo #fffaf2: contraste 3.31:1, é preciso 4.5:1.
9. A página sai pela direita ao ampliá-la ou num telemóvel pequeno
Quem amplia o texto tem de deslocar o ecrã para o lado em cada linha.
Grave · 1 elemento em 1 de 3 páginas · regra wa-reflow
Como corrigir. O design deve adaptar-se a 320 px de largura: sem larguras fixas em píxeis, imagens com max-width: 100 % e tabelas ou blocos largos com deslocamento próprio.
https://cafedemuestra.example/ (em ecrã de telemóvel)Código: Código: <html> (a página sai pela direita a 320 px)
10. Títulos que saltam níveis
O leitor de ecrã dá a entender que falta uma parte da página.
Moderado · boa prática · 1 elemento em 1 de 3 páginas · regra heading-order
Como corrigir. Usar os títulos por ordem (<h1>, depois <h2>, <h3>…) sem saltar níveis; o tamanho muda-se com CSS, não com o nível.
