Editoria11y pour Drupal

Fonctionnalités principales

Le module Drupal connecte la bibliothèque du vérificateur au backend éditorial, et ajoute de nombreux outils côté serveur pour les rapports, la gouvernance et la configuration.

Éditeur Drupal avec des conseils en ligne
Les problèmes sont détectés à la fois au chargement du frontend et en cours de saisie dans CKEditor et Gutenberg.
Infobulle indiquant qu'un lien est simplement nommé « cliquez ici ».
Les infobulles offrent des boutons pour accéder à l'éditeur, ignorer l'alerte (pour l'utilisateur actif) ou la marquer comme OK (pour tous les utilisateurs). Les alertes répétées proposent des actions à l'échelle de la page ou du site.
Interface de création de tests personnalisés montrant des champs pour le titre et le contenu du conseil, ainsi que des sélecteurs et exclusions d'éléments.

Le sous-module CSA ajoute :

  • Un créateur de tests personnalisés
  • Plus de 40 tests développeur
  • Vérification du contraste
  • Robots d'exploration de site
  • Analyse de lisibilité
  • Configurations séparées pour développeurs/éditeurs
Tableau de bord de rapports affichant les problèmes récents et les pages ayant le plus de problèmes.
Un tableau de bord global fournit des rapports filtrables et exportables sur les alertes et les rejets.

Installation et étapes clés de configuration

Le paquet d'installation disponible sur Drupal.org comprend plusieurs modules :

  • Editoria11y : le vérificateur de contenu principal et le tableau de bord.
  • Editoria11y CSA : tests pour développeurs et outils de maintenance du tableau de bord.
  • Editoria11y Export : outils de rapports CSV.

Installez-le comme tout autre module, puis suivez ces étapes clés :

  1. Vérifiez les permissions. Les auteurs de confiance devraient avoir les permissions « Marquer OK », « Marquer comme ignoré » et « Voir le tableau de bord ».
  2. Vérifiez les pages clés pour les alertes répétitives ou inutiles. Marquez-les comme OK dans l'infobulle, ou ajustez la configuration pour ignorer les éléments par sélecteur.
  3. Recherchez les infobulles difficiles à voir — hors écran, tronquées, derrière d'autres éléments, ou sur des éléments masqués. Utilisez les conseils de la section « Corriger le positionnement des infobulles » ci-dessous.
  4. Si le site a déjà du contenu et que vous avez un abonnement CSA, visitez l'onglet « Actualiser » du tableau de bord et lancez une exploration du site pour pré-charger les rapports. C'est facultatif, mais les pages anciennes n'apparaîtront pas dans les rapports tant qu'elles n'auront pas été explorées ou visitées par un utilisateur connecté.

Regardez une vidéo de présentation des options de configuration (v2.4).

Masquer les alertes inutiles

Une bonne configuration supprime les alertes inutiles, afin que les auteurs de contenu puissent se concentrer sur les problèmes qu'ils doivent corriger.

Bien que vous puissiez désactiver complètement des tests, il est généralement préférable de masquer les alertes sur des éléments ou des pages spécifiques.

Lors de chaque exécution de test, Editoria11y rassemble un ensemble d'éléments à partir du paramètre « Vérifier le contenu dans ces conteneurs », puis les filtre plusieurs fois. Voici à quoi ressemble une exécution de test :

  1. Annuler la vérification si la configuration empêche la vérification sur cette page ou pour cet utilisateur.
  2. Rassembler les éléments dans les régions de page spécifiées, par ex. :
    body > *:not('.ed11y-element')
    Pour les utilisateurs d'Editoria11y CSA, ce sont les régions de l'onglet Tests développeur.
  3. Exclure les éléments correspondant aux sélecteurs d'exclusion, par ex. :
    .widgets, .utility-menu
    Pour les utilisateurs d'Editoria11y CSA, ce sont les sélecteurs de l'onglet Tests développeur.
  4. Exécuter les tests et synchroniser les résultats avec le tableau de bord.
  5. Si la configuration séparée est active et que l'utilisateur est un éditeur de contenu, filtrer les résultats développeur :
    • Exclure les résultats des tests définis comme « Développeur uniquement ».
    • Exclure les résultats sur les éléments situés en dehors des régions de contenu spécifiées, par ex. :
      main, footer
    • Exclure les résultats sur les éléments correspondant aux sélecteurs d'exclusion de contenu.
    Notez qu'il n'y a pas de deuxième phase de « rassemblement ». Les régions de page développeur doivent inclure les régions de contenu.
  6. Ouvrir le panneau et afficher les alertes si la configuration correspond à un paramètre d'ouverture automatique.

Rejeter les alertes

Les tests peuvent être configurés dans la bibliothèque comme des erreurs ou des avertissements (« vérifications manuelles »). Les avertissements peuvent être rejetés. Il existe deux types de rejets disponibles dans le pied de chaque infobulle :

  • « Ignorer » est enregistré comme préférence utilisateur : l'alerte est désormais masquée pour l'utilisateur actuel, mais uniquement pour lui.
  • « Marquer OK » masque l'alerte pour tous les utilisateurs.

La possibilité pour un utilisateur de rejeter une alerte est contrôlée au niveau du rôle dans les permissions utilisateur de Drupal. La plupart des auteurs devraient pouvoir rejeter les alertes. Il est inutile de confier une vérification manuelle à quelqu'un qui ne peut pas marquer l'élément comme vérifié.

Ignorer des éléments

Ces deux paramètres de configuration sont les plus importants !

Configurez le premier pour inclure toutes les parties du contenu de la page que les auteurs peuvent modifier. Par ex., s'ils peuvent modifier la zone de contenu main, .sidebar et .footer-column-two, définissez ces sélecteurs comme zone de vérification du contenu.

Utilisez le second pour « exclure » des sous-sections. Par ex., si main contient divers widgets et contenus intégrés que seuls les développeurs peuvent modifier, listez-les : .widget-1, .social-embed ;

Si vous utilisez la configuration séparée, vous verrez une paire de paramètres similaire dans l'onglet Tests développeur :

Zone de vérification développeur

Le point essentiel à retenir concernant les zones de vérification développeur est qu'elles ne sont pas indépendantes des zones de vérification de contenu. Dans une configuration séparée, les zones développeur sont vérifiées, puis ces résultats sont filtrés pour correspondre aux zones de contenu. Toute zone exclue pour les développeurs sera également exclue pour les éditeurs de contenu. N'excluez pas les zones de contenu modifiables !

Certains tests permettent une configuration plus précise, pour masquer uniquement certaines alertes sur les éléments concernés. Cherchez-les sous :

  • Tests de contenu : Liens à vérifier
  • Tests de contenu : Contenus intégrés à vérifier
  • Tests de contenu : Détection du contenu dynamique et shadow
  • Tests développeur : Contraste

Masquer pour des pages ou utilisateurs spécifiques

La façon la plus simple de procéder est de transmettre des classes CSS ou des identifiants à ces options :

Le premier empêchera l'exécution des vérifications, et la barre d'outils ne s'affichera pas.

Le second démarrera le vérificateur en mode réduit, et marquera automatiquement (pour l'utilisateur actuel) tous les problèmes comme « Ignorés », même s'il s'agit d'erreurs. Cela permet aux tests de s'exécuter et de mettre à jour le tableau de bord sans déranger l'utilisateur.

Si vous souhaitez utiliser ces options pour contrôler quels utilisateurs voient le vérificateur, vous devrez peut-être ajuster votre thème pour générer une classe, par ex. .user-247

Gérer les résultats à l'échelle du site

Exploration et mise à jour des résultats

Editoria11y est un outil de surveillance en temps réel, pas un robot d'exploration. Ses rapports à l'échelle du site se mettent à jour lorsque les auteurs consultent les pages, donc une exploration régulière n'est généralement pas nécessaire. Le module CSA inclut un robot d'exploration, mais il ne devrait être nécessaire que dans ces trois situations :

  1. Lors de la première installation d'Editoria11y sur un site existant avec de nombreuses pages. Les pages doivent être visitées avant d'apparaître sur le tableau de bord, donc une exploration initiale rapide fait gagner du temps.
  2. Des mises à jour majeures de thèmes ou de modules peuvent corriger (ou causer) des problèmes sur de nombreuses pages qui n'apparaîtront pas tant qu'elles ne seront pas visitées ou explorées.
  3. Les actions en masse dans l'interface d'administration, comme la suppression de pages ou de redirections, ont tendance à laisser des résultats de pages qui n'existent plus ou qui ont été déplacées. Dans ces cas, il est utile d'utiliser les actions de maintenance de l'onglet « Actualiser » pour rafraîchir les URL des pages, et détecter et supprimer les pages supprimées.

Aucune donnée ne quitte votre site lors d'une exploration. Le robot d'exploration CSA n'est pas un outil cloud ; il utilise votre navigateur pour charger et vérifier les pages de votre propre site. L'inconvénient de cette approche est que les navigateurs mettent en pause les onglets en arrière-plan. Vous devrez garder votre ordinateur allumé et éveillé pendant l'exploration. Prévoyez d'ouvrir une nouvelle fenêtre pour le robot d'exploration et de la laisser comme onglet de premier plan de cette fenêtre pendant qu'il travaille. Vous pouvez continuer à travailler dans une autre fenêtre. Le robot d'exploration mettra à jour son estimation après chaque lot de pages.

Consultation des rapports

  • Récent permet d'explorer par alertes individuelles. Cela vous permet de filtrer pour trouver toutes les instances du même type d'alerte, de voir quelles alertes apparaissent fréquemment dans le contenu récent, ou quels auteurs ont encore l'habitude de faire la même erreur.
  • Pages affiche le nombre d'alertes par page, regroupées par page. Cela vous permet de trouver les pages ayant le plus de problèmes, et de filtrer par attributs de page comme le type de contenu et le statut de publication.
  • Alertes affiche les problèmes par type.
  • Rejets permet de surveiller si les auteurs rejettent correctement les alertes, et dispose de boutons « Réinitialiser » pour restaurer les alertes rejetées.
  • Export contient des versions des rapports Pages, Alertes et Rejets qui peuvent être filtrées pour préparer des téléchargements CSV. Fourni par le sous-module CSV Export
  • Actualiser contient des outils de maintenance du tableau de bord pour supprimer les alertes des pages supprimées, supprimer les alertes des pseudo-pages paramétrées comme /search?query=example, mettre à jour les titres et URL des pages stockés, et lancer une exploration manuelle. Fourni par le sous-module CSA

Corriger les infobulles masquées ou hors écran

Le module fournit des champs pour deux options de configuration de la bibliothèque permettant de modifier le positionnement des infobulles :

Certains thèmes ont des colonnes ou des widgets qui masquent le débordement horizontal ou vertical. La bibliothèque détecte automatiquement lorsqu'une infobulle tomberait en dehors de la partie visible de la page. Indiquer à la bibliothèque que certains conteneurs masquent le débordement signifie qu'elle tentera également de positionner les infobulles pour les éléments de ces conteneurs à l'intérieur de leurs bordures.

Certains thèmes ont des widgets qui basculent la visibilité du contenu, comme les accordéons, les onglets et les diaporamas. Les infobulles à l'intérieur de ces éléments seront également masquées. Fournir une liste de sélecteurs pour ces widgets signifie qu'Editoria11y marquera une brève pause lorsqu'un utilisateur essaiera d'accéder à ces infobulles à l'aide d'un bouton suivant ou précédent. Les thèmes et modules Drupal peuvent alors suivre les instructions de la section de la bibliothèque sur la gestion des infobulles sur le contenu masqué pour révéler le contenu masqué.

Écrire votre propre configuration

En PHP : le module Drupal fournit un hook_editoria11y_alter_config pour modifier le contenu de drupalSettings.editoria11y dans un module ou un thème. Par exemple :

Modifier drupalSettings n'est utile que si le JavaScript du module est déjà configuré pour transmettre cette valeur à la bibliothèque. Pour ajouter des paramètres supplémentaires, vous devez modifier directement l'objet JavaScript options. Le module vérifie une variable JavaScript globale editoria11yOptionsOverride. Si celle-ci est définie, il transmettra l'objet options à une fonction editoria11yOptions que vous avez fournie dans votre module ou thème. Vous pouvez alors définir n'importe quel paramètre de la bibliothèque.

Écrire vos propres tests

D'abord, dans la configuration du module, ajoutez 1 aux options « Tests personnalisés » pour qu'il sache surveiller les tests.

Ensuite, créez une bibliothèque JavaScript Drupal avec vos tests dans votre thème ou module, en utilisant le guide de la bibliothèque pour écrire des tests personnalisés.

Voici un exemple fonctionnel de Princeton, d'un test personnalisé pour signaler les Safe Links. Notez qu'il accède à la classe Editoria11y via Drupal.Ed11y.

Obtenir de l'aide

Consultez la page contacts pour les options d'assistance communautaire. @itmaybejj est généralement en ligne sur Drupal Slack lorsque le soleil est levé dans l'hémisphère occidental.

La plupart des niveaux de contribution CSA incluent un point annuel, qui peut comporter une assistance directe pour l'installation et la configuration.