How to add alt text to images on every common platform

Image alt text in HTML

The alt attribute goes on every img element. A missing attribute is a failure of WCAG 1.1.1 because many screen readers then read out the file name. An empty one tells them to skip the image.

<img src="team-photo-03.jpg">

<img src="team-photo-03.jpg" alt="Our four nurses at the clinic front desk">
<img src="divider.svg" alt="">

For a linked image or an image button, describe its destination or its action, such as alt="Home page", not the picture. Inline SVG icons need role="img" with an aria-label, or a title element. A picture set as a CSS background offers no place for alt text, so never use them for content that matters.

How to add alt text to images in WordPress

WordPress image alt text can be set in two places, and they behave differently.

1. In the block editor, select the Image block. In the settings sidebar on the right, find Alternative Text and type your description.
2. Or open Media, Library, click an image and fill the Alternative Text field in the attachment details.
3. Update or publish the post.

Page builders and themes add their own image widgets, but nearly all of them show an alt field in the widget settings or read it from the Media Library.

Shopify: single images and bulk edit alt text

For one product image, open Products, choose the product, select the photo under Media, then use Add alt text or Edit alt text. Save. Collection images, blog post images and theme sections have a similar alt field in their own settings.

For a large catalog, a spreadsheet is faster than clicking each image:

1. From Products, Export, export the products you want as a CSV file.
2. Open it in a spreadsheet program and find the Image Alt Text column. Each image has its own row.
3. Write alt text per image. Avoid one formula that pastes the product title into every row; gallery shots need different descriptions.
4. Import the file through Products, Import and choose to overwrite existing products.

Alt text in Word and PowerPoint

Microsoft Word and PowerPoint share the same panel:

1. Right click the picture, chart or shape.
2. Choose View Alt Text (older versions say Edit Alt Text).
3. Type the description in the pane that opens.
4. For decoration, tick Mark as decorative instead.

Office may suggest an automatic description. Treat it as a draft: it often names objects but misses why the image is there. Alt text you set in Word carries into a PDF when you export with document structure tags turned on; our PDF alt text guide covers what happens next. Outlook uses the same right click route for images in an email.

Google Docs, Slides and Sheets

Right click the picture, pick Alt text, or select it and press Ctrl+Alt+Y (Cmd+Option+Y on Mac). Type the description and click OK. Google Slides and Sheets use the same menu item for images and charts. There is no decorative checkbox, so leave the field empty for purely visual pictures.

Email builders and newsletters

Many email programs block images until the reader allows them, so alt text is often the first thing a subscriber sees. Most newsletter builders put an Alt text or Alternate text box in the image block settings. If yours does not, edit the HTML block and add the attribute by hand.

• Put the offer or headline from a banner image into its alt text, since it may be the only way the message gets through.
• Use alt="" on spacer and divider images so they are not read as file names.
• Do not put the whole email inside one image.

Tailwind and framework projects

Tailwind classes only style the image. Alt text is still the plain HTML attribute:

<img class="w-full rounded-lg object-cover"
  src="/img/cafe.jpg"
  alt="Window seats with a view of the harbour">

In JSX frameworks the prop is also alt, and some image components refuse to build without it. For visible icons that need a text label only for screen readers, Tailwind's sr-only class hides text visually while keeping it readable:

<button type="button"><svg aria-hidden="true">...</svg>
  <span class="sr-only">Close</span></button>

Check your work after you add alt text

Not sure what to type? The alt text generator suggests wording from what you tell it, and alt text examples show good and bad versions side by side. Unsure whether an image needs text at all? Follow the W3C image decision flowchart.