Error Report

Alternative Text should not be the image filename.

What Is Alternative Text?

Alternative text or alt text is a brief, 100-125 characters long, description of an image. This description is extremely important when students come across an image that has become suddenly unavailable and when students who rely on a text-to-speech or screen reader program to navigate the web access your course content. In the former case, the alt text is visible to any sighted person. In the latter case, the alt text is read aloud or translated to braille.

Why Is This Important?

When an image has a filename for its Alternative text (text that is meant to provide a brief description of the image), students who cannot see the image but can access the alt text will often have difficulty understanding the purpose of the image as filenames are rarely adequate descriptions. For example, if your Clemson tiger paw has the filename orange-2.png, students who cannot see the image but can access the alt text are more likely to think that the image is a color swatch or a fruit.

Cause Of Error

To get this UDOIT result, you have to have uploaded and embedded an image to your course content without editing the alt text. Most often, this is achieved through the Insert Content tabbed panel in the right sidebar, which does not yet provide a place where you can edit the alt text. However, it is also possible to do this from the Embed Image Buttonin the Rich Content Editor toolbar. When an image that has been uploaded to Canvas and embedded in the course content, Canvas automatically puts the filename as your alt text because filenames are better than no alt text at all.

UDOIT can tell that an alt text has a filename because of the .png, .jpg, .gif, etc. that appears at the end of the alt text.

Examples

Incorrect Example

Correct Example

UDOIT logo

In the mobile app, the Hide and Show Code Links are obsolete. We couldn't hide them without removing them from the web browser view.

Hide Code
Show Code

Incorrect Example Code

<p><img src="http://online.ucf.edu/files/2015/04/udoit_logo-300x105.png" alt="logo.png" width="100" height="96" /></p>

Correct Example Code

<p><img src="http://online.ucf.edu/files/2015/04/udoit_logo-300x105.png" alt="UDOIT logo" width="100" height="96" /></p>

Within UDOIT, if you click the U FIX IT! button, you will be provided with a New alt text field where you can enter an up to 100-characters long description. Once your description is written, click the Submit button and UDOIT will apply the changes.

Return to Top of Tabbed Panel

To fix the issue through the Rich Content Editor, start by clicking the View the source of this issue link for this error in the UDOIT report, using the Preview to identify the image that needs new alt text, and then clicking the page title above this error to navigate to the page where the error resides. If you do not use the "View the source..." link in the UDOIT report, you will have to examine the alt text of each image on the page until you find the correct image.

Once on the page where the issue resides, open the page in editing mode, click on the image, click the Embed Image Button in the toolbar, enter the new alt text or edit the existing alt text in the Alt text field, click the Update button, and then save the page. If necessary, you can use www.CharacterCountOnline.com to draft your alt text and make sure it is within UDOIT's 100 character limit.

Return to Top of Tabbed Panel

To fix the issue through the HTML Editor, start by clicking the View the source of this issue link in the UDOIT report, and copying all of the Source text except Line [number]:[space]. Next, click the page title above this error to open the page where the issue resides, open the page in editing mode, and then click the HTML Editor link in the upper right. Afterward, use Ctrl/⌘ + F to open the web browser's Find tool, paste the text you copied into the Find tool, and locate the image. Once found, edit or replace the text between alt=" and " then save the page. If necessary, you can use www.CharacterCountOnline.com to draft your alt text and make sure it is within UDOIT's 100 character limit.

Return to Top of Tabbed Panel

Related Result Pages

Errors
- Alt text shouldn't be more than 100 characters
- Alt text for img elements with source anchors
Suggestions

Alternative Text not found*

Related Standards

Section 508 Quick Reference Guide
Section 508 1194.22(a) A text equivalent for every non-text element shall be provided
WCAG 2.0 A and AA Reference Guide
WCAG 1.1.1: Non-text content
WCAG 1.1.1 H37: Using alt attribute on img elements

Last Updated January 2017.
Clemson Online