Alternative (Alt) Text - Fixing Alt Text in HTML

Introduction

This is part three of a small series of video/written guides that will walk you through the process of fixing alt text issues. This third part of the series goes through how to identify and enter alt text for images that were inserted into an Ensemble page using HTML in the Ensemble editor. 

Video Guide

Written Guide

**PLEASE NOTE that inserting images using HTML in the Ensemble editor is not recommended by the College of Engineering. This guide is specifically meant to help you fix alt text issues for images that have been previously inserted in this manner. When creating new content in the editor, please insert images using the Image Container Component as a general rule.

Instructions

Before You Start:
If you don't already have the axe Devtools Browser Extension installed, please go look at our axe Devtools installation video guide.

Step 1 - Locate Image in the Ensemble Author (Editor)

This step picks up where the Alternative (Alt) Text - Fixes Part One Guide left off - 

Navigate to your page in the Ensemble Author system, and open the page in the editor. 

Scroll down your page and locate the image that you want to enter alt text for (that you found using the highlight feature of the axe DevTools scan, covered in our Alternative (Alt) Text - Fixes Part One Guide. 

Step 2 - Verify HTML Insertion/Open the Component HTML Editor

To verify that the image in question has been inserted using HTML, click in the area of the image to highlight the Text Component (which is the component that allows for HTML editing) and bring up the Menu Bar; clicking the Edit button (1); expanding the editor by clicking the Fullscreen button (2); and selecting the Source Edit option (3) to bring up the HTML editor.

Once you've selected the Source Edit option, you will be able to see and edit the page's HTML. You will be able to verify that the image was indeed inserted into the HTML using an img tag.

You'll want to look at the HTML to find the img tag. It will look something like this:
<img src="/content/dam/eng_vt_edu/burruss.jpg" width="75%"> (also shown as Figure 1 in the image below). 

You'll notice (in cases that require remediation for missing alt text) that the alt tag with written alternative text is missing from the HTML img tag. 

A correctly structured img tag will look something like this, with the alt tag inserted after the close of the img src:
<img src="/content/dam/eng_vt_edu/burruss.jpg" alt="example alternative text" width="75%">

You can either type in your alt tag and alternative text manually while following the format shown above -OR- you may copy and paste the alt="example alternative text" portion of the HTML, replacing the 'example alternative text' enclosed by the quotation marks with actual descriptive alternative text for the image. Be sure to enter a space in between the closing quotation mark of the img src tag and the beginning of the alt tag.