Resumo da IA
Você usa formulários com várias páginas e deseja que a barra de progresso e os títulos das seções passem por mais verificações de acessibilidade? Alguns scanners relatam problemas como nomes acessíveis ausentes na barra de progresso e níveis de título ignorados dentro dos campos divisores.
Neste tutorial, mostraremos como adicionar um trecho de JavaScript personalizado que:
- Adiciona um
aria-labelpara a barra de progresso - Altera os títulos dos divisores da seção de
h3parah2para melhorar a hierarquia dos títulos
Antes de começar
Este tutorial foi elaborado para formulários com várias páginas que:
- Use o indicador de página no estilo barra de progresso
- Inclua campos Divisor que geram títulos dentro do formulário
Você também precisará de uma maneira de adicionar PHP personalizado ao seu site, como um plugin específico para o site ou um plugin de trechos.
Se precisar de ajuda para adicionar código personalizado, consulte nosso guia sobre como adicionar trechos de código PHP personalizados para WPForms.
Adicionando o trecho de correção de acessibilidade
Para adicionar as melhorias de acessibilidade, use o trecho de código abaixo. Ele imprime um pequeno script no rodapé do seu site que atualiza a barra de progresso e os títulos dos divisores de seção no front-end.
Após salvar o trecho, abra uma página que contenha seu formulário de várias páginas e verifique se a barra de progresso ainda funciona conforme o esperado.
Como funciona o Snippet
A primeira função adiciona um aria-label para cada elemento com o wpforms-page-indicator progress classes para que a barra de progresso tenha um nome acessível. A segunda função encontra h3 títulos dentro dos campos divisores, recria-os como h2 elementos com os mesmos atributos e conteúdo, e substitui os originais para melhorar a hierarquia dos títulos.
Personalização do snippet
Você pode ajustar o trecho para melhor se adequar ao seu site.
Alterar o texto do rótulo da ária
Dentro do primeiro bloco de script, atualize esta linha:
$(this).attr('aria-label', 'Progresso da página do formulário');
Altere o texto entre aspas para um rótulo que faça sentido para o seu formulário, como:
$(this).attr('aria-label', 'Progresso da inscrição para a formatura');
Este é o texto que os leitores de tela anunciarão para a barra de progresso.
Segmente apenas um formulário específico
Por padrão, os seletores:
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
aplique a todas as barras de progresso e divisórias WPForms em seu site.
Se você deseja limitar esse comportamento a um único formulário, pode adicionar o ID do formulário ao seletor. Por exemplo, para o formulário ID 123:
$('#wpforms-123 .wpforms-page-indicator.progress')
$('#wpforms-123 .wpforms-field-divider h3')
Isso mantém as alterações restritas apenas a esse formulário.
Pronto, agora você aprendeu como dar aos seus formulários de várias páginas uma barra de progresso e uma estrutura de cabeçalhos mais acessíveis usando um trecho de JavaScript personalizado.
Em seguida, você pode consultar nosso guia sobre como criar 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.