Melhorando a acessibilidade da barra de progresso do WPForms

Você usa formulários com várias páginas e deseja que a barra de progresso e os títulos das secçõ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, vamos mostrar como adicionar um snippet JavaScript personalizado que:

• Adiciona um aria-label para a barra de progresso
• Altera os títulos dos divisores da secção de h3 para h2 para melhorar a hierarquia dos títulos

Antes de começar

Este tutorial foi concebido para formulários com várias páginas que:

• Use o indicador de página no estilo barra de progresso
• Inclua campos Divisores 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 snippets.

Se precisar de ajuda para adicionar código personalizado, consulte o nosso guia sobre como adicionar trechos de código PHP personalizados para o WPForms.

Adicionar o snippet 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.

Depois de guardar o snippet, abra uma página que contenha o seu formulário de 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 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.

Personalizar o snippet

Pode ajustar o snippet para se adequar melhor ao seu site.

Alterar o texto da etiqueta aria

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 candidatura à graduação');

Este é o texto que os leitores de ecrã irão anunciar para a barra de progresso.

Segmente apenas um formulário específico

Por predefinição, os seletores:

$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')

aplicar a todas as barras de progresso e divisórias WPForms no seu site.

Se quiser limitar esse 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')

Isso mantém as alterações restritas apenas a esse formulário.

É isso, 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, pode consultar o 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.