Configuration de l’éditeur de texte enrichi pour créer des pages web et des sites accessibles configure-rte-for-accessibility

Adobe Experience Manager prend en charge de nombreuses fonctions d’accessibilité standard conformément à diverses normes d’accessibilité. En outre, l’équipe de développement peut personnaliser ou étendre des fonctionnalités permettant 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, l’équipe de développement et les auteurs de contenu peuvent utiliser les fonctionnalités de l’éditeur de texte enrichi pour fournir des informations relatives à l’accessibilité. Par exemple, ajoutez des informations structurelles par le biais d’en-têtes et d’éléments de paragraphe.

Pour configurer et personnaliser ces fonctionnalités, configurez les modules externes d’éditeur de texte enrichi 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 divers composants pour l’interface utilisateur tactile et l’interface utilisateur classique. Cependant, le premier composant à utiliser pour l’éditeur de texte enrichi est le composant Texte qui est disponible pour les deux interfaces. Les illustrations suivantes présentent l’éditeur de texte enrichi avec une plage de modules externes activés, y compris paraformat :

Image : composant Texte de l’interface utilisateur tactile

Image : composant Texte de l’interface utilisateur classique

Pour connaître les différences entre les fonctionnalités de l’éditeur de texte enrichi disponibles dans les différentes interfaces, consultez les Modules externes et leurs fonctionnalités.

Configuration des fonctionnalités de module externe configure-the-plugin-features

Pour obtenir des instructions complètes sur la configuration de l’éditeur de texte enrichi, consultez la page Configuration de l’éditeur de texte enrichi. Celle-ci couvre tous les problèmes, y compris les principales étapes :

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.

Exemple : spécification des formats de paragraphes disponibles dans le champ de sélection de l’éditeur de texte enrichi example-specifying-paragraph-formats-available-in-rte-selection-field

De nouveaux formats block sémantiques peuvent être disponibles pour la sélection à l’aide des méthodes suivantes :

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, ce qui empêche toute 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. Cela garantit un balisage propre, de plus grandes options pour les utilisateurs et les utilisatrices qui naviguent avec leurs propres feuilles de style et du contenu correctement structuré.

Utilisation de la fonction de modification de la source use-of-the-source-edit-feature

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.

Ajout de la prise en charge d’éléments et d’attributs HTML supplémentaires add-support-for-more-html-elements-and-attributes

Pour étendre davantage les fonctions d’accessibilité d’AEM, vous pouvez étendre les composants existants (par exemple, les composants Texte et Tableau) 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 Tableau avec un élément Légende 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 example-adding-the-caption-to-the-table-properties-dialog

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 Tableau, vous devez définir ou supprimer explicitement l’attribut vers ou 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 ou 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.

Exemple : créer un HTML accessible lors de l’utilisation de la mise en évidence dans le texte create-accessible-html-for-text

L’éditeur de texte enrichi peut utiliser les balises strong et em à la place de b et i. Ajoutez le nœud suivant en tant que frère pour les nœuds 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 step-by-step-instructions