Configuration de l’éditeur de texte enrichi pour produire des sites accessibles

AEM prend en charge à la fois :

• Les fonctions d’accessibilité standard, notamment le texte de remplacement pour les images
• Des fonctionnalités supplémentaires qui sont accessibles lors de la création de contenu avec les composants qui utilisent l’éditeur de texte enrichi (RTE)

Les auteurs de contenu peuvent utiliser les fonctions de l’éditeur de texte enrichi afin de fournir des informations d’accessibilité lors de l’ajout de contenu à une page. Cela peut impliquer l’ajout d’informations structurelles via des en-têtes et des éléments de paragraphe.

Vous pouvez configurer et personnaliser ces fonctions en configurant des modules externes RTE pour le composant. Par exemple, le module externe paraformat vous permet d’ajouter des éléments sémantiques de niveau bloc supplémentaires, y compris d’étendre le nombre de niveaux d’en-tête pris en charge au-delà des H1 de base, H2 et H3 fournis par défaut.

L’éditeur de texte enrichi est disponible dans divers composants de l’interface utilisateur tactile et classique. Cependant, le composant principal pour l’utilisation de l’éditeur de texte enrichi est le composant Texte.

Le composant Texte d’AEM est disponible pour les interfaces utilisateur tactile et classique. Les illustrations suivantes présentent l’éditeur de texte enrichi avec une plage de modules externes activés, y compris paraformat :

• Composant Texte dans l’interface utilisateur tactile :

  

• Composant Text dans l’IU classique :

  

Configuration des fonctionnalités de module externe

Les instructions complètes sur la configuration de l’éditeur de texte enrichi sont disponibles sur la page Configuration de l’éditeur de texte enrichi. Ceci couvre tous les problèmes, y compris les étapes principales :

• Modules externes et leurs fonctionnalités
• Emplacements de configuration
• Activation d’un module externe et configuration de la propriété features
• Configuration d’autres fonctionnalités de l’éditeur de texte enrichi

En configurant un module externe dans la sous-branche rtePlugins appropriée de CRXDE Lite (voir l’image suivante), vous pouvez activer toutes les fonctionnalités de ce module ou certaines fonctionnalités spécifiques.

Exemple : spécification des formats de paragraphes disponibles dans le champ de sélection de l’éditeur de texte enrichi

De nouveaux formats de bloc sémantique peuvent être rendus disponibles pour la sélection comme suit :

1. Selon votre éditeur de texte enrichi, déterminez l’emplacement de configuration et accédez-y.

2. Activez le champ de sélection Paragraphe. En activant le module externe.

3. Spécifiez les formats qui doivent être disponibles dans le champ de sélection Paragraphes.

4. Les formats de paragraphe sont ensuite à la disposition de l’auteur du contenu des champs de sélection dans l’éditeur de texte enrichi. Ils sont accessibles :

   • À l’aide du paragraphe (icône pilcrow) dans l’interface utilisateur tactile :

   

   • Utilisation du champ Format (sélecteur déroulant) dans l’IU classique.

Avec les éléments structurels disponibles dans l’éditeur de texte enrichi via les options de format de paragraphe, AEM constitue une bonne base pour le développement de contenu accessible. Les auteurs de contenu ne peuvent pas utiliser l’éditeur de texte enrichi pour formater la taille de la police ou les couleurs ou d’autres attributs associés, empêchant la création de formatage en ligne. À la place, ils doivent sélectionner les éléments structurels appropriés comme les en-têtes et utiliser des styles globaux choisis via l’option Styles. Ceci garantit une mise en forme nette, de meilleures options pour les utilisateurs qui naviguent avec leurs propres feuilles de style et un contenu correctement structuré.

Utilisation de l’option Modification de la source

Dans certains cas, les auteurs de contenu constateront qu’il est nécessaire d’examiner et d’ajuster le code source HTML créé à l’aide de l’éditeur de texte enrichi. Par exemple, un élément de contenu créé dans l’éditeur de texte enrichi peut nécessiter une mise en forme supplémentaire pour être conforme à la norme WCAG 2.0. Ceci peut s’effectuer avec l’option Modification de la source de l’éditeur de texte enrichi. Vous pouvez spécifier la fonction sourceedit dans le module misctools .

Ajout de la prise en charge des éléments et attributs HTML supplémentaires

Pour étendre davantage les fonctions d’accessibilité d’AEM, vous pouvez étendre les composants existants (par exemple, les composants Text et Table) en fonction de l’éditeur de texte enrichi avec des éléments et attributs supplémentaires.

La procédure suivante illustre l’extension du composant Tableau avec un élément Caption qui fournit des informations sur un tableau de données aux utilisateurs de technologies d’assistance :

Exemple - Ajout de la légende à la boîte de dialogue Propriétés du tableau

Dans le constructeur de l’élément TablePropertiesDialog, ajoutez un champ de saisie de texte supplémentaire utilisé pour modifier la légende. Notez que itemId doit être défini sur caption (c’est-à-dire le nom de l’attribut DOM) pour gérer automatiquement son contenu.

Dans le composant Table, vous devez définir ou supprimer explicitement l’attribut vers/depuis l’élément DOM. La valeur est transmise par la boîte de dialogue dans l’objet config. Notez que les attributs DOM doivent être définis/supprimés à l’aide des méthodes CQ.form.rte.Common correspondantes (com est un raccourci de CQ.form.rte.Common) pour éviter les pièges courants des mises en œuvre de navigateur.

Instructions détaillées

1. Démarrez CRXDE Lite. Par exemple : http://localhost:4502/crx/de/

2. Copier :

   /libs/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

   vers:

   /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js

   REMARQUE

   Vous devrez peut-être créer des dossiers intermédiaires si ceux-ci n’existent pas déjà.

3. Copier :

   /libs/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

   vers:

   /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js.

4. Ouvrez le fichier suivant pour le modifier (ouvrez-le en double-cliquant dessus) :

   /apps/cq/ui/widgets/source/widgets/form/rte/plugins/TablePropertiesDialog.js

5. Dans la méthode constructor, avant la lecture de ligne :

   var dialogRef = this;
   

   Ajoutez le code suivant :

   editItems.push({
       "itemId": "caption",
       "name": "caption",
       "xtype": "textfield",
       "fieldLabel": CQ.I18n.getMessage("Caption"),
       "value": (this.table && this.table.caption ? this.table.caption.textContent : "")
   });
   

6. Ouvrez le fichier suivant :

   /apps/cq/ui/widgets/source/widgets/form/rte/commands/Table.js.

7. Ajoutez le code suivant à la fin de la méthode transferConfigToTable :

   /**
    * Adds Caption Element
   */
   var captionElement;
   if (dom.firstChild && dom.firstChild.tagName.toLowerCase() == "caption")
   {
      captionElement = dom.firstChild;
   }
   if (config.caption)
   {
       var captionTextNode = document.createTextNode(config.caption)
       if (captionElement)
       {
          dom.replaceNode(captionElement.firstChild,captionTextNode);
       } else
       {
           captionElement = document.createElement("caption");
           captionElement.appendChild(captionTextNode);
           if (dom.childNodes.length>0)
           {
              dom.insertBefore(captionElement, dom.firstChild);
           } else
           {
              dom.appendChild(captionElement);
           }
       }
   } else if (captionElement)
   {
     dom.removeChild(captionElement);
   }
   

8. Enregistrez vos modifications à l’aide de Enregistrer tout