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

O DF Accessibility coloca a sua loja PrestaShop em conformidade com a diretiva europeia sobre acessibilidade (EAA — Diretiva (UE) 2019/882) combinando três blocos: um widget de acessibilidade para os seus visitantes, um motor de correções WCAG automáticas aplicadas ao carregamento de cada página e um gerador de declaração de acessibilidade legal multilingue.

Instalação

1. No seu back-office PrestaShop, abra Módulos > Gestor de módulos.
2. Clique em Instalar um módulo e carregue o ficheiro dfaccessibility.zip.
3. Clique em Configurar assim que a instalação terminar.

O módulo regista-se em três hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) e cria uma única tabela de estatísticas. Logo após a instalação, o widget fica ativo no front-office com as definições predefinidas e todas as correções automáticas ficam ativadas, com exceção da correção de contraste.

Configuração

Widget de acessibilidade

• Ativar o widget — apresenta o botão flutuante em todas as páginas do front-office.
• 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 face ao branco (o azul predefinido #2563EB respeita o rácio AA).
• Ocultar o botão no telemóvel — esconde o botão flutuante abaixo de 768 px. As preferências já guardadas pelo visitante continuam a ser aplicadas.

Correções automáticas

Cada correção pode ser ativada individualmente. São executadas no navegador do visitante ao carregar a página: os ficheiros do seu tema nunca são alterados e uma desinstalação repõe exatamente o estado original.

• Textos alternativos em falta — ver o detalhe das heurísticas mais abaixo.
• Campos de formulário sem etiqueta — acrescenta um aria-label deduzido do placeholder ou do nome do campo.
• Ligações que abrem uma nova janela — acrescenta rel=noopener e um aviso audível para os leitores de ecrã.
• Iframes sem título — acrescenta um atributo title derivado do domínio de origem.
• Marcos ARIA — acrescenta os papéis banner e contentinfo e um aria-label de navegação quando estão ausentes.
• Ligação para saltar conteúdo — injeta uma ligação «Ir para o conteúdo principal» revelada ao primeiro toque em Tab.
• Contorno de foco visível — impõe um contorno no foco por 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, o navegador envia, depois de aplicadas as correções, um contador anónimo por tipo de correção (através de sendBeacon). Estes contadores são agregados por dia e por loja: sem cookies, sem identificadores e sem dados pessoais.

O widget do lado do visitante

O botão flutuante abre um painel que propõe:

• Tamanho do texto — 5 escalões de 100 % a 135 %.
• Contraste elevado — modo inteligente que clareia os fundos lisos preservando as imagens (ver abaixo).
• Tipo de letra legível — muda para uma pilha Verdana/Arial.
• Aumentar os espaçamentos — entrelinha 1.8, espaçamento de letras e de palavras aumentado (critério WCAG 1.4.12).
• Realçar as ligações — fundo amarelo e sublinhado sistemático.
• Cursor grande — cursor ampliado e de forte contraste.
• Guia de leitura — barra horizontal que acompanha o rato.
• Parar as animações — neutraliza animações e transições CSS (critério WCAG 2.3.3).
• Ocultar as 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: retenção de foco, fecho com Esc, estados aria-pressed em cada opção. As preferências são guardadas apenas no localStorage do navegador e reaplicadas antes da primeira renderização das páginas seguintes: sem qualquer salto visual e sem dados transmitidos aos seus servidores.

O contraste elevado inteligente

Ao contrário dos widgets clássicos, que forçam um fundo branco em todos os elementos (e fazem desaparecer sliders e faixas), este modo analisa o DOM no momento da ativação:

• os fundos de cor lisa opacos passam a branco;
• os elementos com uma imagem de fundo são preservados: os respetivos textos recebem uma placa branca semiopaca que garante a legibilidade por cima do visual;
• os textos passam a preto, as ligações a azul-escuro sublinhado e os controlos interativos recebem um contorno preto de 2 px.

A desativação retira todos os estilos aplicados e repõe o tema tal como estava.

As correções automáticas em detalhe

Textos alternativos (WCAG 1.1.1)

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

1. se a imagem estiver 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 (traços substituídos, sequências de dígitos removidas) se o resultado for significativo.

Formulários (WCAG 1.3.1, 4.1.2)

Os campos sem label associado, sem aria-label e sem title recebem um aria-label deduzido do placeholder ou, na sua falta, do nome do campo tornado legível.

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

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

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

Papéis ARIA acrescentados quando o tema não os declara, ligação para saltar conteúdo injetada logo no início da página e contorno de foco imposto em todos os elementos interativos através de :focus-visible.

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

O motor percorre os textos visíveis, calcula a luminância relativa do texto e do respetivo fundo efetivo e depois escurece ou clareia progressivamente as cores cujo rácio é inferior a 4,5. A análise está limitada a 1500 elementos e é executada através de requestIdleCallback durante os tempos mortos do navegador.

Declaração de acessibilidade EAA

A publicação de uma declaração de acessibilidade é uma obrigação formal da diretiva. A partir da configuração do módulo, clique em Gerar a página de declaração: é criada uma página CMS em cada idioma ativo da sua loja (modelos FR, EN, ES, DE e IT incluídos, com recurso ao inglês para os restantes idiomas), com:

• o estado de conformidade face à Diretiva (UE) 2019/882 e à norma EN 301 549;
• a lista das funcionalidades de acessibilidade propostas;
• o canal de comunicação que aponta para o seu formulário de contacto;
• as vias de recurso para a autoridade nacional competente.

A ligação para a declaração aparece automaticamente no fundo do painel do widget. Depois de uma atualização do módulo ou de uma mudança de nome da loja, clique em Atualizar a página de declaração para atualizar a página existente sem alterar o seu URL.

Estatísticas e prova de diligência

A tabela da página de configuração apresenta, para os ú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, marcos ARIA, ligações para saltar conteúdo e correções de contraste. Em caso de fiscalização ou de reclamação, estes contadores documentam as medidas técnicas implementadas. O botão Repor as 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 os defeitos técnicos mais frequentes, mas alguns critérios WCAG continuam a ser de natureza editorial e cabem-lhe a si:

• hierarquia lógica dos títulos h1-h6 nos seus conteúdos CMS e fichas de produto;
• qualidade da redação dos textos alternativos das suas imagens principais;
• legendagem dos seus vídeos;
• clareza das legendas dos seus botões e ligações.

Resolução de problemas

• O botão não aparece — verifique se o widget está ativado, se o hook displayBeforeBodyClosingTag não está desativado pelo seu tema e limpe a cache do PrestaShop (Parâmetros avançados > Desempenho).
• As preferências não persistem — o visitante está provavelmente a navegar em modo privado ou o navegador bloqueia o localStorage; o widget continua utilizável, perde-se apenas a persistência.
• O contraste elevado deixa uma zona incoerente — alguns elementos injetados dinamicamente depois do carregamento (widgets de terceiros) escapam à passagem de análise. Desative e reative o modo, ou comunique o caso ao apoio ao cliente com o URL em causa.
• Não chega nenhuma estatística — verifique se a recolha está ativada e se nenhum bloqueador do lado do servidor está a filtrar os pedidos para o controlador track do módulo.

Desinstalação

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