Error Report

Image elements should have an "alt" attribute.

What Is An Alt Attribute?

The alt attribute, also known as alternative text or alt text, is a brief, 100-125 characters long, description of an image.

Why Is This Important?

If images do not have alt text, then students who rely on text-to-speech or screen reader programs to view the web will not be informed that the images even exist. Simultaneously, if the images do not have alt text and become disabled, a sighted person will not be able to figure out what the purpose or subject of the image was.

When images have alt text, students can see the text when the image becomes disabled, can hear the text when a screen reader program is used to access the image, and can feel the text when a screen reader program accesses the image and translates the text to a refreshable braille display.

Cause Of Result

Most commonly, this is caused when an image is added with the Insert Content tabbed panel in the right sidebar or when an image is added with the Embed Image Button in the Rich Content Editor and the brief description (100 characters or less) of the image contents is not entered into the Alt text field.

The other way to get this result is to paste or write the HTML code for the image in the HTML Editor and not include alt="[brief description]".

UDOIT finds this issue by looking for the image code that contains alt="".

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" style="width: 100px;" alt="" 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>

False Positives

If an image is purely decorative, meaning that the image is not significant enough that students will mention the image in conversation or use the image as a reference point for finding other information on the page, then leaving the Alt text field blank or creating null alt text (alt="") is a perfectly accessible practice. Examples of such images include borders at the beginning and end of each page.

It is because null alt text can be used in an accessible way that UDOIT ranks this result as a suggestion instead of an error. However, you should treat this result as an error 95% of the time.

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.

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 Buttonin the toolbar, enter a description of the image into the Alt text field, click the Update button, reapply any formatting that may have been overwritten (such as alignment) 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 before adding it to the Alt text field.

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, type an image description 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 before adding it between the quotation marks.

Return to Top of Tabbed Panel

Related Result Pages

Errors

Related Standards

Last Updated January 2017.
Clemson Online