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 readerLinks to an external site. 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
Correct Example
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.
<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>
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.
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.comLinks to an external site. 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.comLinks to an external site., 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.
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.comLinks to an external site. 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-describedbyLinks to an external site. to mark where you've already explained the image in the text. (The HTML code, longdesc, doesn't consistently work in Canvas.)
