Accessibilité : Quels thèmes Wordpress ont un menu accessible ?

Rédigé le 07/10/2024 par Delphin Batantou

Quels thèmes Wordpress ont un menu accessible ?

Lorsqu’il s’agit de rendre un site web accessible, la qualité de la navigation au clavier et la compatibilité avec les lecteurs d’écran sont des éléments essentiels. De nombreux thèmes WordPress offrent des fonctionnalités variées, mais tous ne sont pas égaux en termes d’accessibilité. Dans cet article, nous allons examiner plusieurs thèmes populaires en tenant compte des critères d’accessibilité des menus de navigation, basés sur les standards définis dans cet article de référence.

Méthodologie

Pour cette analyse, j’ai cherché les dix builders WordPress les plus utilisés en 2023.

Thème

Utilisateurs actifs

Astra

+1.600.000

Hello

+1.000.000

Ocean WP

+700.000

GeneratePress

+600.000

Neve

+300.000

Sidney

+100.000

Blocksy

+100.000

Storefront

+100.000

Hestia

+100.000

Zakra

+50.000

Pour évaluer l’accessibilité des menus des différents thèmes WordPress, j’ai mis en place un protocole de tests rigoureux. Voici comment ces tests ont été menés :

1. Création d’un site de test

J’ai créé un site de test avec un menu comportant plusieurs niveaux d’éléments imbriqués : des sous-menus et des sous-sous-menus. Ce type de structure complexe permet de tester les comportements de chaque thème de manière exhaustive.

2. Téléchargement et activation des thèmes

Chacun des thèmes WordPress évalués a été téléchargé et activé tour à tour sur le site. Une fois activé, chaque thème a été soumis à plusieurs séries de tests pour évaluer l’accessibilité du menu.

3. Séries de tests effectués

Pour chaque thème, trois séries de tests ont été effectuées, à la fois sur la version desktop et mobile du site :

Test manuel avec la tabulation : J’ai navigué dans le menu uniquement au clavier en utilisant les touches de Tabulation, Entrée et les flèches directionnelles pour simuler une interaction sans souris, comme recommandé par les standards d’accessibilité WCAG 2.1.

Test avec tabulation + lecteur d’écran : En utilisant un lecteur d’écran (NVDA ou VoiceOver), j’ai vérifié comment les informations du menu étaient transmises aux utilisateurs malvoyants ou aveugles lors de la navigation au clavier.

Test avec souris + lecteur d’écran : J’ai reproduit les interactions avec une souris tout en ayant le lecteur d’écran actif, pour m’assurer que le contenu visuel et les indications sonores étaient en phase avec les interactions de l’utilisateur.

4. Tests sur la version mobile

Chaque test a été répété en version mobile, avec un accent particulier sur l’accessibilité des menus hamburgers et des boutons de fermeture, souvent sources de problèmes d’accessibilité.

Critères testés :

Les tests ont été effectués en suivant les recommandations des WCAG 2.1, notamment les points suivants :

Navigation au clavier : Les utilisateurs doivent pouvoir naviguer dans le menu à l’aide des touches fléchées, Tab et Entrée sans dépendre de la souris. Ce critère est fondamental pour garantir que tout le menu est accessible aux personnes souffrant de handicaps moteurs. (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) de la souris. (WCAG 2.1.1 Niveau A)

Accessibilité mobile : Les menus hamburgers et les boutons de fermeture doivent être navigables avec le focus du clavier et accessibles via un lecteur d’écran, en indiquant clairement leur état (ouvert/réduit). (WCAG 2.1.1 Niveau A)

Focus visible : Chaque élément du menu doit être atteignable et identifiable via le focus du clavier, permettant aux utilisateurs de savoir où ils se trouvent dans la navigation. (WCAG 2.4.7 Niveau AA)

Ces tests ont permis de dresser une évaluation complète de l’accessibilité des menus pour chaque thème, et de les noter en fonction de leur conformité avec les standards.

Le Top 3 des thèmes pour un menu accessible

Parmi les nombreux thèmes WordPress testés, certains sortent clairement du lot en matière d’accessibilité des menus. Grâce à une navigation fluide, une gestion impeccable du focus et des retours clairs pour les utilisateurs de lecteurs d’écran, ces trois thèmes se sont démarqués. Voici notre sélection des meilleurs :

Blocksy

Blocksy brille par sa navigation au clavier intuitive et des messages très clairs envoyés aux lecteurs d’écran. En plus d’être facile à utiliser sur desktop, il propose une navigation fluide sur mobile, où chaque action, qu’il s’agisse d’ouvrir un sous-menu ou de sortir du menu, est bien signalée. C’est un choix très complet pour ceux qui souhaitent maximiser l’accessibilité de leur site.

Astra

Astra, l’un des thèmes les plus populaires, ne déçoit pas non plus sur ce terrain. La navigation au clavier est bien pensée, avec des retours explicites et précis aux utilisateurs de lecteurs d’écran. Sur mobile, le menu hamburger est bien géré, avec des retours vocaux qui permettent de suivre facilement l’état du menu (ouvert ou fermé). Un choix sûr et flexible pour un site accessible.

Neve

Neve se distingue surtout pour sa navigation sur desktop, où les sous-menus sont facilement accessibles au clavier. Bien que quelques petites améliorations soient possibles en version mobile, notamment pour rendre plus explicite l’ouverture des sous-menus, ce thème reste une option solide pour un site respectant les standards d’accessibilité.

Ces trois thèmes offrent une belle combinaison entre performance, flexibilité et accessibilité, les rendant idéaux pour ceux qui veulent proposer une expérience utilisateur optimisée pour tous.

Résultats des tests

OceanWP - 3/5

Utilisateurs actifs : 700,000+

OceanWP est un thème polyvalent bien apprécié par les développeurs pour sa flexibilité.

Accessibilité du menu

Desktop : Navigabilité au clavier est bonne avec la tabulation, chaque élément est visible et atteignable. Cependant, le lecteur d’écran ne signale pas quand on entre ou sort du menu, ce qui est une limite.
Mobile : Les sous-menus peuvent être ouverts avec le bouton espace, mais le lecteur d’écran ne donne pas d’indication lorsque l’on entre ou sort du menu, ni sur les liens d’ouverture des sous-menus.

Note : 3/5

OceanWP offre une bonne base en matière d’accessibilité, mais le manque d’information sur les transitions des menus reste une faiblesse notable.

Astra - 4.5/5

Utilisateurs actifs : 1,600,000+

Astra est l’un des thèmes les plus populaires pour sa légèreté et sa personnalisation rapide.

Accessibilité du menu

Desktop : La navigation est fluide, les sous-menus s’ouvrent avec la touche "Entrer" et le lecteur d’écran fournit des informations précises sur la structure du menu.
Mobile : Très bon retour du lecteur d’écran, notamment sur l’état du menu (ouvert/réduit) et les éléments de navigation, mais une légère faiblesse lorsqu’on sort du menu par le bas.

Note : 4.5/5

Un excellent choix pour l’accessibilité, malgré quelques petits ajustements possibles dans la sortie du menu.

Hello Elementor - 3/5

Utilisateurs actifs : 1,000,000+

Hello est souvent utilisé en combinaison avec Elementor pour des sites très personnalisés.

Accessibilité du menu

Desktop et Mobile : Navigation fluide avec tabulation, mais le lecteur d’écran n’indique pas les transitions entre le menu et les autres éléments de la page (corps). De plus, le menu mobile ne change pas, restant en version desktop.

Note : 3/5

Bien que fonctionnel, Hello manque de certaines fonctionnalités d’accessibilité essentielles pour les transitions.

Neve - 4/5

Utilisateurs actifs : 300,000+

Neve est un thème rapide et mobile-first, idéal pour les petits sites ou les blogs.

Accessibilité du menu

Desktop : Les sous-menus s’ouvrent avec "Entrer", et le lecteur d’écran signale bien les boutons d’ouverture. Cependant, il manque des indications claires sur l’entrée ou la sortie du menu.
Mobile : Le lecteur d’écran informe correctement sur l’état du menu et sur les boutons d’ouverture, mais il n’indique pas toujours si un sous-menu est ouvert.

Note : 4/5

Globalement solide, mais des améliorations sur la gestion des sous-menus sont nécessaires.

GeneratePress - 4/5

Utilisateurs actifs : 600,000+

Ce thème est réputé pour sa rapidité et sa simplicité.

Accessibilité du menu

Desktop : Navigation fluide, avec un bon support du lecteur d’écran, même si les transitions ne sont pas toujours signalées.
Mobile : Bonne navigation et informations sur l’état des menus, mais quelques incohérences dans l’ordre des menus.

Note : 4/5

Un thème fiable pour l’accessibilité, malgré quelques petites anomalies.

Sydney - 2/5

Utilisateurs actifs : 100,000+

Sydney est un thème professionnel et flexible, souvent utilisé pour les sites d’entreprises.

Accessibilité du menu

Desktop : Le focus est limité aux icônes de sous-menus, et le lecteur d’écran manque d’informations précises.
Mobile : La navigation est impossible une fois le menu ouvert, un gros problème d’accessibilité.

Note : 2/5

De graves lacunes, surtout en version mobile, rendent ce thème peu recommandé pour une accessibilité optimale.

Blocksy - 4.5/5

Utilisateurs actifs : 100,000+

Blocksy est un thème rapide et moderne, adapté aux sites dynamiques.

Accessibilité du menu

Desktop : Excellent retour du lecteur d’écran, notamment sur l’état des sous-menus, avec des informations précises sur les changements d’état.
Mobile : Bonne gestion du menu, bien que l’ordre des éléments puisse parfois être confus.

Note : 4.5/5

Très bon thème en termes d’accessibilité, même si l’ordre des éléments pourrait être amélioré.

Zakra - 2.5/5

Utilisateurs actifs : 50,000+

Zakra est un thème léger et adaptable.

Accessibilité du menu

Desktop : Le lecteur d’écran décrit les icônes de sous-menus comme des boutons, mais ils ne sont pas cliquables.
Mobile : Les sous-menus ne sont pas atteignables via le clavier, ce qui limite fortement la navigation.

Note : 2.5/5

Bien que la version desktop soit fonctionnelle, les lacunes du menu mobile le pénalisent.

Storefront - 3.5/5

Utilisateurs actifs : 200,000+

Thème officiel de WooCommerce, Storefront est souvent utilisé pour les boutiques en ligne.

Accessibilité du menu

Desktop : Les sous-menus disparaissent lorsque le focus est perdu, mais réapparaissent de manière incohérente.
Mobile : Pas de sous-menus déroulants, mais le lecteur d’écran indique correctement l’état du hamburger.

Note : 3.5/5

Fonctionne bien pour un usage simple, mais quelques comportements inattendus nuisent à l’expérience utilisateur.

Hestia - 2/5

Utilisateurs actifs : 100,000+

Hestia est un thème élégant souvent utilisé pour les startups et les portfolios.

Accessibilité du menu

Desktop et Mobile : Les sous-menus ne sont pas accessibles ni visibles via le clavier, un problème majeur pour l’accessibilité.

Note : 2/5

L’absence de gestion des sous-menus en fait un thème peu recommandé pour des sites devant être totalement accessibles.

Conclusion

Si vous recherchez un thème WordPress permettant une navigation accessible et efficace pour tous vos utilisateurs, Astra et Blocksy se démarquent clairement avec leurs fonctionnalités d’accessibilité bien pensées, tant sur desktop que sur mobile. En revanche, des thèmes comme Sydney et Zakra nécessitent encore des améliorations pour offrir une navigation complète et fluide, en particulier sur mobile.