# Acessibilidade EAA: widget e correções WCAG (dfaccessibility)

> O DF Accessibility coloca a sua loja PrestaShop em conformidade com o Ato Europeu de Acessibilidade (EAA, Diretiva (UE) 2019/882) através de três componentes: um widget de acessibilidade cujas opções…

- Página: <https://www.datafirefly.com/pt/documentation/dfaccessibility/>
- Idioma: pt
- Atualizado em: 2026-10-12
- Outros idiomas: [fr](https://www.datafirefly.com/documentation/dfaccessibility/index.md), [en](https://www.datafirefly.com/en/documentation/dfaccessibility/index.md), [es](https://www.datafirefly.com/es/documentation/dfaccessibility/index.md), [de](https://www.datafirefly.com/de/documentation/dfaccessibility/index.md), [it](https://www.datafirefly.com/it/documentation/dfaccessibility/index.md), [pl](https://www.datafirefly.com/pl/documentation/dfaccessibility/index.md), [nl](https://www.datafirefly.com/nl/documentation/dfaccessibility/index.md)
- Índice: <https://www.datafirefly.com/pt/documentation/llms.txt>

O DF Accessibility coloca a sua loja PrestaShop em conformidade com o Ato Europeu de Acessibilidade (EAA, Diretiva (UE) 2019/882) através de três componentes: um widget de acessibilidade cujas opções escolhe, um motor de correções WCAG automáticas aplicadas em cada página e um gerador de declaração de acessibilidade legal em 8 idiomas.

Esta documentação abrange a versão **1.3.0** do módulo, compatível com PrestaShop **8.0.0 a 9.x**. Sem overrides de classes, sem dependências Composer, sem pedidos externos.

## Instalação e atualização

1. No back office do PrestaShop, abra **Módulos > Gestor de módulos**.
2. Clique em **Carregar um módulo** e largue o ficheiro `dfaccessibility.zip`.
3. Clique em **Configurar** quando a instalação terminar.

O módulo regista-se nos hooks `displayHeader`, `actionFrontControllerSetMedia`, `displayBeforeBodyClosingTag` e `displayFooter` (este último serve de recurso para os temas que não chamam o anterior) e cria uma tabela de estatísticas. Logo após a instalação, o widget fica ativo com todas as opções, e todas as correções automáticas estão ligadas exceto a correção de contraste.

Para atualizar, envie simplesmente o novo ZIP por cima do módulo instalado, sem o desinstalar: os scripts de atualização acrescentam as novas definições e mantêm a sua configuração.

## Configuração

### Widget de acessibilidade

- **Ativar o widget**: mostra o botão flutuante na loja. Desativar o widget também deixa de aplicar as preferências já guardadas pelos visitantes.
- **Posição do botão**: em baixo à direita ou em baixo à esquerda.
- **Cor de destaque**: usada no botão, nas opções ativas do painel e no contorno de foco imposto. Escolha uma cor com contraste suficiente sobre branco (o azul predefinido `#2563EB` cumpre o rácio AA).
- **Ocultar o botão em dispositivos móveis**: oculta o botão flutuante abaixo de 768px.
- **Ocultar o botão no carrinho e no checkout**: retira o botão das páginas do carrinho e da encomenda, incluindo os módulos de checkout numa só página que mantêm o nome de página `order`.
- **Opções apresentadas no widget**: uma caixa por opção (tamanho do texto, alto contraste, letra legível, espaçamento, realce das ligações, cursor grande, guia de leitura, paragem das animações, ocultação das imagens). Sem nenhuma opção marcada, o botão flutuante fica oculto.

Quando o botão está oculto em dispositivos móveis, no carrinho ou no checkout, as preferências já ativadas pelo visitante e as correções automáticas continuam a aplicar-se. Um visitante em alto contraste mantém-no até ao pagamento.

Uma opção desmarcada também deixa de se aplicar aos visitantes que já a tinham ativado. É intencional: sem o respetivo botão, o visitante não teria forma de a desativar.

### Correções automáticas

Cada correção pode ser ativada individualmente. São executadas no navegador do visitante ao carregar a página e nos conteúdos acrescentados depois: os ficheiros do tema nunca são modificados.

- **Textos alternativos em falta**: ver o detalhe mais abaixo.
- **Campos de formulário sem etiqueta**: adiciona um `aria-label` a partir do placeholder ou do nome do campo.
- **Ligações que abrem uma nova janela**: adiciona `rel=noopener` e um aviso audível para leitores de ecrã.
- **Iframes sem título**: adiciona um atributo `title` a partir do domínio de origem.
- **Pontos de referência ARIA**: adiciona as funções `banner` e `contentinfo` e um `aria-label` de navegação quando faltam.
- **Ligação de salto**: insere uma ligação «Ir para o conteúdo principal» que aparece ao premir Tab pela primeira vez.
- **Contorno de foco visível**: impõe um contorno no foco do teclado (critério WCAG 2.4.7).
- **Correção automática do contraste**: desativada por predefinição, ver a secção dedicada.

### Estatísticas

Quando a recolha está ativada, cada navegador soma as correções aplicadas e envia-as no máximo uma vez por minuto, ao fechar ou sair da página. Os contadores são agregados por dia e por loja: sem cookies, sem identificadores, sem dados pessoais.

## O widget do lado do visitante

O botão flutuante abre um painel com as opções que marcou:

- **Tamanho do texto**: 5 níveis de 100 a 150 %.
- **Alto contraste**: modo inteligente descrito abaixo.
- **Letra legível**: muda para Verdana, Tahoma, Arial.
- **Aumentar o espaçamento**: letras 0,12 em, palavras 0,16 em, entrelinha 1,6 e 2 em entre parágrafos, os valores de teste do critério WCAG 1.4.12.
- **Realçar ligações**: fundo amarelo e sublinhado sistemático.
- **Cursor grande**: seta ampliada e mão ampliada sobre ligações e botões.
- **Guia de leitura**: barra horizontal que segue o rato.
- **Parar animações**: neutraliza animações e transições CSS, pausa os vídeos em reprodução automática e os carrosséis Bootstrap, Swiper, Slick e Owl (critérios WCAG 2.2.2 e 2.3.3).
- **Ocultar imagens**: oculta imagens, vídeos e imagens de fundo.
- **Repor todas as definições**: regresso ao estado original.

O painel é totalmente utilizável com o teclado: armadilha de foco, fecho com Escape, estados `aria-pressed` em cada opção. As preferências são guardadas apenas no `localStorage` do navegador e voltam a ser aplicadas **antes da primeira apresentação** das páginas seguintes, sem tremulação nem dados enviados para os seus servidores.

As fontes de ícones (Material Icons do tema Classic, Font Awesome) ficam excluídas da letra legível e do espaçamento, para que os ícones nunca se transformem em texto.

### Tamanho do texto

O módulo aumenta o tamanho raiz da página a partir do valor definido pelo tema, o que faz crescer todos os textos em `rem` e `em`, incluindo temas com raiz a 62,5 %. Os textos dimensionados em píxeis, que não seguem a raiz, são aumentados um a um. Cada texto só é aumentado uma vez, seja qual for a unidade.

### O alto contraste inteligente

Os widgets clássicos forçam um fundo branco e uma opacidade total em todos os elementos, o que faz desaparecer as imagens dos sliders e reaparecer diapositivos ocultos, menus fechados e fundos de janelas modais. Aqui o módulo analisa toda a página, por lotes para não a bloquear:

- os fundos **lisos** e os **degradês** passam a branco;
- os elementos com **imagem de fundo**, e as legendas sobrepostas a uma imagem de slider, são mantidos: os seus textos recebem uma placa branca semiopaca;
- os textos passam a preto, as ligações a azul-escuro sublinhado (amarelo ao passar o rato), os botões e campos recebem fundo branco e contorno preto de 2px;
- nada do que o tema oculta volta a aparecer.

As cores forçadas só se aplicam quando a análise termina, para evitar texto preto sobre fundo escuro durante o carregamento. Ao desativar, os estilos originais são repostos, incluindo os estilos inline de um construtor de páginas.

### Em dispositivos móveis

Abaixo de 768px, o botão passa a 44px (o tamanho de alvo tátil do critério WCAG 2.5.5) e fica a 14px das margens. O painel ocupa a largura do ecrã, até 320px.

## As correções automáticas em detalhe

### Textos alternativos (WCAG 1.1.1)

Para cada imagem sem atributo `alt`, o módulo aplica pela ordem:

1. imagem oculta às tecnologias de apoio, pixel de rastreio ou imagem dentro de uma ligação que já tem texto: `alt` vazio (imagem decorativa);
2. caso contrário, a legenda `figcaption` ou o atributo `title`;
3. caso contrário, o título do produto da miniatura envolvente;
4. em último recurso, o nome do ficheiro limpo, se tiver significado.

Se nenhuma destas fontes for fiável, a imagem não é alterada, em vez de ser escondida por engano dos leitores de ecrã com um `alt` vazio.

A correção automática é uma rede de segurança. Para as suas imagens de produto importantes, escreva os textos alternativos à mão no catálogo: o módulo nunca altera os `alt` existentes.

### Formulários (WCAG 1.3.1, 4.1.2)

Os campos sem `label` associado, sem `aria-label` nem `title` recebem um `aria-label` deduzido do placeholder ou, na sua falta, do nome do campo.

### Ligações e iframes (WCAG 3.2.5, 4.1.2)

As ligações `target=_blank` recebem `rel=noopener` e um `aria-label` completado com «abre numa nova janela». Os iframes sem título recebem um `title` com o domínio incorporado.

### Estrutura e navegação (WCAG 1.3.1, 2.4.1, 2.4.7)

Funções ARIA adicionadas quando o tema não as declara, ligação de salto inserida no topo da página, contorno de foco imposto através de `:focus-visible`. No tema Classic, em que a etiqueta `

` também envolve o cabeçalho e o rodapé, a ligação de salto aponta para a coluna de conteúdo `#content-wrapper`. Se o seu tema já tiver uma ligação de salto, o módulo não acrescenta outra.

### Correção automática do contraste (WCAG 1.4.3)

O motor calcula a luminância relativa de cada texto e do seu fundo real e escurece ou clareia progressivamente as cores abaixo do rácio exigido: 4,5, ou 3 para texto grande (24px, ou 18,66px a negrito). É executado nos tempos mortos do navegador.

Os textos sobre uma imagem, um degradê, um fundo semitransparente ou dentro de um slider são ignorados: o seu fundo real não pode ser calculado e a correção poderia torná-los menos legíveis. Os textos desativados também são ignorados.

Esta correção altera as cores de texto definidas pelo tema. Ative-a, verifique o resultado nas páginas principais e mantenha-a se lhe agradar. Por esta razão vem desativada por predefinição.

### Conteúdos carregados depois da página

As correções aplicam-se também aos conteúdos inseridos após o carregamento: listas dos filtros por facetas, vista rápida, janela de adicionar ao carrinho, scroll infinito. O alto contraste e o tamanho do texto são aplicados da mesma forma.

## Declaração de acessibilidade EAA

Publicar uma declaração de acessibilidade é uma obrigação formal da diretiva. Na configuração do módulo, clique em **Gerar a página da declaração**: é criada uma página CMS em cada idioma da loja (modelos FR, EN, ES, DE, IT, NL, PL e PT incluídos, inglês como recurso para os outros idiomas), com:

- o estado de conformidade face à Diretiva (UE) 2019/882 e à norma EN 301 549;
- a lista das funcionalidades de acessibilidade disponíveis;
- o canal de comunicação para o seu formulário de contacto, no idioma da página;
- o procedimento de reclamação junto da autoridade nacional competente.

A ligação para a declaração aparece automaticamente no fundo do painel do widget, apenas se a página existir e estiver ativa. Após uma atualização do módulo ou uma mudança de nome da loja, clique em **Atualizar a página da declaração**: uma confirmação avisa que as alterações manuais serão substituídas e a página é atualizada sem mudar de URL.

## Estatísticas e prova de diligência

A tabela da página de configuração mostra, nos últimos 30 dias e por tipo, o número de correções aplicadas: textos alternativos, etiquetas de formulários, ligações externas, títulos de iframes, pontos de referência ARIA, ligações de salto e correções de contraste. Em caso de fiscalização ou reclamação, estes contadores documentam as medidas técnicas implementadas. O botão **Repor estatísticas** limpa os contadores da loja atual.

Em multiloja, as estatísticas e a declaração são geridas por contexto de loja.

## Boas práticas e limites

O módulo corrige as falhas técnicas mais frequentes, mas alguns critérios WCAG são de natureza editorial e continuam nas suas mãos:

- hierarquia lógica dos títulos h1 a h6 nos conteúdos CMS e nas fichas de produto;
- qualidade editorial dos textos alternativos das imagens principais;
- legendagem dos vídeos;
- clareza dos rótulos dos botões e ligações.

Nenhuma ferramenta automática torna um site «100% conforme». O módulo dá-lhe uma base técnica sólida e documentada; complete-a com uma revisão editorial das páginas principais.

## Resolução de problemas

- **O botão não aparece**: verifique se o widget está ativado, se pelo menos uma opção está marcada e se não está numa página onde está oculto (dispositivo móvel, carrinho, checkout), e limpe a cache do PrestaShop (Parâmetros avançados > Desempenho).
- **Uma opção desapareceu para um visitante**: foi desmarcada na configuração, o que também remove a preferência guardada.
- **As preferências não ficam guardadas**: o visitante navega provavelmente em modo privado ou o navegador bloqueia o `localStorage`; o widget continua utilizável, só se perde a memorização.
- **Uma zona continua escura em alto contraste**: um elemento muda de fundo mais tarde através de um script (por exemplo, um cabeçalho fixo que escurece ao deslocar). Desative e volte a ativar o modo, ou comunique o caso ao suporte com o URL em causa.
- **A instalação ou a atualização falha**: envie a versão mais recente do ZIP por cima do módulo, sem desinstalar. As versões anteriores à 1.2.1 podiam falhar com «Undefined array key DFACCESS_WIDGET_OPTIONS».
- **Não chegam estatísticas**: verifique se a recolha está ativada e se nenhuma firewall filtra os pedidos para o controlador `track` do módulo. Os contadores chegam por lotes, com um possível atraso de alguns minutos.

## Desinstalação

A desinstalação remove a tabela de estatísticas e as chaves de configuração. A página CMS da declaração de acessibilidade é mantida de propósito (continua a ser uma obrigação legal): elimine-a manualmente em **Aparência > Páginas** se não a quiser manter.