Adding alt text to an image is crucial for accessibility, as it provides a text-based description of the image's content. This enables screen readers to convey the information to visually impaired users and improves SEO, as search engines use alt text to understand the context of images. Additionally, alt text serves as a fallback when images fail to load, ensuring that users still gain insight into the content or purpose of the image. Alt text enhances usability, inclusivity, and discoverability of web content.

As usual, navigate to your site and log in, either using **site credentials** or via your **PennKey**.

Select **Asset Repository** to access the section for uploading images in the backend. Follow the standard image upload process outlined below.

After selecting an image from your local computer or media source, it will upload and appear as a recent thumbnail in the Asset Repository, with a blue loading bar displayed across it. Once the upload is complete, click on the thumbnail to add alt text.

To ensure the image is fully uploaded, you can wait for the image to fully load in the backend view before clicking on it.

Alert! \
\
Ignore the following message that you may see in the **Alternative Text** section: [[Leave empty if the image is purely decorative.]]\
\
We strongly advise **always adding** **Alternative Text** for all images.

In the image view, locate the **Alternative Text** field and enter a concise, descriptive alt text that accurately represents the image.

Click the **Title** field and add an appropriate title for the image.

You may optionally also add a **Description**.

Since the system auto-saves changes, there is no "Save" button. Once you finish editing the fields, you can simply close the dialog.

After your changes, you can click on the image to verify your changes.

You should be able to notice your changes.

- Is alt text the same as the image title or caption?

  - No. **Alt Text** describes the image's purpose for accessibility and SEO. It is not visible on the page unless the image doesn’t load. **Title** is optional text that provides additional information about the image and may appear as a tooltip when hovering over the image. **Caption** is visible text displayed under the image, providing context for all users.

  - It is in your best interest as an editor to appropriately fill out all the fields, and at least, the alt text, for compliance with University’s accessibility policy guidelines.

- How long should alt text be?

  - At most 1 - 2 sentences, and less than 100 characters.

- Do keywords matter in alt texts?

  - Not really, unless the keywords naturally describe the image accurately. Avoid keyword stuffing, as it can harm your SEO and create a poor user experience.

- What if my image is a collage or group image?

  - Instead of describing every element, provide an overview:

    *"A collage of photos showcasing students studying, attending lectures, and socializing on campus."*

- What if my image is a chart / graph?

  - Provide a summary of the key information the image conveys:\
    *"Bar graph showing sales growth from 2020 to 2023."*

- Do logos need alt text?

  - Yes, logos should have alt text describing the brand.

  - For example:

    - *"Company XYZ logo."*

    - If the logo links to the homepage, you might use:

      *"Go to Company XYZ homepage."*

- Can a singular alt text be reused for multiple images?

  - It’s best to use unique alt text tailored to each image, as this provides the most accurate information for users and search engines. However, for identical images (e.g., reused icons), the same alt text is fine.

Uploading Images with Proper Alt Text for Accessibility and SEO

Brief Explanation

Adding Alt Text To An Image

Verifying Your Changes

FAQ(s)