Configurer RTE pour créer des pages Web et des sites accessibles

Adobe Experience Manager prend en charge de nombreuses fonctions d'accessibilité standard, conformément à diverses normes d'accessibilité. En outre, les développeurs peuvent personnaliser ou étendre les fonctionnalités afin de créer du contenu accessible à l’aide de composants Experience Manager qui utilisent l’éditeur de texte enrichi (RTE).

Lors de la conception de pages Web et de l’ajout de contenu aux pages, les développeurs et les auteurs de contenu peuvent utiliser les fonctionnalités du RTE pour fournir des informations relatives à l’accessibilité. Par exemple, ajoutez des informations structurelles au moyen d’en-têtes et d’éléments de paragraphe.

Pour configurer et personnaliser ces fonctionnalités, configurez les 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 l’extension du nombre de niveaux d’en-tête pris en charge au-delà des niveaux de base H1, H2 et H3 fournis par défaut.

Le RTE est disponible dans divers composants pour l’interface utilisateur tactile et l’interface utilisateur classique. Cependant, le composant Principal à utiliser le RTE est le composant Texte disponible pour les deux interfaces. Les images suivantes montrent le RTE avec une gamme de plug-ins activés, y compris paraformat :

Composant de texte (RTE) en mode plein écran dans l’interface utilisateur tactile.

Figure : Composant Texte de l’interface utilisateur tactile.

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

Figure : Composant Texte de l’interface utilisateur de Classic.

Pour connaître les différences entre les fonctionnalités RTE disponibles dans les différentes interfaces, voir Plugins et leurs fonctionnalités.

Configuration des fonctionnalités de module externe

Pour obtenir des instructions complètes sur la configuration du RTE, voir configuration de la page Editeur 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 du CRXDE Lite, vous pouvez activer toutes les fonctionnalités ou certaines fonctionnalités de ce module externe.

CRXDE Lite présentant un exemple de rtePlugin.

Exemple : spécifiez les formats de paragraphe disponibles dans le champ de sélection RTE

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 :

    • Utilisation de l’icône de sélection de paragraphe dans l’interface utilisateur tactile.
    • Utilisation du champ Format (sélecteur contextuel) dans l’interface utilisateur 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 la fonction de 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 .

ATTENTION

Utilisez la fonction sourceedit avec prudence. Les fautes de frappe et/ou les fonctions non prises en charge peuvent entraîner d’autres problèmes.

Ajouter la prise en charge d'un plus grand nombre d'éléments et d'attributs HTML

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 comment étendre le composant Table avec un élément Caption qui fournit des informations sur un tableau de données aux utilisateurs de technologies d'assistance :

Exemple : ajoutez 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 Table, définissez explicitement ou supprimez l'attribut de/vers 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 ne convient qu’à l’interface utilisateur de Classic.

Exemple : créez du code HTML accessible lors de l’utilisation de l’accent dans le texte

RTE peut utiliser les balises strong et em à la place de b et i. Ajoutez le noeud suivant en tant que frère aux noeuds uiSettings et rtePlugins dans la boîte de dialogue.

<htmlRules jcr:primaryType="nt:unstructured">
    <docType jcr:primaryType="nt:unstructured">
        <typeConfig jcr:primaryType="nt:unstructured"
                useSemanticMarkup="{Boolean}true">
            <semanticMarkupMap
                    b="strong"
                    i="em"/>
        </typeConfig>
    </docType>
</htmlRules>

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….

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. Vous pouvez utiliser n’importe quel widget ExtJS qui fournit la valeur de la légende par le biais de sa méthode getValue().

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

  • 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).

Sur cette page

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now