CODEWITHSUNDEEP
htmlseosemantic-markupalt
jabacchetta
jabacchetta

Reputation: 50238

Correct usage of <img> alt attribute for picture quotes?

What would be the correct usage of the alt attribute, given a picture quote?

It would seem to qualify as an image with 'decorated text,' which W3C recommends placing the entirety of the text in the alt attribute. However, I'm guessing that their idea of decorated text is a short phrase. In fact, they recommend a 'short line' for the alt attribute.

Additionally, some screen readers apparently break up the text into blocks of 125 characters.

More specific to my circumstances (since this question probably seems trivial), I run a quote website that gets quite a bit of traffic, so making sure it's accessible and semantic is important to me. In the next version, the quotes will be displayed as a collage — some text, some picture quotes.

I was initially planning to use the following, based on the fact that the alt attribute should describe the image with a short sentence:

Picture quote about courage, perseverance, and success

That's short, descriptive, and great for SEO. However, it would seem to me that descriptions like this would be useless to a blind person who's browsing through quotes on the site. Yes, they could click through to get the entire quote, but still, the alt text wouldn't make that original image or page very useful to them.

And, as an afterthought, I don't know if the word "picture" should be used or not. It's usually recommended to leave out words like image, picture, icon, etc. But in this case, it would seem to be useful, giving the user more information about what's being read to them — considering that the alt text would actually be what's ON the image, rather than what the original image is. And I wouldn't think that the actual image should be referenced at all in the alt attribute, since the 'purpose' of the image is to present the quote.

Then I figured this would make the most sense:

Quote By Anne M. Lindbergh: 'It takes as much courage to have tried and failed as it does to have tried and succeeded.'

This gives the user a description of what is about to be read to them, followed by a colon — which, from my understanding, will cause screen readers to pause — and concluded with the quote.

The only problem with this is that long quotes, which can get up to between 200 and 600 characters, will create problems for screen readers when used as the alt text. And I even wonder if this format might negatively affect SEO (making it look like I'm over-optimizing).

So with all of that in mind, should I essentially view the picture quotes as 'complex' images, and therefore inaccessible? Or should I add all of the text and hope for the best?

Upvotes: 1

Views: 9630

Answers (1)

unor
unor

Reputation: 96717

If an img element is the only content of an a element, the alt attribute has to describe the purpose of the link, not necessarily the image itself (details).

But there isn’t really a difference in your case, as the image contains the full quote and the author, and one of these two parts (or both) would be the reason for visiting the link, so you should convey them in the alt, too.

So include in alt exactly what is seen on the image. You could consider adding "Quote of", but that’s probably not necessary for a site about quotes. But I wouldn’t add "Picture of", because it doesn’t seem to be relevant that the quote is provided in the form of an image (and it would describe the image, but you should describe the purpose of the link).

<a href="/anne-m-lindbergh/quote-1">
  <img 
    src="/anne-m-lindbergh/quote-1.png" 
    alt="Anne M. Lindbergh: “It takes as much courage to have tried and failed as it does to have tried and succeeded.”" 
    />
</a>

If it becomes too complex for alt (e.g., too long), you could use object instead of img. This would allow to use markup like q and cite for the fallback/alternative content, too. However, I don’t know how well it’s supported by various consumers.

<a href="/anne-m-lindbergh/quote-1">
  <object data="/anne-m-lindbergh/quote-1.png" type="image/png">
    <cite>Anne M. Lindbergh</cite>:
    <q>It takes as much courage to have tried and failed as it does to have tried and succeeded.</q>
  </object>
</a>

Upvotes: 1

Related Questions