Error Report

Return to Main Guide: Managing UDOIT Errors and Suggestions

Alternative Text is more than 100 characters.

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?

If the alt text or brief description of an image is too long, it may not appear correctly in the placeholder for the disabled image. More importantly, if a student uses an older text-to-speech or screen reader program to access the image, the screen reader may only read the first 100-125 characters of an alt text description.

Cause Of Error

To get this UDOIT result, you must have one or more images with alt text that is longer than 100 characters (numbers, letters, and spaces) long. Most commonly, this is caused when an image is added with the Embed Image Button in the Rich Content Editor toolbar and a lengthy description is placed in the Alt text field.

Examples

Incorrect Example

Black letter U followed by green bold DO followed by black unbold IT with Universal Design Online content Inspection Tool written below.

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" style="width: 100px;" alt="Black letter U followed by green bold DO followed by black unbold IT with Universal Design Online content Inspection Tool written below." width="100" height="96" /></p>

Correct Example Code

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

How To Fix It

U Fix It! Button
In Rich Content Editor
In HTML Editor

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.

If your image requires a longer description in addition to the alt text you provide, please read the last paragraph of the HTML directions or seek HTML assistance.

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 (www.CharacterCountOnline.com can help) 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 Buttonin the toolbar, and copy the current contents of the Alt text field. Next, in a new web browser tab or window, go to www.CharacterCountOnline.com, paste the alt text in the provided field, and edit it until the number next to Characters is 100 or less. Afterward, copy the new alt text, return to Canvas, paste the new alt text into the Alt text field, click the Update button, and then save the page.

If your image requires a longer description in addition to the alt text you provide, please read the last paragraph of the HTML directions or seek HTML assistance.

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 " (www.CharacterCountOnline.com can help you stay in the 100 character limit) then save the page.

If you need a lengthier description of the image, consider placing it in an invisible div or consider using aria-describedby to mark where you've already explained the image in the text. (The HTML code, longdesc, doesn't consistently work in Canvas.)

Code for Invisible Div

<div style="width: 0px; height: 0px; overflow-y: auto; margin: 0px; visibility: none; line-height: 0px;">description</div>

Return to Top of Tabbed Panel

Related Result Pages

Errors
- File name as Alternative Text
- 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