Looking for advice on image alt-text/description on personal website 
For now, I use both alt and title fields of my <img> and often they have the same value.
I read here on Fedi and on MDN that it's a bad practice as screen readers will read both.
I'd like:
- An alt-text/image description, for visual-impaired people
- An alt-text for when the image cannot load (may be the same as above, but ideally different)
- Not necessarily a caption as it would break the visual flow in most cases
- A different message from alt-text that appear when you hover the image (the tooltip)
- No JS
The idea is that I want the tooltip to often have the same value as an alt-text, but sometimes different (mostly for jokes)
I added on one of my page a bit of CSS (without JS) to make an info icon appear on bottom right corner of an image on hover, and when the icon is hovered, it displays a custom tooltip.
Is that the only solution? Should I just drop the title value of <img> and use my custom one instead? Are there better solutions matching the list above?
Thanks! Boosts welcome and appreciated~ 
Seirdy
in reply to Soblow Xaselgio • • •My recommendations: the “beyond alt text” section of this article.
Don’t worry too much about the char limit. I’m planning on removing that guidance.
I do think captions are a good idea for sufficiently detailed images. You can use a
figureelement and put the full detailed transcript in the caption. Toggle the transcript with adetailselement if necessary.Overly long alt-text isn’t exactly harmful but I think it’s better to put an extended description somewhere else, so you can use markup instead of plain text.
Best practices for inclusive textual websites
Seirdy’s Home