: How to emphasize and punctuate words within an 'alt' attribute? Say, when you have a fair amount of text that you need to alt. (I realize it's best to pull it out of an image and into plain

@Ann8826881

Apart from using text (like *…*, **…**, __…__, (!!) etc.), which might or might not be understood by your users (or read out by their screen readers), there is no way.

If you have a complex alternative description, the alt attribute is not the right solution. Either use the longdesc attribute, a figure with figcaption, or (as alternative to img) the object element. Examples in this answer.

Vote Up Vote Down

@Lee4591628

You can style alt text. You can make alt text bold, add a background or change its color. You can also add linebreaks. I don't think it's possible to make some words bold and some words normal, but if there's a solution I'd like to have it as well.

Here is an example:

<img src="foo.jpg" alt="Line 1
Line 2" />
<br><br>
<img src="foo.jpg" alt="someText" style="color:#54C5D0; font-weight: bold;" src="IMG_URL"/>
<br><br>
<div style="color:#54C5D0;font-weight:bold">
<img src="foo.jpg" alt="line1
line2" style="border:1px solid #aaeedd " src="IMG_URL"/>
</div>
<style>img{white-space:pre}</style>

jsfiddle.net/o3keo9bp/

Vote Up Vote Down