Resumen de la IA
¿Utilizas formularios de varias páginas y deseas que la barra de progreso y los encabezados de sección superen 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 divisorios.
En este tutorial, te mostraremos cómo añadir un fragmento de código JavaScript personalizado que:
- Añade un
aria-labela la barra de progreso - Cambia los encabezados divisorios de la sección de
h3ah2Mejorar la jerarquía de los encabezados.
Antes de comenzar
Este tutorial está diseñado para formularios de varias páginas que:
- Utiliza el indicador de página con estilo de barra de progreso.
- Incluye campos divisores 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 para el 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 código PHP personalizados para WPForms.
Añadir el fragmento de código para corregir la accesibilidad
Para añadir las mejoras de accesibilidad, utiliza el fragmento de código que aparece a continuación. Imprime un pequeño script en el pie de página de tu sitio web que actualiza la barra de progreso y los encabezados divisores de sección en la interfaz.
Después de guardar el fragmento, abra una página que contenga su formulario de varias páginas y compruebe que la barra de progreso sigue funcionando como se espera.
Cómo funciona el fragmento
La primera función añade un aria-label a cada elemento con el wpforms-page-indicator progress clases para que la barra de progreso tenga un nombre accesible. La segunda función encuentra h3 los encabezados dentro de los campos divisores, los recrea como h2 elementos con los mismos atributos y contenido, y sustituye a los originales para mejorar la jerarquía de los encabezados.
Personalización del fragmento
Puedes ajustar el fragmento para que se adapte mejor a tu sitio web.
Cambiar el texto de la etiqueta aria
Dentro del primer bloque de script, actualiza esta línea:
$(this).attr('aria-label', 'Progreso de la página del formulario');
Cambie el texto entre comillas por una etiqueta que tenga sentido para su formulario, como por ejemplo:
$(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 solo a un formulario específico
Por defecto, los selectores:
$('.wpforms-page-indicator.progress')
$('.wpforms-field-divider h3')
Aplicar a todas las barras de progreso y divisores de WPForms en tu sitio web.
Si desea limitar este comportamiento a un solo formulario, puede 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 únicamente a ese formulario.
Eso es todo, ahora ya sabes cómo añadir una barra de progreso y una estructura de encabezados más accesibles a tus formularios de varias páginas utilizando un fragmento de código JavaScript personalizado.
A continuación, es posible que desee 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.