Resumen de IA
¿Utiliza formularios de varias páginas y desea que la barra de progreso y los encabezados de sección superen más comprobaciones de accesibilidad? Algunos escáneres informan problemas como nombres accesibles faltantes en la barra de progreso y niveles de encabezado omitidos dentro de los campos divisores.
En este tutorial, le mostraremos cómo agregar un fragmento de JavaScript personalizado que:
- Agrega una etiqueta
aria-labela la barra de progreso - Cambia los encabezados del divisor de sección de
h3ah2para mejorar la jerarquía de encabezados
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á una forma de agregar PHP personalizado a su sitio, como un plugin específico del sitio o un plugin de fragmentos.
Si necesita ayuda para agregar código personalizado, consulte nuestra guía sobre cómo agregar fragmentos de PHP personalizados para WPForms.
Agregar el fragmento de corrección de accesibilidad
Para agregar las mejoras de accesibilidad, use el fragmento de código a continuación. Imprime un pequeño script en el pie de página de su sitio que actualiza la barra de progreso y los encabezados del divisor de sección en el front-end.
Después de guardar el fragmento, abra una página que contenga su formulario de varias páginas y verifique que la barra de progreso siga funcionando como se esperaba.
Cómo funciona el fragmento
La primera función agrega una etiqueta 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 encuentra 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
Puede ajustar el fragmento para que coincida mejor con su sitio.
Cambiar el texto de la etiqueta aria
Dentro del primer bloque de script, actualice esta línea:
$(this).attr('aria-label', 'Form Page Progress');
Cambie el texto entre comillas a una etiqueta que tenga sentido para su formulario, como:
$(this).attr('aria-label', 'Graduation application progress');
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 su sitio.
Si desea limitar este comportamiento a un solo formulario, puede agregar 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 ha aprendido a dar a sus formularios de varias páginas una barra de progreso y una estructura de encabezado más accesibles utilizando un fragmento de JavaScript personalizado.
A continuación, puede revisar nuestra guía sobre cómo crear formularios de varias páginas en WPForms para ver todas las opciones de configuración de saltos de página e indicadores de progreso.