How to Add Alt Text to Images

Alt text is what a browser shows, and a screen reader speaks, when an image cannot be seen. Every image that carries meaning needs it, and every image that does not needs an empty one.

Add the alt attribute in HTML

<img src="chart.png" alt="Bar chart of monthly sales, rising from 20 to 45 units">

Put it on every <img>. Framework image components such as Next.js <Image> and Astro <Image> take an alt prop and pass it straight through.

Describe the content and the purpose in one sentence

Say what the image shows and, when it matters, what it is doing on the page. Skip "image of" and "picture of": the screen reader already announces that it is an image.

Weak:

<img src="team.jpg" alt="image">

Better:

<img src="team.jpg" alt="Four engineers at a whiteboard sketching a database schema">

If the image is a link, describe where the link goes: alt="Pricing plans". If the image contains text, such as a screenshot of an error message or a quote graphic, put that text in the alt.

Use an empty alt for decorative images

<img src="divider.png" alt="">

alt="" tells screen readers to skip the image. Omitting the attribute is different: the reader then announces the file name instead. Purely decorative images set as CSS backgrounds need nothing.

Fill in the field in your CMS

• WordPress: select the image in the block editor and fill in Alternative Text in the sidebar, or open the image in the Media Library and fill in the same field there. The Media Library value becomes the default wherever the image is reused.
• Shopify, Squarespace and Wix: click the image in the editor and look for an alt text field in its settings panel.

Use keywords only where they fit

If the page is about trail running shoes and the photo shows a trail running shoe, say so. Do not paste a list of search terms; that reads badly aloud and can be treated as spam.

Screen readers read it aloud. Keep alt text under about 125 characters where possible, since some readers stop there. Anything longer belongs in a caption or the surrounding text.

Google Images uses it. Alt text is the main signal for what a picture shows, so an accurate description also helps the image appear in image search results for the right queries.