{"Docs-2024-08-11-021602-adding-alternative-alt-text-to-images":{"title":"Adding Alternative (Alt) Text to Images","dateCreated":{"_seconds":1723342562,"_nanoseconds":979000000},"dateUpdated":{"_seconds":1723597088,"_nanoseconds":350000000},"datePublished":{"_seconds":1723342562,"_nanoseconds":979000000},"bodyText":"

Alt text is used by screen readers to describe images to people who are visually impaired. It’s a simple way to make your website more accessible. We’ve made sure you are able to add alt text to any image you add to your website.

What should I write?

Harvard has a short and sweet guide on writing good alt text: https://accessibility.huit.harvard.edu/describe-content-images

While many will encourage you to write alt text for SEO, it’s main purpose is to help the visually impaired. So just think: how would I want someone to describe this image to me if I couldn’t see it?

We recommend you try out a screen reader yourself to discover what you would actually find helpful. While descriptive text is great, alt text that is too long can get pedantic (the screen reader is reading EVERYTHING on the screen). Nearly all phones, tablets, and computers come with a built-in screen reader, like TalkBack for Android or VoiceOver for iOS.

Adding Alt Text

Here is how to add alt text for each type of image:

Standalone Images

$\"Arrow$

Gallery Images

$\"Arrow$

Blog Gallery Images

$\"Arrow$

Blog Inline Images

This one is more complicated. Here are the steps:

","tags":["accessibility","how to"],"gallery":[],"author":{"dateCreated":{"_seconds":1724126400,"_nanoseconds":978000000},"displayName":"Hannah Lee","email":"hannah@pigmint.io","dateUpdated":{"_seconds":1724126400,"_nanoseconds":103000000}},"contributors":[null],"slug":"2024-08-11-021602-adding-alternative-alt-text-to-images","id":"FAp3RsORQ6114qb1GSXE","metaTags":[]}}