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 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.

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.

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.

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 <main> 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.

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.

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.