Accessibilité : Quels Builders Wordpress ont un menu navigable ?
Rédigé le 27/06/2024 par Delphin Batantou
Quels sont les standards pour faire un menu navigable ?
L’accessibilité des sites web est devenue une priorité, et cela inclut la navigabilité des menus. Dans cet article, nous allons explorer les standards pour rendre un menu navigable et évaluer l’accessibilité des menus créés avec différents builders WordPress en 2023. Nous examinerons en détail les performances de Brizy, Divi, Avada, BeBuilder (Muffins), et Themify.
Standards pour une navigation accessible
Pour qu’un menu soit accessible, il doit répondre à plusieurs critères basés sur les directives pour l’accessibilité du contenu Web (WCAG) :
-
Navigation au clavier : Les utilisateurs doivent pouvoir naviguer dans le menu à l’aide des touches fléchées, Tab et Entrée. (WCAG 2.1.1 Niveau A)
-
Ouverture et fermeture des menus : Les sous-menus doivent pouvoir être ouverts et fermés via le clavier, sans nécessiter de survol (hover). (WCAG 2.1.1 Niveau A)
-
Mobile : Les menus hamburgers et les boutons de fermeture doivent être accessibles via le focus du clavier. (WCAG 2.1.1 Niveau A)
-
Focus visible : Chaque élément du menu doit être atteignable et identifiable via le focus du clavier. (WCAG 2.4.7 Niveau AA)
Méthodologie
Pour cette analyse, j’ai d’abord identifié les cinq builders WordPress les plus utilisés en 2023.
| Builder | Installation actives |
|---|---|
5.000.000 |
|
4.300.000 |
|
835.000 |
|
800.000 |
|
500.000 |
|
90.000 |
Après les avoir testés, j’ai constaté que la navigabilité du menu dépendait fortement des thèmes utilisés. Par conséquent, j’ai fait une recherche plus globale et ai concentré mes tests sur les builders qui imposent l’utilisation d’un thème associé et permettent la création visuelle d’un menu.
J’ai trouvé 5 builders correspondant aux critères :
| Builder | Installation actives |
|---|---|
835.000 |
|
800.000 |
|
260.000 |
|
100.000 |
|
90.000 |
Résultats des tests
Brizy
-
Desktop : Le menu ne s’ouvre qu’au survol (hover), rendant impossible la navigation avec les flèches, la touche Tab, ou la touche Entrée. Il n’est pas possible d’ouvrir les sous-menus via le clavier.
-
Mobile : Même problème.
Conclusion : Brizy manque clairement d’accessibilité en termes de navigation au clavier sur desktop.
Note: 1/5
Divi
-
Desktop : Pas de focus visible. Les menus se déroulent uniquement au survol, ce qui empêche leur utilisation via le clavier.
-
Mobile : Le menu hamburger n’est pas atteignable via le focus du clavier.
Conclusion : Divi ne supporte pas une navigation clavier accessible, ce qui est un sérieux problème pour les utilisateurs de technologies d’assistance.
Note: 0/5
Avada
-
Desktop : Focus visible et sous-menus accessibles. Les sous-menus s’ouvrent au focus et se ferment lorsqu’on quitte le focus.
-
Mobile : Pas de focus sur le hamburger ou la croix pour fermer, mais les éléments de la liste sont accessibles via le focus. Les sous-menus peuvent être ouverts et fermés avec un bouton séparé de l’élément.
Conclusion : Avada offre une bonne accessibilité sur desktop, mais nécessite des améliorations sur mobile pour les éléments de contrôle comme le hamburger.
Note: 4/5
BeBuilder (Muffins)
-
Desktop : Pas de focus visible. Les sous-menus ne se déroulent pas sous les menus principaux, mais à côté, ce qui complique la navigation.
-
Mobile : Pas de focus et impossible d’ouvrir le menu hamburger via le clavier.
Conclusion : BeBuilder manque de support pour la navigation au clavier, tant sur desktop que sur mobile.
Note: 2/5
Themify
-
Desktop : Focus visible et sous-menus accessibles.
-
Mobile : Le menu est inaccessible, impossible d’ouvrir le menu hamburger via le clavier.
Conclusion : Themify propose une bonne accessibilité sur desktop mais échoue sur mobile.
Note: 3.5/5
Conclusion:
Grâce à mes premiers tests sur les thèmes pré-integrés par WordPress, je me suis rendu compte que le plupart des builders, imposant un thème parent, que j’ai testés, sont moins bons voire inaccessibles en terme de navigation clavier.
Parmi les builders testés, Avada se démarque comme le plus accessible sur desktop, bien qu’il présente des limitations sur mobile. Toutefois, il faut rester prudent dans le choix de son builder car comme nous l’avons observé lors de nos deux tests de performances, Avada est apparu comme étant le moins performant.
Notre premier test de performance. Notre deuxième test de performance.
Les autres builders, comme Brizy, Divi, BeBuilder, et Themify, montrent des lacunes significatives en matière de navigation clavier, rendant leur utilisation difficile pour les personnes ayant des besoins spécifiques en termes d’accessibilité.
Pour améliorer l’accessibilité de votre site, il est crucial de choisir un builder et un thème qui respectent les standards d’accessibilité, en s’assurant que chaque élément de navigation est facilement utilisable par tous les utilisateurs, quelle que soit leur situation.