aardrian, 1 month ago

Using this CSS with broken image ref:

::before {  
 content: url(foo) / "Panda";  
}  

Safari / macOS / iPadOS does not show the alt.

Until you turn on VO. Or turn it off. But it goes away if you refresh.

More accurately, it resizes the placeholder; if your alt is small enough to fit then it shows.

Attached video shows it in action.

So. What the deal is?

Test page: https://codepen.io/aardrian/pen/mdgQNrm

#accessibility #a11y #Safari

A series of broken images that, when VoiceOver is activated, resize and show the alt text from the CSS declaration. Reloading the page makes them go away. Turning off VO makes them come back.