ULEARN Accessibility Guide Input Image May Be Missing an `alt` Attribute

Every form image button which has text within the image (say, a picture of the word 'Search' in a special font), should have the same text within the 'alt' attribute.

[Course Navigation]

User Experience

What You May Experience

A webpage featuring a home icon.

What Students May Experience

Transcript

Why this Matters

Input images, such as those used in buttons or interactive elements in forms, play a critical role in helping students navigate and interact with online content. If these images do not have an alt attribute, screen readers cannot convey their function to students who rely on assistive technologies. This lack of information creates significant barriers for students, making it difficult or impossible for them to complete tasks such as submitting a form or navigating to the next page.

In the example above, a Home icon visually signals to sighted students that they can select it to return to the home screen. However, without alternative text, a screen reader cannot communicate the icon’s purpose, making this navigation option confusing to students who rely on assistive technology.

Hear the difference that alt text for input images can make!

How to Fix It

Great news! The "Input Image May Be Missing an alt Attribute" suggestion will not normally come up if your course content was entirely created in the Canvas RCE. This issue could surface if you're hanging on to old HTML files from before your course was on Canvas or if you copied HTML that happened to have input type="image" somewhere in the code and pasted it into your content.

Fix with an HTML Editor: Because this issue comes up in HTML files, you will need an editor such as TextEdit (Mac) or Notepad (Windows). Open the file in an HTML editor and find the line of code that contains <input type="image". After the section of that code that contains the source of the image (for example, src="home-icon.png" ), add the alt attribute (for example: alt="Return to homepage" ).
- Your code will go from looking something like this: <input type="image" src="home-icon.png" width="30" height="30">
- To something like this: <input type="image" src="home-icon.png" alt="Return to homepage" width="30" height="30">
Fix in UDOIT: This issue cannot be fixed from the UDOIT interface. Whenever you come across an "Input Image May Be Missing an alt Attribute" suggestion, select it, and, below the issue description, find the link that will quickly take you to your content so you can download it and fix it with an HTML editor. After you remediate the content, replace the inaccessible file with the new accessible version. When you return to UDOIT, select Scan Now on the top right-hand side to stop the issue from surfacing.

Last Updated: Oct 23, 2025, 7:25 PM

Created with DesignPLUS

UDOIT Advantage

The Water Cycle imageLinks to an external site. is by USGS VizLab, in collaboration with the USGS Water Resources Mission Area Web Communications Branch, for the USGS Water Science School. The home icon is by Najmun Nahar (Freepik).

User Experience

What You May Experience

What Students May Experience

Audio Transcript

Why this Matters

Input Images with Alternative Text

How to Fix It