The post discusses the issue of handling decorative images in the Webstudio platform. Community members note that according to the W3C, decorative images should have an empty alt property, but this is not currently possible in Webstudio. Some community members suggest workarounds, such as adding a class to decorative images and using JavaScript to set the alt attribute to empty. However, others point out that this approach may be outdated and that using aria-hidden may be a better solution. The community members also discuss whether the platform should default to an empty alt attribute if the user does not provide any alt text. Overall, the community is seeking a solution that would make it easier to handle decorative images in an accessible way.
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.
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.
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.","dateCreated":"2024-03-12T14:13:43.217Z","dateModified":"2024-03-12T14:13:43.217Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ec997dbc-98e7-430a-a86c-5126c81ea414","name":"AzureDusk10","identifier":"ec997dbc-98e7-430a-a86c-5126c81ea414","image":"https://cdn.discordapp.com/avatars/698482896159244289/f55d71f58c55b4821bae2fcc6064788f.webp?size=256"},"commentCount":0,"comment":[],"position":4,"upvoteCount":0},{"@type":"Comment","text":"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","dateCreated":"2024-03-12T14:47:43.180Z","dateModified":"2024-03-12T14:47:43.180Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":5,"upvoteCount":0},{"@type":"Comment","text":"on the other hand this is additional work for users","dateCreated":"2024-03-12T14:49:03.248Z","dateModified":"2024-03-12T14:49:03.248Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":6,"upvoteCount":0},{"@type":"Comment","text":"we should probably have empty alt by default if user didn't provide any","dateCreated":"2024-03-12T14:49:17.894Z","dateModified":"2024-03-12T14:49:17.894Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":7,"upvoteCount":0},{"@type":"Comment","text":"I think the image is either decorative or should have an alt text not blank","dateCreated":"2024-03-12T15:18:17.400Z","dateModified":"2024-03-12T15:18:17.400Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":8,"upvoteCount":0},{"@type":"Comment","text":"so it seems appropriate to default to empty alt attribute if user didn't add it","dateCreated":"2024-03-12T15:18:47.236Z","dateModified":"2024-03-12T15:18:47.236Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":9,"upvoteCount":0},{"@type":"Comment","text":"https://github.com/webstudio-is/webstudio/pull/3001","dateCreated":"2024-03-12T15:23:01.302Z","dateModified":"2024-03-12T15:23:01.302Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":10,"upvoteCount":0},{"@type":"Comment","text":"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.","dateCreated":"2024-03-12T18:05:21.237Z","dateModified":"2024-03-12T18:05:21.237Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/ec997dbc-98e7-430a-a86c-5126c81ea414","name":"AzureDusk10","identifier":"ec997dbc-98e7-430a-a86c-5126c81ea414","image":"https://cdn.discordapp.com/avatars/698482896159244289/f55d71f58c55b4821bae2fcc6064788f.webp?size=256"},"commentCount":0,"comment":[],"position":11,"upvoteCount":0},{"@type":"Comment","text":"released","dateCreated":"2024-03-12T18:36:35.907Z","dateModified":"2024-03-12T18:36:35.907Z","author":{"@type":"Person","url":"https://help.webstudio.is/members/cdd3ed87-53a0-414a-885a-56b7939e412a","name":"Oleg Isonen","identifier":"cdd3ed87-53a0-414a-885a-56b7939e412a","image":"https://cdn.discordapp.com/avatars/469405813048606720/8b66a5882214c63ee6148fcce3ef8e93.webp?size=256"},"commentCount":0,"comment":[],"position":12,"upvoteCount":0}],"author":{"@type":"Person","url":"https://help.webstudio.is/members/ec997dbc-98e7-430a-a86c-5126c81ea414","name":"AzureDusk10","identifier":"ec997dbc-98e7-430a-a86c-5126c81ea414","image":"https://cdn.discordapp.com/avatars/698482896159244289/f55d71f58c55b4821bae2fcc6064788f.webp?size=256"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":0}}]