Creating Accessible and Visually Consistent LibGuides

When incorporating images into your guides, always prioritize enhancing the user experience.

Does the image support and clarify the information, or does it distract, hinder, or clutter the content? While images can make a guide more engaging, avoid adding visuals purely for aesthetic purposes. Focus on their relevance and usefulness to your audience.

Upload Images Properly

• Use LibGuides' Image Manager to store and manage images. Avoid linking to off-site images, which can break or slow down page loading.

Maintain Responsive Design

• Remove Fixed Dimensions: Avoid setting image dimensions in pixels, as this can break responsive layouts.
• Use Max-Width for Resizing: If you need to adjust the image's display size, use the css property "max-width" to ensure responsiveness. Using the source editor - add style="max-width: --px;" inside the image tag. Eg <img style="max-width: 500px;" src="..." alt="..." />
• Optimize Image Size: Reduce large or unfavorably sized images before uploading to LibGuides. This minimizes bandwidth usage and improves page load times for users. Ideally you should upload the image in the exact size you want it to appear on your guide.

Source Images Responsibly

Only use images that meet one of the following criteria:

• You own the image: Taken or created by you.
• Free usage rights: Official logos, generated by AI with no usage restrictions.
• Licensed or public domain: From sites offering Creative Commons or public domain images, such as Pixabay or Unsplash.

Alt text ensures that screen readers can describe images to visually impaired users, providing equitable access to your content.

Guidelines for Writing Alt Text

• Be Short and Descriptive: Write Alt text like a tweet—concise, clear, and to the point.
  • Example: Instead of "An image of a red apple on a wooden table," simply write "Red apple on a wooden table."
• Avoid Redundancy: Do not include phrases like “image of” or “photo of,” as screen readers already indicate that the content is an image.
• Skip the Title Field: Adding text to the Title field is unnecessary, as it does not improve accessibility or user experience.