### [Melhorar a Acessibilidade da Barra de Progresso do WPForms](https://wpforms.com/developers/improving-the-accessibility-of-the-wpforms-progress-bar/) **Publicado:** 11 de dezembro de 2025 **Autor:** Umair Majeed **Resumo:** Saiba como melhorar a acessibilidade para formulários de várias páginas do WPForms. **Conteúdo:** Utiliza formulários de várias páginas e quer que a barra de progresso e os títulos 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 título omitidos dentro dos campos de divisor. Neste tutorial, mostraremos como adicionar um trecho de JavaScript personalizado que: - Adiciona uma `aria-label` à barra de progresso - Altera os títulos dos divisores de secção de `h3` para `h2` para melhorar a hierarquia de títulos Este exemplo destina-se a ajudar em casos específicos e não torna o WPForms totalmente compatível com WCAG. O design do seu site e a acessibilidade geral continuam a ser da sua responsabilidade. --- ## Antes de Começar Este tutorial foi concebido para formulários de várias páginas que: - Utilizam o indicador de página com estilo de **barra de progresso** - Incluem campos de **Divisor** que geram títulos 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 trechos. Se precisar de ajuda para adicionar código personalizado, consulte o nosso guia sobre como [adicionar trechos PHP personalizados para o WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). ## Adicionar o Trecho de Correção de Acessibilidade Para adicionar as melhorias de acessibilidade, utilize 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 secção no front-end. Após guardar o trecho, 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 Trecho A primeira função adiciona uma `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 títulos `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 de títulos. ## Personalizar o Trecho Pode ajustar o trecho 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', 'Progresso da candidatura de graduação'); ``` 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 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 a dar aos seus formulários de várias páginas uma barra de progresso e uma estrutura de títulos mais acessíveis usando um trecho de JavaScript personalizado. Em seguida, pode querer consultar o nosso guia sobre [criação de formulários de várias páginas no WPForms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms) para ver todas as opções de configuração de quebras de página e indicadores de progresso. **Categorias:** Campos, Estilização, Extensão ---