Vous consultez actuellement l'aide de la version:

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 niveaux H1, H2 et H3 de base fournis par défaut.

L’éditeur de texte enrichi est disponible dans différents composants à partir de l’interface utilisateur optimisée pour les écrans tactiles et l’IU classique. Cependant, le composant principal pour l’utilisation de l’éditeur de texte enrichi est le composant Texte.

Le composant Texte dans AEM est disponible pour l’IU optimisée pour les écrans tactiles et l’IU classique. Les illustrations suivantes présentent l’éditeur de texte enrichi avec une plage de modules externes activés, y compris paraformat :

  • Composant Text dans l’IU optimisée pour les écrans tactiles :

    Composant Text (éditeur de texte enrichi) en mode plein écran dans l’IU optimisée pour les écrans tactiles.
  • Composant Text dans l’IU classique :

    Boîte de dialogue Modifier (éditeur de texte enrichi) du composant Text dans l’IU classique.

Remarque :

Il existe des différences entre les fonctionnalités de l’éditeur de texte enrichi disponibles dans l’IU classique et celles disponibles dans l’IU optimisée pour les écrans tactiles. Pour plus d’informations, voir

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 :

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

CRXDE Lite présentant un exemple de sous-branche rtePlugin.

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. 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 (pied-de-mouche) dans l’IU optimisée pour les écrans tactiles :
    Icône de paragraphe (pied-de-mouche).
    • 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 du module externe misctools.

Attention :

La fonction sourceedit :

  • Est uniquement disponible dans l’IU classique. Elle n’est pas prise en charge dans l’IU optimisée pour les écrans tactiles.
  • Est à utiliser avec soin. Toute faute de frappe et toute tentative d’ajout de fonctions non prises en charge par l’éditeur de texte enrichi peut poser des problèmes supplémentaires.

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 explique comment étendre le composant Table avec un élément Caption qui fournit des informations sur un tableau de données aux utilisateurs de la technologie 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 (à savoir le nom de l’attribut DOM) pour traiter 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.

Remarque :

Cette procédure convient uniquement à l’IU classique.

Instructions détaillées

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

  2. Copiez :
        /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. Copiez :
        /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 la commande Enregistrer tout.

Remarque :

Le champ de texte brut n’est pas le seul type d’entrée autorisé pour la valeur de l’élément de légende. N’importe quel widget ExtJS fournissant la valeur de la légende via sa méthode getValue() peut être utilisé.

Pour ajouter des fonctionnalités de modification pour d’autres éléments et attributs, assurez-vous à la fois :

  • Que la propriété itemId de chaque champ correspondant est définie sur le nom de l’attribut DOM approprié (TablePropertiesDialog).
  • Que l’attribut est défini et/ou supprimé sur l’élément DOM de manière explicite (Table).

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne