Communities

(DEV) Codidact Meta
(DEV) Codidact Meta
(DEV) Writing
(DEV) Writing
Proposals
Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
« Back to help center

How to write good alt text

What is alt text and why should I care about it?

Alt text, or an image description, is what shows up in place of an image when that image fails to load. It's also what a screen reader will read out when someone is using a screen reader to browse the site, as well as what search engines and feeds display. With that in mind, it's an important part of web accessibility to include good alt text.

How do I write good alt text?

Everything depends on the context of the image, but there are a few basic guidelines to keep in mind.

  • The alt text should serve the exact same purpose as the image

    When you're using an image, it's almost always to serve a purpose. Whether that's for demonstration, or to show an example, you're including an image for a reason. The alt text should serve the exact same purpose in your post as the image. Anything that's important and relevant to your post that's contained in your image should also be contained in the alt text.

  • Don't include unnecessary or redundant details

    If you've already stated something in the text of your post, there's usually no need to repeat it in the alt text. Don't get bogged down trying to include every bit of detail in the image. Only include whatever details from the image are actually relevant to your post - focus on the important parts.

As a general rule, if it would be theoretically possible for you to entirely replace your image with the alt text, without your post losing usefulness or clarity, you're good to go.