Ce que vous devez savoir • WPShout

Au cours des dernières années, l'équipe WP Shout a utilisé et examiné des constructeurs de pages WordPress populaires. Lors de nos tests, Beaver Builder est arrivé en tête. Il a obtenu de bons résultats pour sa convivialité, sa fiabilité et son assistance.

Ce n’est donc pas une surprise d’apprendre que l’équipe de Beaver Builder est également engagée en matière d’accessibilité.

L'article sur l'accessibilité de Beaver Builder répertorie les avantages d'un site accessible comme suit:

• Meilleure lisibilité
• Plus consultable
• Une plus grande facilité d'utilisation
• Un public plus large
• Meilleur référencement

Plus un site est accessible, plus les gens peuvent l'utiliser: c'est un gagnant-gagnant à tous points de vue. C’est donc quelque chose que Beaver Builder et d’autres fournisseurs de plugins WordPress souhaitent l’améliorer et se faire connaître.

Si vous souhaitez revoir certaines bases de l'accessibilité, consultez ces articles WP Shout:

L'accessibilité Beaver Builder en quelques mots

Si vous êtes pressé mais que vous voulez savoir à quel point le constructeur de pages Beaver Builder est accessible, voici un bref aperçu des modules et comment je les évaluerais.

Bonne accessibilité

• l'audio
• Faire appel à
• HTML
• Titre
• Menu
• Photo
• Chercher
• Barre latérale
• Séparateur
• Éditeur de texte
• Vidéo

OK accessibilité

• Bouton
• Appel à l'action
• Formulaire de contact
• Galerie
• Icône
• Groupe d'icônes
• Carte
• Des postes
• Tableau des prix

Pas si bonne accessibilité

• Accordéon
• Curseur de contenu
• Formulaire de connexion
• Carrousel de messages
• Curseur de messages
• Diaporama
• Formulaire d'abonnement
• Onglets
• Témoignages

Qu'y a-t-il dans la famille de produits Beaver Builder?

Beaver Builder est surtout connu en tant que créateur de pages, mais saviez-vous qu'il fait partie d'une famille de produits?

En plus du constructeur de pages, qui se décline en deux versions, Beaver Builder Lite (gratuit) et Beaver Builder Pro (payant), l'équipe Beaver Builder fabrique deux autres produits.

Beaver Builder Theme est leur propre thème conçu pour fonctionner de manière transparente avec leur plugin de création de page.

Beaver Themer est un plugin complémentaire pour la conception de mises en page traditionnellement associées aux thèmes WordPress, comme les en-têtes, les pieds de page, les pages de blog et les pages 404. Fred a utilisé Beaver Themer pour créer ses propres modèles dans son expérience de création d'un site WordPress sans code. Vous pouvez en savoir plus sur la création de modèles de publication dans la documentation de Beaver Themer.

Beaver Builder Lite compte plus de 300 000 installations actives, il existe donc un nombre important de sites créés avec lui comme créateur de page de choix.

Comment savoir quand un site est accessible?

Le but d'avoir un site accessible est d'éliminer autant d'obstacles que possible pour les utilisateurs accédant au contenu. Plus il y a d'obstacles, moins le site est accessible.

Certains obstacles à l'accessibilité sont:

• Les images ne sont pas correctement étiquetées avec des alternatives textuelles.
• Certaines parties des pages Web ne sont pas accessibles uniquement via le clavier.
• En utilisant la touche Tab pour naviguer, vous ne pouvez pas voir où vous vous trouvez sur la page.
• Les contrôles sont confus ou difficiles à utiliser.

Comment testez-vous l'accessibilité de Beaver Builder?

D'un point de vue pratique, il est plus simple de vérifier l'accessibilité d'une page publiée. La plupart des sites visent à passer la norme d'accessibilité WCAG 2.1 au niveau AA.

Une page construite avec Beaver Builder sera un mélange de code provenant de diverses sources – les modèles et modules du générateur de page Beaver Builder que vous utilisez, votre thème et tous les plugins qui affectent le front-end.

Pour l'instant, considérons uniquement la sortie du générateur de page de Beaver Builder.

Il existe plusieurs outils en ligne permettant de vérifier l'accessibilité. Les vérificateurs automatisés ne peuvent pas tester chaque problème, mais ils sont un bon début.

Par exemple, l'outil WAVE recherche un certain nombre de violations d'accessibilité.

Dans cette évaluation de la page d'accueil de WP No Code, la page ressort plutôt bien. Il y a quelques erreurs de contraste – le blanc sur l'orange n'a pas un contraste de couleur suffisant pour réussir le test – mais pas d'erreurs d'accessibilité majeures, du moins celles que l'outil examine.

Le site WP No Code est un site simple, cependant, qui n'utilise pas les modèles ou modules Beaver Builder plus sophistiqués.

À la fin de 2019, j'ai testé l'accessibilité certains des modèles et modules de plugins Beaver Builder et j'ai écrit sur l'expérience sur mon propre blog.

Focus sur l'accessibilité Beaver Builder – Le produit final est-il accessible?

J'ai trouvé que le contenu produit par le plugin pouvait tomber dans l'un des trois camps:

1. Parfois, vous pourrez utiliser les modules de Beaver Builder pour rendre le contenu accessible par défaut.
2. D'autres fois, vous aurez besoin de savoir-faire pour peaufiner les paramètres de manière optimale.
3. Enfin, dans d'autres cas, vous pourriez avoir besoin d'un outil différent pour le travail.

Qu'est-ce qui a récemment été amélioré dans l'accessibilité de Beaver Builder?

Depuis que j'ai écrit cet article, l'équipe de développement de Beaver Builder a apporté quelques correctifs d'accessibilité, notamment dans la version Beaver Builder 2.4:

• Accessibilité: ajouter une option de texte lecteur d'écran uniquement aux icônes
• Accessibilité: ajouter des étiquettes au module d'abonnement
• Accessibilité: autorisez le choix des espaces réservés, des étiquettes ou les deux pour les éléments de formulaire et autorisez la barre d'espace et entrez pour soumettre le formulaire
• Accessibilité: Module de témoignages – inversez les commandes pour que le balisage corresponde à l'affichage
• Accessibilité: Module de menu – Correction d'un problème d'accessibilité avec le bouton de fermeture de la disposition Flyout

Dans cet esprit, supposons que vous allez créer vos pages à l'aide de modules plutôt que de modèles, et jetez un œil à l'état d'avancement de ces modules Beaver Builder maintenant.

Accessibilité du module Beaver Builder

Modules de base

Les modules Basic sont les plus simples et génèrent un contenu assez accessible.

En utilisant le Module audio produit un lecteur accessible au clavier et à la souris. Sagement, la lecture automatique est désactivée. Pour un utilisateur de lecteur d'écran, la lecture automatique des médias lors du chargement de la page est un moyen garanti de les ennuyer!

le Module de titre La balise utilise par défaut un en-tête h2, ce qui est logique. Les pages créées avec un générateur de page n'ont normalement pas d'en-tête 1 – vous l'ajoutez normalement vous-même, et l'en-tête de niveau suivant que vous utiliserez est un en-tête 2. Vous pouvez bien sûr le remplacer par l'en-tête dont vous avez besoin.

Croyez-le ou non, le Module de boutons ne crée pas de bouton. Il s’agit d’un lien conçu pour ressembler à un bouton. Il s’agit d’un modèle de conception incroyablement courant, mais techniquement ce n’est pas vraiment correct. La raison en est que les boutons natifs peuvent être activés par la barre d’espace, contrairement aux liens. Si vous appuyez sur la barre d'espace sur un lien de type bouton, vous faites défiler la page vers le bas, sauf si un gestionnaire d'événements Javascript est ajouté au lien.

Deux choses à surveiller ici en termes d'accessibilité sont le texte du bouton – «Cliquez ici» ne donne aucune idée de ce que fait le bouton et du contraste de couleur entre le texte et l'arrière-plan du bouton. Vous pouvez – et devriez – changer ces deux éléments.

Cette combinaison de texte blanc sur fond bleu apparaît sur plusieurs modules, vous devez donc changer cela sur chacun d'eux.

La principale chose à retenir lors de l'utilisation du Module photo est de donner à votre image un texte alternatif. Vous pouvez le faire lorsque vous le sélectionnez dans la médiathèque. Si vous décidez de lier votre image, faites en sorte que votre texte alternatif corresponde à la destination du lien.

Utilisation du Module éditeur de texte ne devrait pas poser de nombreux problèmes d'accessibilité. Une astuce consiste à préférer le texte en gras plutôt qu'en italique pour mettre l'accent.

le Module séparateur génère simplement une ligne de séparation via CSS, donc c'est bon.

dans le Module vidéo vous pouvez ajouter votre propre vidéo à partir de la médiathèque ou en tant qu'intégration. J'ai remarqué qu'il est plus facile de voir les commandes en surbrillance lorsque vous utilisez le clavier lorsque vous utilisez le lecteur YouTube.

Le contrôle Pause est mis en surbrillance lors de l'utilisation du clavier avec une intégration YouTube

Encore une fois, vous voulez éviter la lecture automatique de votre vidéo, surtout si elle contient du son.

Modules média

le Curseur de contenu montre Il a la lecture automatique activée avec la diapositive changeant toutes les 5 secondes par défaut. Bien que Pause en survol soit également activé, ce n’est pas infaillible, car tout le monde ne peut pas utiliser une souris!

Il est préférable de désactiver complètement la lecture automatique et d’éviter les problèmes dus au fait que le mouvement de la diapositive est trop rapide ou distrait.

Une autre chose à surveiller ici est le contraste des couleurs lorsque vous avez du texte superposé sur vos diapositives. Si l'image d'arrière-plan est trop claire, votre texte ne sera pas lisible.

le Module galerie utilise les galeries natives de WordPress. Les images sont définies pour apparaître dans une lightbox par défaut. Si vous n’avez pas besoin d’une lightbox, vous pouvez la désactiver.

Pour les visiteurs utilisant la touche Tab du clavier pour naviguer, il peut être difficile pour eux de sélectionner l'image à afficher dans la lightbox avec certains navigateurs. Il est plus facile de voir le contour de l'image actuelle dans Chrome (ci-dessous) que dans Firefox. Vous pouvez améliorer le contour avec du CSS personnalisé.

Vous voudrez également vous assurer que vos images ont un texte alternatif approprié.

Lorsque vous utilisez le Module d'icônes ou Module de groupe d'icônes, si votre icône a une signification, vous devez informer les utilisateurs du lecteur d'écran à quoi elle sert.

Dans la version 2.4, Beaver Builder a ajouté un champ Texte du lecteur d'écran que vous pouvez utiliser pour étiqueter votre icône.

Si votre icône est juste pour la décoration ou si la signification est indiquée dans le texte adjacent, vous n'avez rien à faire – l'icône sera masquée pour un utilisateur de lecteur d'écran.

le Module de carte affiche une carte Google dans une iframe lorsque vous entrez une adresse. Bien que l'accessibilité de la carte dépende en grande partie de l'intégration de Google, vous pouvez lui ajouter un titre dans les paramètres. Ceci a pour but de dire à toute personne utilisant un lecteur d'écran de comprendre ce que représente la carte.

Si vous voulez en savoir plus sur Google Maps et l'accessibilité de YouTube, lisez cet article de Vision Australia: YouTube et Google Maps intégrés – sont-ils accessibles?

le Module diaporama est une autre variante de curseur. Par défaut, il est lu automatiquement et les diapositives changent en utilisant une transition Fondu. Les commandes de navigation (flèches) sont activées par défaut.

Malheureusement, les commandes fléchées ne sont accessibles que par une souris, de sorte qu'un utilisateur de clavier voyant n'a aucun contrôle sur le diaporama.

Il est préférable de désactiver la lecture automatique et d'activer l'option Boutons de la barre de contrôle, car ceux-ci sont clavier accessible.

Il est préférable de ne pas mettre de contenu essentiel dans votre diaporama, car un utilisateur de lecteur d'écran ne pourra pas du tout y accéder.

le Module de témoignages n'est pas accessible lorsque vous y ajoutez des témoignages, car il est également configuré pour la lecture automatique au départ, avec un délai de seulement 4 secondes. Pour rendre le contenu lisible, vous devez désactiver l'option de lecture automatique.

Modules d'action

le Module de légende et Module d'appel à l'action Sont très similaires.

L'appel à l'action est le plus reconnaissable, avec un titre, un slogan et un bouton pré-remplis. La légende est vide jusqu'à ce que vous ajoutiez votre propre contenu. Cela le rend légèrement plus personnalisable. Vous pouvez utiliser un lien plutôt qu'un bouton, par exemple.

Comme nous l'avons vu précédemment, regardez le contraste des couleurs sur le bouton et le texte que vous utilisez pour votre bouton ou lien.

le Module Formulaire de contact, Module de formulaire de connexion et Module de formulaire d'inscription tous les formulaires de sortie.

Hors de la boîte, ces formulaires ne sont pas accessibles. Un gros problème est le texte de l'espace réservé: c'est un gris pâle qui est difficile à voir sur le fond blanc. Utiliser uniquement du texte d'espace réservé est également sous-optimal pour les personnes ayant des problèmes de mémoire, car elles peuvent facilement oublier à quoi sert le champ une fois qu'elles commencent à y taper.

Les améliorations d'accessibilité que vous pouvez apporter sont:

• Les trois modules: Modifiez l'arrière-plan du bouton et les couleurs du texte.
• Module Formulaire de contact: Afficher uniquement les étiquettes de formulaire ou les étiquettes plus les espaces réservés. Malheureusement, cette option n'est pas encore disponible pour les autres formulaires.

Il y a d'autres problèmes avec les champs obligatoires et les messages d'erreur sur les formulaires, ce qui m'amène à recommander l'utilisation d'un plugin de formulaire pour vos formulaires.

Vous pouvez ajouter un menu de navigation dans vos pages avec le Module de menu, ce qui est bien fait. Les éléments de sous-menu sont accessibles au clavier et les utilisateurs peuvent voir celui qu'ils ont mis en évidence avec le contour. Vous pouvez également aider vos utilisateurs à voir qu'il existe des sous-menus en activant une icône de sous-menu, une flèche ou un signe plus.

le Module de recherche est basé sur le widget WordPress natif et fonctionne correctement.

Modules de mise en page

le Module d'accordéon fonctionne pour les utilisateurs de clavier et de lecteur d'écran. Son principal défaut est la duplication des contrôles. Il y a 3 contrôles qui ouvrent chaque élément d'accordéon, là où il devrait vraiment y en avoir un. Ceci est toujours en attente d'un correctif.

le Module Tableau des prix lit tout le contenu, mais les boutons disent tous la même chose – «Commencer». Bien que vous puissiez le modifier pour inclure le nom du plan, cela donnerait aux boutons un aspect kludgy.

Ce serait bien d'avoir la possibilité d'ajouter le nom du plan en tant que texte du lecteur d'écran au texte du bouton, afin qu'il puisse être lu comme «Commencer avec le plan Argent» et ainsi de suite.

le Module de la barre latérale génère le contenu de votre barre latérale, de sorte que son accessibilité dépend de vos widgets WordPress plutôt que de Beaver Builder.

En utilisant le Module onglets avec un lecteur d'écran, un utilisateur est correctement informé lorsqu'un onglet est développé, réduit ou sélectionné. Le problème semble être que le contenu d'un onglet développé n'est pas lu de manière fiable.

Modules d'information

le Module de compte à rebours et Module compteur de nombres afficher des informations qui changent avec le temps, alors comment sont-elles transmises aux utilisateurs malvoyants?

Le module Compte à rebours peut être utilisé pour décompter jusqu'à un événement.

Pour un utilisateur de lecteur d'écran, le temps restant est lu, mais pas de modification ultérieure. Si vous aviez une offre à durée limitée sur un site, ou une enchère qui s'est terminée à un moment précis, une personne naviguant sur le site à l'aide d'un lecteur d'écran pourrait manquer la date limite finale.

Une façon dont le module pourrait informer les utilisateurs du lecteur d'écran du compte à rebours est d'utiliser une région aria-live. Vous pouvez en voir un exemple sur la démo ARIA Countdown Timer de Paul J Adam, où l’heure mise à jour est lue toutes les minutes.

Parce qu'il s'anime rapidement, un lecteur d'écran ne lira que la valeur finale du compteur numérique. Vous pouvez ajouter du texte avant ou après le numéro pour le contexte.

Modules de messages

Il existe 3 modules pour présenter les messages.

le Module Messages affiche les publications dans une grille de maçonnerie (par défaut), des colonnes, une liste ou une galerie. La grille de maçonnerie fonctionne bien, bien que techniquement, le texte alternatif des liens d'image devrait être le titre de l'article, pas la description de l'image elle-même. Ce serait encore mieux si l'image sélectionnée et le titre de l'article étaient combinés en un seul lien afin qu'il n'y ait pas de liens adjacents en double.

Parmi les dispositions du module Articles, la moins accessible est la Galerie, car les titres des articles ne sont pas visibles à moins que vous ne survoliez les images avec la souris. De toute évidence, cela ne fonctionne pas non plus sur un appareil mobile.

Pour un utilisateur de clavier voyant, cela signifie choisir les articles à lire en fonction de l'apparence de l'image présentée uniquement – pas facile!

Comme vous vous en doutez, le Module Carrousel de messages et Module de curseur de messages les deux affichent les messages dans un carrousel. Le principal problème, encore une fois, est que lorsque la lecture automatique est activée, les diapositives avancent sans avertissement.

Un utilisateur de lecteur d'écran entendra le titre et la description du premier article lu, puis lorsque le carrousel avancera, il entendra la même chose pour le prochain article, et ainsi de suite. Cela les empêche de se concentrer sur le contenu et de sélectionner le message à lire.

Pour rendre le carrousel d'articles et le curseur d'articles plus accessibles, désactivez la lecture automatique. Vous pouvez ensuite choisir d'avoir des flèches ou des points de navigation.

Paramètres globaux

Si vous avez peaufiné un module et que vous souhaitez utiliser vos paramètres personnalisés dans toutes les instances suivantes, vous pouvez l'enregistrer pour le réutiliser. Si vous enregistrez votre module en tant que module global, la modification d'une instance du module modifiera toutes les instances.

Qu'en est-il de l'accessibilité du thème Beaver Builder?

Le thème Beaver Builder intègre certaines fonctionnalités d'accessibilité. Certaines d'entre elles sont:

• Un lien d'accès au contenu, qui permet aux utilisateurs de clavier d'ignorer la navigation sur chaque page.
• Menus déroulants accessibles à l'aide du clavier.
• Repères Aria pour les éléments de la page, qui aident les utilisateurs aveugles à naviguer plus facilement.
• Étiquettes Aria sur les images miniatures, le nombre de commentaires et les icônes sociales.

Questions et réponses avec le directeur du développement de Beaver Builder

J'ai contacté Jamie VanRaalte de Beaver Builder et lui ai posé des questions sur l'accessibilité de Beaver Builder.

Voici les questions et réponses:

Q1. J'ai effectué des tests d'accessibilité en utilisant le plugin Beaver Builder Pro via votre site de démonstration en décembre 2019. Quelle version du plugin Beaver Builder Pro était installée sur le site de démonstration à ce moment-là?

A1. Je n'ai malheureusement pas de moyen de savoir avec certitude, mais nous avons tendance à garder notre site de démonstration mis à jour avec BB, donc ce serait soit 2.2.6.3 ou 2.3 / 2.3.0.1 à ce moment-là.

[Note that I tested this time with version 2.4.0.2.]

Q2. J'ai noté les améliorations d'accessibilité de la version 2.4: y en a-t-il eu d'autres depuis?

A2: Pas encore, mais nous avons un correctif d'accessibilité pour le module Button Group (qui est un nouveau module dans 2.4) pour ajouter une option d'étiquette de groupe afin que chaque groupe de boutons puisse avoir un nom différent.

Q3. De quels problèmes d'accessibilité avez-vous encore connaissance et que vous aimeriez aborder? Y a-t-il des modules particuliers que vous souhaitez améliorer?

R3: Nous n'en avons aucun actuellement répertorié (autre que celui mentionné ci-dessus) dans notre traqueur interne, mais à mesure qu'ils apparaissent, ils ont la priorité.

Q4. Avez-vous effectué des tests avec des groupes d'utilisateurs désactivés? (Sinon, avez-vous pensé à le faire?)

A4: Pas à ma connaissance, mais nous sommes toujours intéressés par les moyens de voir les problèmes que les gens rencontrent avec BB, donc je ne l'exclurais certainement pas.

Q5. Quel problème d'accessibilité a été le plus difficile à résoudre?

R5: Je ne pense pas qu'aucun n'a été trop difficile, mais une chose que nous prenons en considération est si nous avons besoin d'une nouvelle option pour résoudre un problème d'accessibilité (comme le problème du module de groupe de boutons) ou si nous pouvons utiliser une option existante dans le module pour remplir les données.

Q6. Gravity Forms s'est engagé à rendre les formulaires créés par son plugin conformes à WCAG 2.1 AA: les règles pour l'accessibilité du contenu Web, version 2.1, niveau AA. Souhaitez-vous que Beaver Builder réponde à la même norme?

R6: C'est formidable d'entendre parler de Gravity Forms. Beaver Builder a plus de pièces mobiles avec tous les modules que nous avons et chaque module ayant ses propres paramètres, mais nous nous engageons définitivement à l'accessibilité.

En résumé, où doit aller l'accessibilité Beaver Builder?

L’accessibilité de Beaver Builder est toujours en cours, même s’il est bon de savoir qu’elle s’est améliorée au fil du temps et que la volonté est là pour l’améliorer davantage.

Les modules qui nécessitent le plus d'améliorations sont l'accordéon, les modules de type curseur et les formulaires. Ce sont les modules les plus complexes en termes d'interaction utilisateur et les plus difficiles à rendre accessibles.

Si vous avez besoin de ce type d'interactivité, vous pouvez utiliser des plugins tiers plutôt que Beaver Builder.

Si vous rencontrez des problèmes d'accessibilité ou avez des demandes de fonctionnalités, la meilleure chose à faire est de les signaler sur le tableau des demandes de fonctionnalités et de la feuille de route de Beaver Builder.