Resumo de IA
Utiliza formulários com várias páginas e quer que a barra de progresso e os cabeçalhos das secções passem mais verificações de acessibilidade? Alguns scanners reportam problemas como nomes acessíveis em falta na barra de progresso e níveis de cabeçalho omitidos dentro dos campos de divisor.
Neste tutorial, vamos mostrar-lhe como adicionar um trecho de código JavaScript personalizado que:
- Adiciona uma
aria-labelà barra de progresso - Altera os cabeçalhos dos divisores de secção de
h3parah2para melhorar a hierarquia dos cabeçalhos
Antes de Começar
Este tutorial foi concebido para formulários com várias páginas que:
- Utilizam o indicador de página em estilo de barra de progresso
- Incluem campos de Divisor que geram cabeçalhos dentro do formulário
Também precisará de uma forma de adicionar PHP personalizado ao seu site, como um plugin específico do site ou um plugin de snippets.
Se precisar de ajuda para adicionar código personalizado, consulte o nosso guia sobre como adicionar snippets de PHP personalizados para o WPForms.
Adicionar o Snippet de Correção de Acessibilidade
Para adicionar as melhorias de acessibilidade, utilize o snippet de código abaixo. Ele imprime um pequeno script no rodapé do seu site que atualiza a barra de progresso e os cabeçalhos dos divisores de secção no front-end.
Após guardar o snippet, abra uma página que contenha o seu formulário com várias páginas e verifique se a barra de progresso continua a funcionar como esperado.
Como Funciona o Snippet
A primeira função adiciona um aria-label a cada elemento com as classes wpforms-page-indicator progress para que a barra de progresso tenha um nome acessível. A segunda função encontra cabeçalhos h3 dentro dos campos divisor, recria-os como elementos h2 com os mesmos atributos e conteúdo, e substitui os originais para melhorar a hierarquia dos cabeçalhos.
Personalizar o Trecho
Pode ajustar o snippet para melhor corresponder ao seu site.
Alterar o texto da etiqueta aria
Dentro do primeiro bloco de script, atualize esta linha:
$(this).attr('aria-label', 'Form Page Progress');
Altere o texto entre aspas para uma etiqueta que faça sentido para o seu formulário, como:
$(this).attr('aria-label', 'Graduation application progress');
Este é o texto que os leitores de ecrã anunciarão para a barra de progresso.
Direcionar apenas um formulário específico
Por defeito, os seletores:
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
aplicam-se a todas as barras de progresso e divisores do WPForms no seu site.
Se quiser limitar este comportamento a um único formulário, pode adicionar o ID do formulário ao seletor. Por exemplo, para o formulário com ID 123:
$('#wpforms-123 .wpforms-page-indicator.progress')
$('#wpforms-123 .wpforms-field-divider h3')
Isto mantém as alterações limitadas apenas a esse formulário.
É tudo, agora aprendeu como dar aos seus formulários com várias páginas uma barra de progresso e estrutura de cabeçalho mais acessíveis usando um snippet de JavaScript personalizado.
Em seguida, pode querer rever o nosso guia sobre criação de formulários com várias páginas no WPForms para ver todas as opções de configuração de quebras de página e indicadores de progresso