Remplacement de la validation du texte alternatif par défaut de TinyMCE dans Optimizely / Blogs / Perficient

Ajout de texte alternatif à vos images dans Optimizely

Lors du développement d’un site à l’aide d’Optimizely, il est important de garder l’accessibilité à l’esprit. Une solution courante que j’ai trouvée utile consiste à étendre la classe ImageData d’EpiServer.Core et à ajouter une propriété pour Alt Text. Cette notion est démontré dans le projet Alloy et a été expliqué plus en détail dans le billet de blog ‘Episerver et texte alternatif pour les images dans l’éditeur de texte enrichi TinyMCE‘ par Dylan McCurry.

Problème avec l’éditeur de texte enrichi de Tiny MCE

Suite au billet de blog mentionné ci-dessus, nous pouvons désormais restituer correctement le texte alternatif de chaque fichier image dans une XhtmlString. Lors du test, vous remarquerez que le CMS avertit toujours l’utilisateur de « saisir un texte alternatif plus significatif ». Pour résoudre ce problème, nous pouvons désactiver la validation du texte alternatif de TinyMCE et écrire un validateur personnalisé qui prendra en compte le texte alternatif ajouté à notre classe Image.

Désactivation de la validation TinyMCE

Avant de créer notre validateur, nous devons d’abord supprimer le comportement de validation par défaut de TinyMCE. Appelez simplement la méthode d’assistance DisableValidation(true) dans le fichier Startup.cs de votre projet ou reportez-vous à Documentation d’Optimizely si vous n’avez pas déjà configuré TinyMCE.

services.Configure<TinyMceConfiguration>(config =>
{
    config.Default()
        ...
        .DisableValidation(true);
});

Ajout d’une validation de texte alternatif personnalisée à XhtmlString

Vous avez le choix entre deux options principales lors de l’ajout d’une validation à une propriété : créer un Attribut ou un Validateur. Dans notre cas, nous souhaiterons utiliser un validateur plutôt qu’un attribut car il appliquera automatiquement notre logique de validation à toutes les instances de XhtmlString sans avoir besoin d’ajouter l’attribut à chaque définition de propriété.

public class XhtmlStringValidator : IValidate<XhtmlString>
    {
        private static readonly IContentLoader contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();

        private static IList<String> GetImagesWithoutAltText(){...}
        public IEnumerable<ValidationError> Validate(XhtmlString html)
        {
            var imageNames = GetImagesWithoutAltText(html);
            if (images.Count > 0)
            {
                return new[]
                          {
                                 new ValidationError
                                 {
                                    ErrorMessage = $"Add alt text to the following images embedded in the Rich Text Editor: {string.Join(", ", images)}.",
                                    Severity = ValidationErrorSeverity.Error,
                                    ValidationType = ValidationErrorType.AttributeMatched
                                 }
                            };
            }
            return Enumerable.Empty<ValidationError>();
        }
    }
}

Créez simplement une nouvelle classe implémentant l’interface IValidator et transmettez-lui le type XhtmlString, aucune autre inscription n’est requise. Au sein de cette classe, il faudra implémenter la fonction Validate qui renverra un IEnumerable d’erreurs de validation et sera appelée avant que le contenu ne soit enregistré. Vous pouvez choisir de déclencher ou non un avertissement (n’empêche pas la publication) ou une erreur (empêche la publication) en définissant la gravité sur ValidationError. Le simple fait de renvoyer un Enumerable vide indiquera que la propriété est valide.

private static IList<String> GetImagesWithoutAltText(XhtmlString xhtmlString)
{
    var images = new List<string>();
    foreach (var urlFragment in xhtmlString.Fragments.Where(x => x is UrlFragment))
    {
        foreach (var guid in urlFragment.ReferencedPermanentLinkIds)
        {
            if(!contentLoader.TryGet(guid, out ImageFile image))
            {
                continue;
            }
            if (string.IsNullOrEmpty(image.AltText))
            {
                images.Add(image.Name);
            }
        }
    }
    return images; 
}

La logique du validateur localise chaque image dans le RTE en parcourant les fragments XhtmlString et en essayant de charger le contenu en tant que ImageFile via les GUID stockés dans RefrencedPermanentLinkIds. Après avoir chargé chaque image, nous vérifions si le texte alternatif est défini, et s’il est nul ou vide, nous stockons le nom de cette image dans une liste utilisée pour créer le message d’erreur affiché dans le CMS.

Résultats

Avec la validation TinyMCE désactivée et notre propre validateur créé, nous devrions maintenant valider avec précision si un auteur de contenu a défini ou non toutes les valeurs de texte alternatif sur les images intégrées dans un champ de texte enrichi.

J’espère que le blog vous a aidé à créer un site plus accessible et une meilleure expérience CMS !