Resumo de IA
Você usa formulários de várias páginas e quer que a barra de progresso e os cabeçalhos das seções passem em mais verificações de acessibilidade? Alguns scanners relatam problemas como nomes acessíveis ausentes na barra de progresso e níveis de cabeçalho pulados dentro dos campos divisores.
Neste tutorial, mostraremos como adicionar um trecho de JavaScript personalizado que:
- Adiciona uma
aria-labelà barra de progresso - Altera os cabeçalhos divisores de seção de
h3parah2para melhorar a hierarquia de cabeçalhos
Antes de começar
Este tutorial foi projetado para formulários de várias páginas que:
- Usam o indicador de página no estilo barra de progresso
- Incluem campos Divisor que geram cabeçalhos dentro do formulário
Você também precisará de uma maneira de adicionar PHP personalizado ao seu site, como um plugin específico do site ou um plugin de trechos.
Se precisar de ajuda para adicionar código personalizado, consulte nosso guia sobre como adicionar trechos de 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 cabeçalhos 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 como esperado.
Como o Trecho Funciona
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 de campos divisores, recria-os como elementos h2 com os mesmos atributos e conteúdo, e substitui os originais para melhorar a hierarquia de cabeçalhos.
Personalizando o Trecho
Você pode ajustar o trecho para melhor se adequar ao seu site.
Alterar o texto da label aria
Dentro do primeiro bloco de script, atualize esta linha:
$(this).attr('aria-label', 'Form Page Progress');
Altere o texto entre aspas para uma label que faça sentido para o seu formulário, como:
$(this).attr('aria-label', 'Graduation application progress');
Este é o texto que os leitores de tela anunciarão para a barra de progresso.
Direcionar apenas um formulário específico
Por padrão, os seletores:
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
aplicam-se a todas as barras de progresso e divisores do WPForms em seu site.
Se você quiser 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çalho mais acessíveis usando um trecho de JavaScript personalizado.
Em seguida, você pode querer revisar nosso guia sobre criação de formulários de várias páginas no WPForms para ver todas as opções de configuração de quebras de página e indicadores de progresso