Skip to content

How do I handle an image that is intended to convey a scenario or emotion to enhance the experience and keep it accessible?

← Accessibility

Accessible Best Practices for Emotion or Mood-Driven Images


Guidance for GSU Web Administrators

Images on GSU websites often support messages about student success, community, and belonging. When an image carries intentional meaning, it should be accessible to all users, including those who use screen readers or have low vision. The guidelines below highlight the essential practices.

You should start by deciding whether an image is meaningful or decorative. A meaningful image adds something important to the page, such as an emotional moment with students celebrating at Commencement. These images need alt text that communicates the emotion or action that matters. For example, a great alt text for the photo below would be, “Graduates at commencement, celebrating with friends."


Decorative images only add visual style and should use empty alt text (alt="") so screen readers skip them. An example of a decorative image on your page would be a simple campus shot used to add color to your page, or to break up a lot of text. No emotional connection or intention is meant by this image.


Alt text for meaningful images should be short and focused on the purpose of the page. Describe the action or emotional cue, not every detail. For example, in that emotional image example above, “Graduates at commencement, celebrating with friends” is much more useful than “photo of people.” Avoid vague labels like “happy” and do not start with “image of.”

Examples that work:
  • “Students smiling and high-fiving after receiving internship offers” explains both the emotion and the reason for it.
  • “Graduate holding diploma, celebrating with friends” directly supports messages about student achievement.
  • “Advisor listening with a calm, supportive expression” communicates a key emotional tone relevant to student support.
  • "A professor teaching in a classroom around a table" intended to convey classroom into 
Images should not be the only way to communicate an emotional message. Reinforce the intended tone with headings, short text, or quotes so users who cannot see the image still receive the same information.

Try to choose images that are accurate and inclusive. Describe only what you can observe, such as “student laughing with classmates,” rather than guessing internal feelings.

Captions can add helpful context to the meaningful images on your pages. If a caption already communicates the key idea, keep the alt text brief to avoid duplication. For example, a caption about first generation graduates allows the alt text to focus only on the action, such as “First gen graduates cheering.”

Note: Some emotional images can still be decorative, especially if the surrounding text communicates the tone or if the image is used as a background or design element. It's all about context.


Summary


For GSU web admins, the most important steps are to decide whether an image is meaningful or decorative, write short purpose-driven alt text for meaningful images, and reinforce emotional messages with clear text. Try to choose inclusive, accurate imagery. You may use captions when helpful, and mark decorative images with alt="". This keeps GSU webpages accessible while maintaining strong storytelling.


Keywords: website images, emotion, inclusive, emotional, mood driven, emotion driven, best practices, jpg files, png files, image optimization, image dimensions, seo, alt text, file size, image compression, website performance, file naming, screenshot resizing, 508 compliance, marquee images, profile images, wordpress best practices, media library management, decorative, not decorative