### [Mejorando la accesibilidad de la barra de progreso de WPForms](https://wpforms.com/developers/improving-the-accessibility-of-the-wpforms-progress-bar/) **Publicado:** 11 de diciembre de 2025 **Autor:** Umair Majeed **Extracto:** Aprende a mejorar la accesibilidad de los formularios de varias páginas de WPForms. **Contenido:** ¿Utilizas formularios de varias páginas y quieres que la barra de progreso y los encabezados de sección pasen más comprobaciones de accesibilidad? Algunos escáneres informan de problemas como la falta de nombres accesibles en la barra de progreso y niveles de encabezado omitidos dentro de los campos divisores. En este tutorial, te mostraremos cómo añadir un fragmento de JavaScript personalizado que: - Añade una `aria-label` a la barra de progreso - Cambia los encabezados de los divisores de sección de `h3` a `h2` para mejorar la jerarquía de encabezados Este ejemplo está destinado a ser una ayuda para casos específicos y no hace que WPForms cumpla totalmente con WCAG. El diseño de tu sitio y la accesibilidad general siguen siendo tu responsabilidad. --- ## Antes de empezar Este tutorial está diseñado para formularios de varias páginas que: - Utilizan el indicador de página de estilo **barra de progreso** - Incluyen campos **Divisor** que generan encabezados dentro del formulario También necesitarás una forma de añadir PHP personalizado a tu sitio, como un plugin específico del sitio o un plugin de fragmentos. Si necesitas ayuda para añadir código personalizado, consulta nuestra guía sobre cómo [añadir fragmentos de PHP personalizados para WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). ## Añadir el fragmento de corrección de accesibilidad Para añadir las mejoras de accesibilidad, utiliza el fragmento de código a continuación. Imprime un pequeño script en el pie de página de tu sitio que actualiza la barra de progreso y los encabezados de los divisores de sección en el front-end. Después de guardar el fragmento, abre una página que contenga tu formulario de varias páginas y verifica que la barra de progreso sigue funcionando como se esperaba. ## Cómo funciona el fragmento La primera función añade una `aria-label` a cada elemento con las clases `wpforms-page-indicator progress` para que la barra de progreso tenga un nombre accesible. La segunda función busca encabezados `h3` dentro de los campos divisores, los recrea como elementos `h2` con los mismos atributos y contenido, y reemplaza los originales para mejorar la jerarquía de encabezados. ## Personalización del fragmento Puedes ajustar el fragmento para que se adapte mejor a tu sitio. ### Cambiar el texto de la etiqueta aria Dentro del primer bloque de script, actualiza esta línea: ``` $(this).attr('aria-label', 'Form Page Progress'); ``` Cambia el texto entre comillas por una etiqueta que tenga sentido para tu formulario, como: ``` $(this).attr('aria-label', 'Progreso de la solicitud de graduación'); ``` Este es el texto que los lectores de pantalla anunciarán para la barra de progreso. ### Dirigirse a un formulario específico solamente Por defecto, los selectores: ``` $('.wpforms-page-indicator.progress') $('.wpforms-field-divider h3') ``` se aplican a todas las barras de progreso y divisores de WPForms en tu sitio. Si deseas limitar este comportamiento a un solo formulario, puedes añadir el ID del formulario al selector. Por ejemplo, para el formulario con ID 123: ``` $('#wpforms-123 .wpforms-page-indicator.progress') $('#wpforms-123 .wpforms-field-divider h3') ``` Esto mantiene los cambios limitados solo a ese formulario. Eso es todo, ahora has aprendido a dar a tus formularios de varias páginas una barra de progreso y una estructura de encabezados más accesible utilizando un fragmento de JavaScript personalizado. A continuación, es posible que desees revisar nuestra guía sobre [cómo crear formularios de varias páginas en WPForms](https://wpforms.com/docs/how-to-create-multi-page-forms-in-wpforms) para ver todas las opciones de configuración de saltos de página e indicadores de progreso. **Categorías:** Campos, Estilo, Extensión ---