Skip to Content

Digital Accessibility

Simple List Alt Text

Images within simple list snippets often function as part of a link. Consider your alt text based on what the image conveys and how it will contribute to the accessible link name.

Linking an Entire List Item

When you make the entire list item a link in the simple list snippet, the accessible link name is made up of three parts:

  1. The image's alt text
  2. The title
  3. The description

The link name can become very verbose when you include all three parts at once, but if the image contains important text, then you'll need to include that in the alt text.

Example:

Accessibility Cheat Sheets

Take advantage of our printable, one-page cheat sheets to quickly reference digital accessibility best practices.

Screenshot of an overall course score at 25%.

Blackboard Ally

Learn how Ally can help you create more inclusive learning experiences through Blackboard. 

 

  1. The first list image is marked as decorative. This effectively makes the accessible link name for the first list item, "Accessibility Cheat Sheets. Take advantage of our printable, one-page cheat sheets to quickly reference digital accessibility best practices." It is actually better to mark the icon as a decorative image so that the link name does not become too lengthy and so that the function of the link is clear in the link name.

  2. However, the second list image does require alt text. The screenshot contains text, which is not included in our link text otherwise. The full link name, including the image's alt text, should be: "Screenshot of an overall course score at 25%. Blackboard Ally. Learn how Ally can help you create more inclusive learning experiences through Blackboard. "

Note: If the linked image were the only item in the link—or in other words, if the link didn't include visible text—then the images would need alt text to convey the purpose of the link to somebody using a screen reader.


Adding & Replacing Alt Text

Consider alt text each time you add an image to a simple list and whenever you replace an existing image.

  1. Select your image, then click the Image icon to get to the Insert/Edit options.
    The top display of edit options for an Omni CMS page. A button with a folder icon is followed by four tab options, Preview, Edit, Properties, and Versions. To the right are the Save button, a yellow lightbulb icon indicating checked out content, a green Publish button with a dropdown arrow, an Expand icon, and an ellipsis for more settings. The first row of icons includes Save, cancel, scissors, two stacked papers, a clipboard with an empty paper, a clipboard with filled paper, binoculars, undo and redo errors, spell check, italics, bold, bullets, numbered list, increase and decrease indent, quotation marks, x squared, x with a subscript, left align, center, right align, full width text, link, envelope, and anchor. The second row includes Paragraph and a dropdown, Styles and a dropdown, and an image icon in a garnet rectangle for emphasis followed by a dash, an arrow pointing left, C in a circle, a puzzle piece, two arrows in an oval, Insert component symbol, table with a dropdown, and four arrows pointing outwards to maximize content. The head on the page being edited includes the UofSC monogram, South Carolina, and Digital Accessibility.
  2. Determine if you should mark your image as decorative or not. You can tell screen readers to skip your decorative image if it conveys absolutely no important visual information, if it merely repeats information that is already on the page, or if its alt text would detract from the purpose of the link.

  3. Add your alt text to the "Alternative description" box or select the "Image is decorative" checkbox. Click "Save" to confirm.
    The Insert/Edit Image modal over a Simple List Snippet. Fields for Source, Accessibility, and Alternative Description are emphasized with a garnet rectangle. The modal has two tabs, General and Advanced. General tab is selected and includes several options: Source text field and upload button, an unchecked Image is decorative box, Alternative Description text field with List Thumbnail as placeholder text, Image Title text field, Width and Height text fields with ratio lock icon, Class dropdown (not set), Custom Class text field, and ID text field. Cancel and Save buttons are at the bottom.

 

Challenge the conventional. Create the exceptional. No Limits.

©