blog! “How to style your alt text”
Every day is a school day. I'd recently seen a post about highlighting images without alt text. That got me thinking. Is it possible to style alt text? Yes. Yes it is. And it's pretty simple. Well, OK, it's CSS, so simple is a relative term! Let's take a broken image like <img src="http://example.com/bigfoot.jpg" alt="The […]
⸻
#a11y #accessibility #css #HTML
> But if the image fails, the alt text picks up the font and text colour specified. That seems to work reliably on Firefox, Chrome, and WebKit.
The alt text does not render for me in Safari.
Test page: https://output.jsbin.com/ziranew/quiet
@Edent Oh, interesting. The text is only rendered if the image’s width and height are large enough for the text to fit in a single line. The minimum width depends on the text. The minimum height seems to be 56px.
edit: The minimum height depends on font-size (larger text is taller). It seems to be around 3em. The [?] icon is vertically centered, so I guess the minimum height is based on being able to fit 3 lines of text.
@simevidas huh! Good ol' Apple, eh?
@Edent Good ol’ web. All browsers have these silly behaviors.