a11y

Write alternative text in Webflow

Alt text (alternative text) is the text which describes images on your website. It is visually hidden, but available to bots and screen readers.

Add a period or full stop at the end of the Alt text so that the screen reader will pause for a moment.

It helps

Webflow

Inputting Alt text in Webflow

When you add an image from the Elements (A) panel the Image settings will open. The default Alt appears to be "A porcupine", but in fact the default value is "".

All images MUST have alt text, but the value "" is a null or empty value. It tells the bots to ignore the image. It is as if the image is not there.

When you test your website for accessibility, you won't get any errors for missing Alt text, but unless you write some useful text, you will not make your site accessible.

From the Element panel (A)

Media elements.
Image settings.
Add alt text.

From the Assets panel (J)

There is a little gear icon top right of each image in the Assets Panel (J). Choose Descriptive to add Alt text, or Decorative to add Alt = "", empty Alt text.

Add alt text from assets panel.
WCAG

Types of images

When you write alt text you need to think about the type of image. As defined by Web Content Accessibility Guidelines, there are 7 types of images.

I have written a guide to each type of the image types, with examples from real Webflow sites to help you write clear, accurate and useful Alt text.