1

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 text, if possible ... but things aren't always ideal, unfortunately ... and when they're not, it'd be good to have a consistent, reliable approach.)

Sometimes you want to emphasize a headline, line breaks, etc.

I'm thinking for best reading by both humans (using screen readers, etc.) and also search engines. Optimizing for sighted humans is simple enough -- one can use asterisks, or other visual punctuation, whitespace, etc. ...

** HEADLINE **  
I would really like to know how to 
properly *emphasize* things in alt-texts.

And how about line breaks and whitespace?

<Latest specials are here>

But how does that come across to search engines? To screen readers? Is there a best practice regarding this type of thing, a common language of conventions that people/Google understand?

3
  • 1
    Alt is primarily for screen readers, will it make sense if it's read out as an example: "this is an alt text 'followed by line break' and this is emphasised text saying 'buy now'." Other than crawlers what would be the benefit just curious.
    – Abu Nooh
    Mar 2, 2018 at 22:36
  • @AbuNooh Conveying a headline, as opposed to a following paragraph, for example; or a bulleted list, or a dash -- things that we often use visual space to convey. I'm interested to know if there's a standard way to communicate those things where the visual component doesn't come across, like to screen readers or crawlers. If there isn't, seems there should be. Unfortunately sometimes there are large chunks of text embedded in images which should at least be copied into alt text, though this isn't the ideal approach. Mar 4, 2018 at 4:35
  • The purpose of alt is to describe the image it is being used for. So things like 'this is a picture of monkeys in the wild.' The alt is part of web accessibility initiative's way of making the web accessible for all. It's in this context that it should be viewed i.e. primarily for screen readers.
    – Abu Nooh
    Mar 4, 2018 at 10:38

2 Answers 2

2

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>

http://jsfiddle.net/o3keo9bp/

9
  • style the alt attribute really?
    – Abu Nooh
    Mar 2, 2018 at 22:37
  • 1
    Yes, thank you, I'm aware of being able to style the alt text ... but I'm more interested in conveying the meaning of emphasized text -- screen reader users won't see the style of the text, nor will googlebot care. When text is emphasized, or broken up, there is usually meaning conveyed -- two hypens for a dash, to delimit thoughts, or convey a pause; bold & italics convey emphasis; capitals or visual punctuation for a headline. My question is if there is a standard convention to follow for conveying meaning, that will come across to screen reader users and to crawlers. Mar 4, 2018 at 4:18
  • 1
    @AbuNooh Yes, this is very useful for, e.g., html emails, where images are often blocked or not loaded -- this is considered a best practice these days. Technically what happens is if an image is missing, the alt-text displayed will take any style that is set on the element; so if you style the img element, the alt will take that style. Many helpful articles on the topic: litmus.com/blog/the-ultimate-guide-to-styled-alt-text-in-email Mar 4, 2018 at 4:21
  • 2
    @Rob Actually the self-closing tag syntax, using a slash at the end of the tag, was required for valid XHTML, as XHTML also had to be well-formed XML, and XML requires every tag to be closed. See w3.org/TR/2002/REC-xhtml1-20020801, section 4.6. In html 5 it is considered optional but still valid. (w3c.github.io/html-reference/syntax.html#syntax-self-closing, 4.3). And the 'align' attribute, while deprecated and not ideal to use, can still be useful sometimes in dealing with non-ideal user agents, like old IE or MS Outlook (unfortunately). Mar 4, 2018 at 4:32
  • 1
    @michaeld Closing slashes on images have never been needed in HTML and they do nothing, have no meaning and browsers are instructed to ignore them. No old browser will misinterpret it either because, as I said, it has never been part of any HTML spec since HTML began.
    – Rob
    Mar 5, 2018 at 21:17
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.