es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Contact Form 7 + accesibilidad

11 Jul, 2023 Programación

Necesito tu ayuda con un error que encontré. Quiero que mi sitio web (tienda en línea) supere las pruebas de accesibilidad WCAG AA (webaim, achecker, w3validator). Han surgido muchos errores y como no hay ninguna herramienta para corregirlos automáticamente, y no hay una solución temporal al cargar como UserWay, los estoy corrigiendo uno por uno.

Uno de los complementos que utilicé es Contact Forms 7. Antes de abordar el problema, debo mencionar que utilizo un tema de envato market llamado Metro, Elementor, Woocommerce, WPML.
El informe de wave.webaim.org encontró un error en la siguiente página
https://benetialingerie.gr/contact/?lang=en (y en su traducción).
El error es:
Etiqueta de formulario faltante
Un control de formulario no tiene una etiqueta correspondiente.
A continuación, encontrarás el código.

<div class=”metro-contact-form” aria-label=”formulario de contacto”>
<h3 class=”rtin-title” aria-label=”área del título”>Envíenos un mensaje</h3>
<div class=”row” aria-label=”área del nombre”><div class=”col-md-6 form-group”>[text* your-name class:form-control placeholder “Nombre *”]</div><div class=”col-md-6 form-group”>[email* your-email class:form-control placeholder “Correo electrónico *”]</div></div>
<div class=”row” aria-label=”área del asunto”><div class=”col-md-6 form-group”>[text* your-subject class:form-control placeholder “Asunto *”]</div><div class=”col-md-6 form-group”>[tel your-phone class:form-control placeholder “Teléfono”]</div></div>
<div class=”form-group” aria-label=”área del mensaje”>[textarea* your-message class:form-control placeholder “Mensaje *”]</div>
<div class=”form-group” aria-label=”Botón de enviar”>[submit “Enviar”]</div>
[response]
</div>

Según entiendo, el código debe tener elementos

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hola Nikos,

    Entiendo que estás enfrentando un error con el plugin Contact Forms 7 en tu sitio web y quieres que tu sitio web supere las pruebas de accesibilidad WCAG AA.

    Con respecto al error de etiqueta de formulario faltante, tienes razón en que el código necesita tener elementos

    Para solucionar este error, puedes agregar un elemento 

    <div class="col-md-6 form-group" aria-label="área de nombre">
  <label for="your-name">Nombre *</label>
  [text* your-name class:form-control id:your-name placeholder "Nombre *"]
</div>

    En este código modificado, agregamos un elemento

    Puedes hacer lo mismo para los demás controles del formulario para solucionar el error. Una vez que realices estos cambios, ejecuta las pruebas de accesibilidad nuevamente para ver si se ha resuelto el error.

    Espero que esto te ayude. Avísame si tienes alguna otra pregunta.

    Saludos cordiales,
    [Tu nombre]

Comments are closed.