Improving Alt Text for Images within TinyMCE in Optimizley CMS

Introduction:

Content editors often face a tricky challenge when dealing with images within TinyMCE in Optimizley CMS. In this post, we'll explore the default options, the hurdles, and a straightforward solution to make our content more inclusive for everyone.

The Challenge:

Content editors often find themselves at a crossroads when integrating images into TinyMCE. Default options include the convenient drag-and-drop of media assets or the selection of images through specific TinyMCE controls. However, a notable issue surfaces when Optimizley CMS defaults to placing an empty alt tag or, in the case of previous version, utilizes the image name (derived from the file name at upload time) as the alternative text.

The Markup Dilemma:

The resulting markup, exemplified by

<img src="/globalassets/someimagefile.png" alt="" /> 
or
<img src="/globalassets/someimagefile.png" alt="someimagefile.png" />

., falls short in aiding accessible users. This empty or file name-based alt text does little to convey meaningful information to those relying on accessibility features.

The Solution

At render time, we can intercept XhtmlString and modify what is rendered.

Step 1: Extend ImageFile.cs with a new  property AltText

Step 2: Create a XhtmlString.cshtml Display Template

To take control of the rendering process for XhtmlString properties and ensure you set it up properly in your solution.

XhtmlString.cshtml

@using EPiServer.Core
@model XhtmlString

@Html.Raw(Html.XhtmlString(Model.AdjustAltText()))      

Step 3: Develop the Extension Method - AdjustAltText()

Create an extension method  AdjustAltText() to instruct Optimizely to render the content for modification. Optimizely utilizes its mechanisms to personalize and render blocks within XhtmlString fields. After obtaining the HTML result, apply the necessary modifications using HtmlAgilityPack.

After deploying this change-up, any time an XhtmlString is rendered, we are now intercepting it and adjusting its alternate text accordingly.

Troubleshooting: In the unlikely event of the AdjustAltText() extension method not triggering, add the UIHintAttribute [UIHint("XhtmlString")] to the XhtmlString datatype property.

    [Display(
        GroupName = SystemTabNames.Content,
        Order = 310)]
    [CultureSpecific]
    [UIHint("XhtmlString")]
    public virtual XhtmlString MainBody { get; set; }            

*Drawing Inspiration from Dylan McCurry's Episerver and Alternate Text for Images in the TinyMCE Rich Text Editor