Skip to Main Content
UWM Libraries Homepage

Accessibility Checklist

This guide contains major best practices for creating accessible online content. This guide used to be part of the LibGuides Editor training but has become a standalone guide.

Images and Accessibility

Can I add images to my LibGuides?

Yes, but sparingly. Including images in your LibGuide is allowed, but its a decision that comes with some responsibility.

Doing Images Accessibly

Images can make websites look nice and, in some cases, improve accessibility for folks with low vision or cognitive disabilities. However, undescribed images create significant barriers for people navigating webpages using assistive technology.

W3C defines images types and how to resolve them in detail, for the purpose of LibGuides, we can divide images into 4 categories:

What is it? Examples Recommendation
Informative Images that help users understand content that can be described in <125 characters

Telephone icon next to a phone number

 Alt text should describe the essential information being conveyed by the image. 
Functional Images used as navigation links or buttons UWM Libraries Logo in the top left corner of the page that links to the homepage The alt text of a functional image should describe the functionality of the link or button rather than the visual image. (ex: "UWM Libraries homepage," not "UWM Libraries Logo")
Decorative Images that do not add information to the page The LibGuides Carwash header image Leave the alternative text field blank. This assistive tools to skip these images in context, which reduces audio clutter as a user navigates the page. 
Complex Images containing text or visuals too complex to meaningfully summarize in ~125 characters
  • Infographics
  • A screenshot of a filled in Interlibrary Loan form
  • Stop and reflect —Do you really need this content? Is there a different way to communicate this same information (like a video, table, Word document or PowerPoint)? 
  • Transcribe the image or create detailed text-only description using Notepad. Upload the transcription/description as a Document asset below the image.
    • Give the text-only document a meaningful name: "Detailed image description" or "Transcribed Interlibrary Loan Form Example"
    • Set the image to open in a new tab, and include "opens in new tab" in the Document Asset description.

Adding Alt Text in LibGuide

Adding Alternative Text to Images

Alternative ('Alt') text allows those using assistive technology to understand how images are used in context.

To add alternative text to your images, right click on your image to open the 'image properties' window. Write <150 words of alternative text that describes the content and function of the image. 

Tips:

  • Decorative images do not need alt text
  • Your alt text should not include "image of," "screen grab of," or similar phrases. Assistive tools, like screen readers, are designed to interpret the code and architecture of webpages. 

LibGuides image properties dialog box with Alternative text field highlighted