Option to add alt="" to decorative images (A11y)

At a glance

https://www.w3.org/WAI/tutorials/images/decorative/

According to the W3C, if an image on the page is decorative and doesn't add information to the content of the page, it should have an empty alt property. i.e.:
<img alt="">

This isn't possible in the Webstudio properties panel at the moment. If you leave the "alt" property blank, it doesn't get rendered in the HTML.

Putting a space in the "alt" property doesn't seem to be a suitable workaround, as the WAVE accessibility audit tool flags it as "suspicious alt text" and likely to be insufficient.

In Webflow, they have a setting for images to say whether they are decorative or not. If set to decorative, the image element has alt="" added to it. If the image is not set to decorative and has alt text, alt="[alt text here]" gets added to the element. If not decorative and no alt text is specified, no alt attribute is added to the element.

I'd be keen to see something similar implemented in Webstudio.

12 comments

AAzureDusk10

Allow adding an empty alt text property to an image (A11y)

AAzureDusk10

Option to add alt="" to decorative images (A11y)

AAzureDusk10

Here is how Webflow handles alt text on images

Attachments

AAzureDusk10

As a workaround, I'm adding a class "descriptive" to descriptive images, and I've added this code in an HTML embed in my site's footer:

Plain Text

<script>
  // Add alt="" to decorative images
  document.querySelectorAll('img.decorative').forEach(el => el.setAttribute('alt', ''));
</script>

However, I don't think this will work for images inside a dialog, as they only seem to get added to the DOM once the dialog trigger is pressed.

OOleg Isonen

isn't this approach outdated and we should be using aria-hidden?

I am trying to remember what's the modern way of doing it

OOleg Isonen

on the other hand this is additional work for users

OOleg Isonen

we should probably have empty alt by default if user didn't provide any

OOleg Isonen

I think the image is either decorative or should have an alt text not blank

OOleg Isonen

so it seems appropriate to default to empty alt attribute if user didn't add it

OOleg Isonen

https://github.com/webstudio-is/webstudio/pull/3001

AAzureDusk10

Thanks for looking into this so quickly! I would be happy with this approach. The behaviour you've described is what I was expecting when I didn't see any "decorative" property in the sidebar.

OOleg Isonen

released

Add a reply

Join the Webstudio community

Option to add alt="" to decorative images (A11y)