Constructor de castores de accesibilidad: ¿Qué necesitas saber?

En los últimos años, el equipo de WP Shout ha utilizado y revisado a los creadores populares de WordPress. En nuestras pruebas, Beaver Builder salió primero. Tenía un buen puntaje para facilitar el uso, la fiabilidad y el apoyo. Por lo tanto, no es una sorpresa descubrir que el equipo de Beaver Builder también tiene un compromiso con la accesibilidad. El artículo de accesibilidad de Beaver Builder enumera los beneficios de un sitio accesible como:
Legabilidad mejorada
Más fácil de buscar
Facilitar mayor en uso
Audiencia superior
Mejor SEO
Cuanto más accesible sea un sitio, más personas pueden usarlo: es una ganancia para todos los lados. Por lo tanto, es algo para lo que Beaver Builder y otros proveedores de complementos de WordPress están ansiosos por mejorarlo y ser conocidos.
Si desea mejorar algunos elementos básicos en accesibilidad, consulte estos elementos de grito de WP:
Cómo ajustar su sitio web existente de WordPress para accesibilidad
Profundidad en la accesibilidad de WordPress
La accesibilidad de Beaver Builder brevemente si tiene prisa, pero desea saber cuán accesible es el generador de páginas de Beaver Builder, aquí hay una breve descripción de los módulos y cómo los evaluaría. Buena accesibilidad
Audio
Grito
Html
Título
menú
Foto
Búsqueda
La barra lateral
Separador
Editor de texto
Video
Bien accesibilidad
Botón
Llamada a la acción
Formulario de contacto
Galería
ICONO
Grupo de íconos
Mapa
Postes
La tabla de precios
Accesibilidad no muy buena
Acordeón
Diapositiva de contenido
Forma de autenticación
Publicación de carrusel
Control deslizante para publicaciones
Presentación de diapositivas
Formulario de suscripción
pestañas
evidencia
¿Qué hay en la familia de productos Beaver Builder? Beaver Builder es el más conocido como generador de páginas, pero ¿sabía que es parte de una familia de productos? Además del generador de páginas, que viene en dos variantes, Beaver Builder Lite (Free) y Beaver Builder Pro (pagado), equipo Beaver Builder hace otros dos productos. El tema de Beaver Builder es su propio tema diseñado para funcionar perfectamente con sus páginas. Beaver Themer es un complemento adicional para diseñar modelos tradicionalmente asociados con temas de WordPress, como sede, sótanos, páginas de blogs y 404 páginas. Fred usó Beaver Themer para crear sus propias plantillas en su experimento de construcción de un sitio de WordPress. Puede obtener más información sobre cómo crear patrones de publicación en la documentación de Beaver Themer.
Beaver Builder Lite tiene más de 300,000 instalaciones activas, por lo que hay un número considerable de sitios creados con él como generador de página elegido. ¿Cómo saber cuándo es accesible un sitio? El propósito de tener un sitio accesible es eliminar tantas barreras como sea posible a los usuarios que acceden al contenido. Cuantas más barreras, menos accesible sea el sitio. Algunas barreras de accesibilidad son:
Las imágenes no se etiquetan correctamente con alternativas de texto.
Las partes de las páginas web no solo se pueden acceder por teclado.
Usando la tecla Tab para navegar, no puede ver dónde se encuentra en la página.
Los pedidos son confundidos o difíciles de usar.
¿Cómo se prueba la accesibilidad de Beaver Builder? Desde un punto de vista práctico, es más fácil verificar la accesibilidad de una página publicada. La mayoría de los sitios tienen como objetivo pasar el estándar de accesibilidad WCAG 2.1 en AA. Cualquier complemento que afecte el front-end. Por el momento, consideremos solo el resultado del generador de páginas en Beaver Builder. Hay varias herramientas en línea que pueden verificar la accesibilidad. Los verificadores automáticos no pueden probar todos los problemas, pero soy un buen comienzo. Por ejemplo, el instrumento Wave verifica una serie de violaciones de accesibilidad. En esta evaluación de la página de inicio del código WP, la página es bastante buena. Hay algunos errores de contraste: blanco en la naranja no tiene un color suficiente contraste para pasar la prueba, pero no hay errores de accesibilidad importantes, al menos los que se ve el instrumento.
Sin embargo, el sitio web de WP No Code es un sitio simple que no utiliza las plantillas o módulos más sofisticados de Beaver Builder. A finales de 2019, probé la accesibilidad de algunos de los complementos y módulos de Beaver Builder y escribí sobre experiencia en mi propio blog. Centrarse en la accesibilidad de Beaver Builder: ¿es el producto final accesible? Descubrí que el contenido producido por el complemento puede ingresar en uno de los tres campamentos:
A veces podrá usar los módulos de Beaver Builder para hacer que el contenido sea deficiente.

Otras veces, necesitará algún conocimiento para cambiar su configuración de manera óptima.
Finalmente, en otros casos, es posible que necesite otra herramienta para el trabajo. ¿Qué ha mejorado recientemente en la accesibilidad de Beaver Builder? Desde que escribí esa publicación, el equipo de desarrollo de Beaver Builder ha realizado algunos remedios de accesibilidad, especialmente en Beaver Builder 2.4:
Accesibilidad: agregue la opción de texto para el lector de pantalla solo al icono
Accesibilidad: Agregue las etiquetas al módulo de suscripción
Accesibilidad: permita la elección de sustituyentes, etiquetas o ambas para los elementos de formulario y permita que la barra espacial y la ingrese envíen el formulario
Accesibilidad: Módulo de testimonios: revocar los comandos para que la marca coincida con la pantalla
Accesibilidad: Modo de menú: remedia el problema de accesibilidad con el botón de cierre de la búsqueda de flyout
Dado esto, suponga que construirá las páginas utilizando módulos, en lugar de plantillas, y verá ahora la etapa actual de esos módulos de constructor de castores.
La accesibilidad del módulo Beaver Builder Módulos básicos Los módulos básicos son los más simples y generan contenido bastante accesible. Usando el módulo de audio, da como resultado un reproductor al que se puede acceder tanto al teclado como al mouse. Sabiamente, la reproducción automática está deshabilitada. Para un usuario de lector de pantalla, tener una reproducción de medios automático cuando la página está cargada es una forma garantizada de molestarlo.
La etiqueta del módulo de encabezado es predeterminado a un título H2, que tiene sentido. Las páginas creadas con un generador de página normalmente no tienen un Título 1: normalmente lo agrega solo, y el título de siguiente nivel que usa es un título 2. Por supuesto, puede cambiarlo con cualquier título que necesita. Créelo o no, El módulo de botón no crea un botón. Es un enlace creado para que parezca un botón. Este es un modelo de diseño increíblemente común, pero desde un punto de vista técnico no es correcto. La razón es que los botones nativos pueden ser activados por la barra espacial, mientras que los enlaces no pueden. Si presiona la barra espacial en un enlace de estilo de botón, desplácese hacia abajo en la página, a menos que se agregue un controlador de eventos JavaScript al enlace. Algunas cosas a seguir aquí en términos de accesibilidad son el texto del botón: “Haga clic aquí” no da idea de qué botón y el contraste de color entre el texto y el fondo del botón. Puedes, y deberías, cambiar ambos.
Esta combinación de texto blanco en el fondo azul aparece en varios módulos, por lo que debe cambiar esto en todos. Lo principal para recordar al usar el módulo de foto es dar texto alternativo a su imagen. Puede hacerlo al seleccionarlo en la biblioteca de medios. Si decide conectar su imagen, haga que el texto alternativo coincida con el destino del enlace. El uso del módulo del editor de texto no debe plantear muchos problemas de accesibilidad. Un consejo es preferir el texto del BOLD, a diferencia de la cursiva, para la acentuación. El módulo de separador simplemente genera una línea de separación CSS, por lo que es bueno comenzar.
En el módulo de video, puede agregar su propio video de la biblioteca de medios o como incorporación. Noté que es más fácil ver los pedidos resaltados cuando se usa el teclado cuando se usa el reproductor de YouTube. El control de pausa se resalta cuando se usa el teclado con una incorporación de YouTube, desea evitar la reproducción automática de video, especialmente si tiene sonido. Módulos de medios El control deslizante de contenido muestra. Tiene reproducción real automática, la diapositiva cambia cada 5 segundos de forma predeterminada. Mientras se activa el descanso al pasar con el mouse, no es seguro, ¡porque no todos pueden usar un mouse! Es mucho mejor deshabilitar por completo la reproducción automática y evitar los problemas causados ​​por el movimiento deslizante o la distracción. Otra cosa que para ver aquí es el contraste de color cuando tienes un texto que se superpone en las diapositivas. Si la imagen de fondo es demasiado ligera, su texto no se lee.

El módulo de la galería usa las galerías nativas de WordPress. Las imágenes están configuradas para aparecer en un cuadro luminoso de forma predeterminada. Si no necesita una caja de luz, puede deshabilitarla. Para los visitantes que usan la tecla de teclado de tabulación para navegar, puede ser difícil para ellos seleccionar qué imagen mostrar en el cuadro Lightbox con algunos navegadores. Es más fácil ver el contorno de la imagen actual en Chrome (a continuación) que Firefox. Puede mejorar el contorno con algunos CSS personalizados.
También querrá asegurarse de que sus imágenes tengan un texto alternativo apropiado. Al usar el módulo de icono o el módulo del grupo de iconos, si su icono tiene un significado, debe informar a los lectores de la pantalla de lo que es. En la versión 2.4, Beaver Builder agregó un campo de texto del lector de pantalla que puede usar para etiquetar su icono. Si su icono es solo para decoración o significado en el texto adyacente a él, no debe hacer nada: el icono se ocultará para un usuario de lector de pantalla. El módulo de mapa muestra un mapa de Google en un iframe al ingresar una dirección. Si bien la accesibilidad del mapa depende en gran medida de la incorporación de Google, puede agregar un título a la configuración. Esto está destinado a decirle a cualquiera que use un lector de pantalla que comprenda lo que representa el mapa.

Si desea obtener más información sobre Google Maps y la accesibilidad de YouTube, lea esta publicación de Vision Australia: YouTube incrustado y Google Maps: ¿son accesibles? El módulo de presentación de diapositivas es otro control deslizante. Por defecto, se reproducen automáticamente y las diapositivas cambian usando una transición de FADE. Los comandos de navegación (flechas) se sorprenden de forma predeterminada. Desafortunadamente, un mouse solo puede acceder a los controles de flecha, por lo que un usuario de Key Saw -Key no tiene control sobre la presentación de la diapositiva. Es mejor apagar la reproducción automática y activar la opción de parachoques de control, ya que son accesibles desde el teclado.
Es mejor no poner contenido esencial en la presentación de diapositivas, porque un lector de pantalla no podrá acceder a él en absoluto. El módulo de prueba no es tan accesible cuando agrega los testimonios, ya que también está configurado para reproducción inicialmente automática, con un retraso de solo 4 segundos. Para hacer el contenido del contenido legible, debe deshabilitar la opción de reproducción automática. El módulo de llamadas de Action Modle y el módulo de llamada a acción son muy similares. El impulso de la acción es el más fácil de reconocer, con un título, un eslogan y un botón prepoblado. La notificación está vacía hasta que agregue su propio contenido. Eso lo hace un poco más personalizable. Puede usar un enlace en lugar de un botón, por ejemplo. Como he visto antes, siga el contraste de color en el botón y el texto que usa para su botón o enlace.

El módulo de formulario de contacto, el módulo de formulario de autenticación y el módulo de formulario de suscripción todos los formularios de salida.

Desde el cuadro, estos formularios no son tan accesibles. Un gran problema es el texto del sustituto: es un gris débil, difícil de ver en el fondo blanco. El uso solo del texto sustituyente también es subóptima para las personas con problemas de memoria, porque pueden olvidar fácilmente cuál es el campo una vez que comienzan a introducirlo. Las mejoras de accesibilidad que puede hacer son:

Los tres módulos: cambie los colores de fondo de los botones y el texto.

Módulo de formulario de contacto: Muestre solo etiquetas o etiquetas de formulario más sustituyentes. Desafortunadamente, esta opción aún no está disponible para los otros formularios.

Hay algunos problemas adicionales con los campos obligatorios y los mensajes de error en los formularios, lo que me determina recomendar el uso de un complemento de formulario para sus formularios. Puede agregar un menú de navegación a sus páginas con el módulo de menú, que está bien hecho. Se puede acceder a los elementos del submenú desde el teclado y los usuarios pueden ver cuáles han resaltado con el contorno. También puede ayudar a los usuarios a ver que hay submenus activando un icono de submenú, ya sea una flecha o un signo más. El modelo de búsqueda se basa en el widget nativo de WordPress y funciona bien. Módulos de diseño El módulo Acordion funciona para usuarios de teclado y lectores de pantalla. Su defecto principal es la duplicación de los controles. Hay 3 órdenes que abren cada artículo de acordeón, donde debería haber una. Esto todavía está esperando un remedio. El módulo de tabla de precios lee todo el contenido, pero todos los botones dicen lo mismo: “comenzar”. Aunque podría editar esto para incluir el nombre del plan, haría que los botones se vean desagradables. Sería bueno tener la opción de agregar el nombre del plan como lector de pantalla al texto del botón, para que pueda leerse como “Comience con el plan de plata”, etc.


El módulo de barra lateral elimina el contenido de la barra lateral, por lo que su accesibilidad depende de los widgets de WordPress en lugar de Beaver Builder. Usando el módulo de pestañas con un lector de pantalla, se le dice al usuario correctamente cuándo se extiende, restringida o selecciona una pestaña. El problema parece ser que el contenido de un archivo extendido no se lee de manera confiable.

Una vez que se selecciona la pestaña operable, parece que no hay forma de leer el texto a continuación del recuento de módulos informativos y contar el módulo de conteo que cambia con el tiempo, entonces, ¿cómo se transmiten a los usuarios con discapacidades visuales? El módulo de conteo de conteo se puede usar para contar a un evento.

Para un usuario del lector de pantalla, se lee el tiempo restante, pero no cualquier cambio posterior. Si tuvo una oferta de tiempo limitada en un sitio o subasta que terminó en un momento determinado, alguien navegando en el sitio usando un lector de pantalla podría calificar la fecha límite final. Una forma en que el módulo podría informar a los usuarios del lector de pantalla sobre el recuento inverso es el uso de una región de Live Aria. Puede ver un ejemplo a este respecto en la demostración del temporizador de cuenta regresiva de Paul J Adam Aria, donde se lee el tiempo actualizado cada minuto.

Debido a que está rápidamente animado, un lector de pantalla solo leerá el valor final del medidor de números. Puede agregar un texto antes o después del contexto.
Módulos de publicación Hay 3 módulos para la presentación. El módulo de publicación muestra publicaciones en una cuadrícula de mampostería (predeterminada), columnas, una lista o galería. La cuadrícula de mampostería funciona bien, aunque desde un punto de vista técnico, el texto alternativo para los enlaces de imagen debe ser el título de la publicación, no la descripción de la imagen en sí. Sería aún mejor si la imagen presentada y el título de la publicación se combinaran en un solo enlace, para que no haya enlaces adyacentes ajustivos. De los aspectos del módulo de publicación, el menos accesible es la galería, porque las publicaciones no son visibles a menos que pase el mouse sobre las imágenes. Obviamente, esto tampoco funciona en un dispositivo móvil. Para un teclado para ver, significa elegir las publicaciones de lectura solo en función de la apariencia de la imagen presentada, ¡no es fácil! El principal problema, una vez más, es que, con la reproducción automática, las diapositivas avanzan sin previo aviso. Un lector de pantalla escuchará el título de la publicación y la descripción de la primera lectura, luego, cuando el carrusel avanza, escucha lo mismo para la próxima publicación, etc. Esto hace que sea difícil concentrarse en el contenido y seleccionar qué publicación leer. Para hacer el carrusel de publicación y la diapositiva de publicación más asequible, deshabilite la reproducción automática. Luego puede elegir tener flechas o puntos de navegación.
Configuración global Si ha cambiado un módulo y desea utilizar la configuración personalizada en todos los casos posteriores, puede guardarlo para reutilizarlo.Si guarda el módulo de que el modo global, editar una cancha de módulo cambiará todos los tribunales.¿Qué pasa con la accesibilidad de Beaver Builder?El tema de Beaver Builder tiene algunas funciones de accesibilidad construidas.Algunos de ellos son: un enlace para el contenido, que permite a los usuarios de teclado saltar sobre cada navegación de la página.


Drop -down menús accesibles con el teclado.

El área de los elementos en la página, que ayuda a los usuarios ciegos a navegar más fácilmente.

Etiquetas de área en imágenes en miniatura, número de comentarios e íconos sociales.

Enlace de ignorancia para el tema de Beaver Builder
Preguntas y respuestas con el gerente de desarrollo de Beaver Builder Me puse en contacto con Jamie Valra de Beaver Builder y le hice algunas preguntas sobre la accesibilidad de Beaver Builder. Aquí están las preguntas y respuestas: î1. Hice algunas pruebas de accesibilidad utilizando el complemento Beaver Builder Pro a través de su sitio demostrativo en diciembre de 2019. ¿Qué versión del complemento Beaver Builder Pro se instaló en el sitio web demostrativo en ese momento? A1. Desafortunadamente, no tengo una manera de averiguar con certeza, pero tendemos a mantener nuestro sitio web actualizado con BB, para que sea 2.2.6.3 o 2.3/2.3.0.1 en ese momento. [Tenga en cuenta que probé esta vez con la versión 2.4.0.2.] Q2. Noté las mejoras de accesibilidad en la versión 2.4: ¿han sido otras desde entonces? R2: aún no, pero tenemos una solución de accesibilidad para el módulo de grupo de botones (que es un nuevo módulo en 2.4) para agregar una opción de etiqueta de grupo, de modo que cada grupo de botones tenga un nombre diferente. Q3. ¿Qué problemas de accesibilidad conscientes de los cuales todavía existe y le gustaría acercarse a ellos? ¿Hay ciertos módulos que le gustaría mejorar? R3: No tenemos ninguna lista (que no sea la anterior) en nuestro rastreador interno, pero como parecen, se les da prioridad. Î4. ¿Ha realizado una prueba con grupos de usuarios discapacitados? (Si no, ¿has pensado en hacer esto?) A4: Hasta donde yo sé, pero siempre estamos interesados ​​en las formas en que realmente podemos ver qué problemas enfrentan con BB, por lo que ciertamente no excluyo esto. Î5. ¿Qué problema de accesibilidad fue el más difícil de abordar?