Should Color Be Included In Alt Text? - DEV Community

Add reaction Like Unicorn Exploding Head Raised Hands Fire Jump to Comments Save Boost More... Copy link Copy link Copied to Clipboard Share to X Share to LinkedIn Share to Facebook Share to Mastodon Share Post via... Report Abuse

A lot has been written about how to write meaningful alt attribute description for image elements, for those who use screen readers or with a slow connection where images that won't load. There are ground rules for when to use add a description to an alt attribute versus an empty alt text attribute. What I haven't been able to find anywhere is if it is useful to include colors in an alt attribute description. Even the W3 developer guidelines and WebAIM don't mention color in alt attribute descriptions at all. I've been looking at many websites' image alt text, from bloggers to corporations, and Twitter users who take advantage of their relatively new alt text feature. Many times I have seen an image described as something like "Person in a red shirt reading a blue book." or "A huge green field under a bright blue sky."

If anyone has any insight, I would love to learn more to write the best alt attribute descriptions.

Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Submit Preview Dismiss Collapse Expand Joan Concilio Joan Concilio Joan Concilio Follow I make stuff online, but mostly I help other people make stuff better online - more customer-oriented, more brand-appropriate, more accessible and more polished, among other things.

• Location Central Pennsylvania
• Education BS in Mathematics; will graduate Spring 2019 with a master's in homeland security/biodefense
• Work Joan of all trades at Penn State; Technical Penguins
• Joined Feb 19, 2019

• Feb 20 '19 • Edited on Feb 20 • Edited Dropdown menu

• Copy link
• Hide

I use the same decision tree about color as I do age, gender and ethnicity: Is the image important because of one of those factors?

The comment about the red lake is a good example of that. We're showing the image because the lake is red and that's the notable thing we're trying to depict.

On a page for our university about diversity, we describe "A group of students from different cultural and ethnic backgrounds." It isn't relevant that there is one brown-skinned student, one student who appears to be Asian, etc. - not to mention those are "guesses" that could be wrong. The idea is we're illustrating a diverse student body.

Same with ages: An elderly woman looks at a young child matters if the content is about the effects of spending time with grandchildren on the health of older people; if it's just a story about Christmas traditions, the age may not be relevant.

And, because I have to throw it in anywhere I can: If nothing about your image matters, don't use the image. Design for design's sake is annoying whether you use assistive technology or not.

Collapse Expand Karen Fletcher Karen Fletcher Karen Fletcher Follow Designer and developer. Passionate about CSS and accessibility. Borderline life of the party. She/Her

• Location Arkansas
• Work Designer Developer
• Joined Oct 18, 2018

• Feb 20 '19 Dropdown menu

• Copy link
• Hide

Thank you so much for your answer. Treating it like a decision tree really helps, and I really appreciate the examples you give!

Collapse Expand Ryan Smith Ryan Smith Ryan Smith Follow I'm a software engineer working as a full-stack developer using JavaScript, Node.js, and React. I write about my experiences in tech, tutorials, and share helpful hints.

• Location New York
• Work Software Engineer
• Joined Oct 16, 2018

• Jan 25 '19 Dropdown menu

• Copy link
• Hide

I think it depends on the context for whether to include color. If the color is relevant to the content of the page and the image, then I think it makes sense. An example might be something that is unique like "A red lake" but for an ordinary lake saying "A blue lake" may be overdoing it.

I'm also not a viewer of alt tags when I'm browsing, but I would like to hear from someone who is. Do they prefer more descriptive alt tags or more basic? I could see how it might be dull to browse with alt tags being strictly nouns, but if that person has never seen color it may not provide benefit to them.

Collapse Expand Karen Fletcher Karen Fletcher Karen Fletcher Follow Designer and developer. Passionate about CSS and accessibility. Borderline life of the party. She/Her

• Location Arkansas
• Work Designer Developer
• Joined Oct 18, 2018

• Jan 25 '19 Dropdown menu

• Copy link
• Hide

I agree, context is everything with alt text, and I like your idea of using color when the object is unique. I'd like to hear from people who use a screen reader as part of their normal browsing process too. There's also the case where an image won't load due to slow connection, and I'm not sure how useful color would be in that scenario either.

Collapse Expand Fen Slattery Fen Slattery Fen Slattery Follow Accessibility lead and front end engineer. they/them

• Email sublimemarch@protonmail.com
• Location Chicago, IL
• Education Illinois Institute of Technology, Dev Bootcamp
• Work Accessibility Lead, Front End Engineer at Clique Studios
• Joined Aug 23, 2017

• Jan 25 '19 Dropdown menu

• Copy link
• Hide

If color is relevant to understanding the meaning of the image, it should absolutely be included. Irrelevant details make alt text difficult to use and confusing.

Collapse Expand Andrew Bone Andrew Bone Andrew Bone Follow A British web developer, that is passionate about web accessibility.

• Location Britain, Europe
• Pronouns He/Him
• Work Senior Frontend Developer at bloc-digital
• Joined Jun 8, 2017

• Jan 25 '19 Dropdown menu

• Copy link
• Hide

CC: @lkopacz @sublimemarch @alice

Code of Conduct • Report abuse

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.

Hide child comments as well

Confirm

For further actions, you may consider blocking this person and/or reporting abuse

Read next

The Power of Real-Time Analytics: Transforming Modern Apps

Mukhil Padmanabhan - Dec 30 '24

What were your 2024 goals and resolutions?

Mercy - Dec 28 '24

🌐 Top Backend Programming Languages to Learn in 2025 🚀

Hamza Khan - Dec 30 '24

.NET Development and Localization for JustAnswer – case study

Abto Software - Dec 17 '24

Karen Fletcher Follow Designer and developer. Passionate about CSS and accessibility. Borderline life of the party. She/Her

• Location Arkansas
• Work Designer Developer
• Joined Oct 18, 2018

Should I learn Java or C++?Lets discuss! #discuss #programming #java #cpp 150+ FREE APIs Every Developer Needs to Know #webdev #api #developer #beginners What was your win this week? #weeklyretro #discuss

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account