Should Color Be Included In Alt Text? - DEV Community

DEV Community

Follow

A space to discuss and keep up software development and manage your software career

Future

Follow

News and discussion of science and technology such as AI, VR, cryptocurrency, quantum computing, and more.

Open Forem

Follow

A general discussion space for the Forem community. If it doesn't have a home elsewhere, it belongs here

Gamers Forem

Follow

An inclusive community for gaming enthusiasts

Music Forem

Follow

From composing and gigging to gear, hot music takes, and everything in between.

Vibe Coding Forem

Follow

Discussing AI software development, and showing off what we're building.

Popcorn Movies and TV

Follow

Movie and TV enthusiasm, criticism and everything in-between.

DUMB DEV Community

Follow

Memes and software development shitposting

Design Community

Follow

Web design, graphic design and everything in-between

Security Forem

Follow

Your central hub for all things security. From ethical hacking and CTFs to GRC and career development, for beginners and pros alike

Golf Forem

Follow

A community of golfers and golfing enthusiasts

Crypto Forem

Follow

A collaborative community for all things Crypto—from Bitcoin to protocol development and DeFi to NFTs and market analysis.

Forem Core

Follow

Discussing the core forem open source software project — features, bugs, performance, self-hosting.

Parenting

Follow

A place for parents to the share the joys, challenges, and wisdom that come from raising kids. We're here for them and for each other.

Maker Forem

Follow

A community for makers, hobbyists, and professionals to discuss Arduino, Raspberry Pi, 3D printing, and much more.

HMPL.js Forem

Follow

For developers using HMPL.js to build fast, lightweight web apps. A space to share projects, ask questions, and discuss server-driven templating

Dropdown menu Dropdown menu 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 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 [email protected]
• 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 Web 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

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

WebCut: Redefining Web-Based Video Editing for Developers with Open-Source Excellence #webdev #opensource #frontend #videoeditor Common Challenges in Software Testing and How to Overcome Them in 2026 #testing #mobile #ai #webdev I Stopped Chasing Features and Started Designing Systems #webdev #programming #productivity #beginners

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

Log in Create account