Une cliente qui gère seule le contenu de son site de menuiserie sur mesure nous a contactés parce qu’elle n’arrivait plus à réorganiser les blocs d’une page de présentation de ses réalisations. Elle utilise un agrandisseur d’écran et navigue essentiellement au clavier, car le pointage fin à la souris lui demande un effort important. Sa description du problème était simple : « je ne trouve pas comment déplacer un bloc sans le glisser, et je n’arrive pas à viser avec la souris ».
Ce qui a suivi n’a pas été une correction de code, mais une enquête sur les fonctionnalités déjà présentes dans Gutenberg, mal découvertes faute d’être visibles. Ce retour d’expérience détaille ce qu’on a trouvé, ce qu’on a montré à la cliente, et les deux petits ajustements de thème qui ont fini de résoudre le problème. Le critère WCAG général sur le glisser-déposer a été traité dans un article séparé ; celui-ci reste concret et centré sur ce cas précis.
Diagnostic : la fonctionnalité existait, mais restait invisible
En testant le parcours de la cliente, la barre d’outils flottante qui apparaît au survol ou à la sélection d’un bloc affiche bien des poignées « monter » et « descendre » (les icônes en forme de flèches verticales), mais elles ne sont accessibles au clavier qu’une fois le focus placé précisément sur la barre d’outils du bloc, ce qui suppose de savoir qu’elle existe et comment y accéder — une information que rien dans l’interface ne rend évidente pour une personne qui découvre l’éditeur.
Ce que Gutenberg propose réellement au clavier
Une fois un bloc sélectionné (avec Échap depuis le mode d’édition de texte, puis Entrée pour resélectionner le bloc plutôt que le texte à l’intérieur), deux raccourcis permettent de le déplacer sans toucher à la souris :
Maj + Alt + Tdéplace le bloc sélectionné vers le haut.Maj + Alt + Ydéplace le bloc sélectionné vers le bas.
Ces raccourcis fonctionnent bien, mais deux conditions doivent être réunies pour qu’ils soient utilisables : le bloc doit être sélectionné en tant que bloc (et non en mode d’édition de son contenu texte), et la personne doit connaître leur existence, ce qui n’est indiqué nulle part de façon visible dans l’interface standard de l’éditeur.
Un détour utile : le menu « Options du bloc »
En complément des raccourcis, le menu à trois points de la barre d’outils du bloc (accessible au clavier via Tab une fois le bloc sélectionné) propose des entrées « Déplacer vers le haut » et « Déplacer vers le bas », activables sans connaître aucun raccourci. C’est ce menu qu’on a finalement retenu comme méthode principale à montrer à la cliente, car il ne demande pas de mémoriser une combinaison de touches.
Ce qu’on a corrigé côté thème
L’enquête a aussi révélé un problème réel dans le thème personnalisé du site : l’indicateur visuel de focus sur la barre d’outils du bloc était quasiment invisible, noyé dans un gris très proche du fond de l’éditeur. Avec un agrandisseur d’écran, ce contraste faible rendait très difficile de repérer où se trouvait le focus dans la barre d’outils. La correction a consisté à renforcer ce contraste dans les styles d’administration du thème :
.block-editor-block-toolbar button:focus-visible {
outline: 3px solid #1e3a8a;
outline-offset: 2px;
}Ce qu’on a montré à la cliente
La correction de code n’aurait résolu qu’une partie du problème. La séance qui a suivi a consisté à montrer, pas à pas, la séquence complète : sélectionner le bloc avec Échap puis Entrée, ouvrir le menu à trois points avec Tab, choisir « Déplacer vers le haut » ou « vers le bas ». Après quelques essais, la cliente a adopté cette méthode sans difficulté, et nous a signalé, plusieurs semaines après, qu’elle l’utilisait couramment.
Ce cas nous a rappelé une leçon simple : une fonctionnalité accessible qui reste invisible n’est, en pratique, pas accessible du tout. Corriger le contraste du focus était nécessaire, mais insuffisant sans la démonstration qui a suivi.
En résumé
Le réordonnancement de blocs Gutenberg dispose déjà, nativement, de moyens clavier pour se passer du glisser-déposer — raccourcis dédiés et menu d’options du bloc. Le vrai obstacle, dans ce cas, n’était pas une lacune de l’éditeur mais un déficit de visibilité et un contraste de focus insuffisant dans le thème. La correction technique et l’accompagnement de l’utilisatrice se sont révélés également nécessaires pour que la fonctionnalité devienne réellement utilisable au quotidien.
