RESOLVED FIXED292653
AX: CSS content alt text is not announced by VoiceOver 
https://bugs.webkit.org/show_bug.cgi?id=292653
Summary AX: CSS content alt text is not announced by VoiceOver
maximilian.koeller
Reported 2025-05-06 23:56:26 PDT
CSS supports an alt text for the content attribute as described here: https://developer.mozilla.org/en-US/docs/Web/CSS/content. The problem can be reproduced using this HTML code: <html> <style> .with-content { content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ccircle cx='50' cy='50' r='40' fill='blue' /%3E%3C/svg%3E") / "Alt text not detected } </style> <body> <div class="container"> <button class="with-content"></button> </div> </body> </html> The button should be announced as 'Alt text not detected'. Safari with VoiceOver just announces a button but does read the alt text. The same example with Chrome and VoiceOver works, so I assume it is an Safari / Webkit issue.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2025-05-06 23:56:35 PDT
<rdar://problem/150830550>
Tyler Wilcock
Comment 2 2025-07-09 08:51:25 PDT
Hi, thanks for reporting this! I couldn't get your sample to work in either browser — VoiceOver in both Chrome and Safari just read "button". And I'm not sure it's rendering correctly? Which makes me wonder if the syntax is correct (I could be wrong, not an expert in this area). I'd expect to see a blue circle, but that's not what I actually see. On the contrary, Safari in macOS Tahoe seems to handle this case correctly: <html> <head> <meta charset="UTF-8"> <style> .foo::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="8" fill="blue"/></svg>') / "awesome circle"; } </style> </head> <body> <p class="foo">Hello world!</p> </body> </html> VoiceOver reads "awesome circle".
maximilian.koeller
Comment 3 2025-07-23 23:10:42 PDT
Thx a lot for your feedback. My initial example was indeed lacking a closing " for the alt text. It seems like the situation got better, but there are still some issues present. Please consider the following test provided here: https://github.com/dequelabs/axe-core/issues/4763#issuecomment-3109931487 Copied reply from straker in the github issue: <style> .with-content { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="8" fill="blue"/></svg>') / "alt for with-content"; } .with-before-content::before { content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><circle cx="8" cy="8" r="8" fill="blue"/></svg>') / "alt for with-before-content"; } </style> <button id="a" class="with-content"></button> <span id="b" class="with-content"></span> <button id="c" class="with-before-content"></button> - Chrome 138.0.7204.101: #a doesn't render a visual blue circle, #b and #c do. #a and #b report with accessible name "alt for with-content", #c reports with "alt for with-before-content" - Safari 18.5 (20621.2.5.11.8): #a doesn't render a visual blue circle, #b and #c do. #a and #b report with no accessible name. #c reports with accessible name "alt for with-before-content". - Firefox 140.0.4: Same as chrome It looks like Webkit does not render the alt when the element itself uses the content, but does when it's on the pseudo element.
Tyler Wilcock
Comment 4 2025-07-24 07:55:07 PDT
Thanks for the follow-up! Confirmed the issue on my end with your latest example, so something for us to investigate.
Tyler Wilcock
Comment 5 2025-07-24 12:42:57 PDT
Pull request: https://github.com/WebKit/WebKit/pull/48488
EWS
Comment 6 2025-07-24 19:52:41 PDT
Committed 297848@main (89606797423e): <https://commits.webkit.org/297848@main> Reviewed commits have been landed. Closing PR #48488 and removing active labels.
Note You need to log in before you can comment on or make changes to this bug.