1

Since we optimized our HTML markup for WCAG 2.0, we have a lot of (sometimes ugly) image descriptions in the google search results including our google site search. Does anyone knows a way to hide them from the result descriptions?

Example:

<h1>fiscal authority</h1> <img src="..." alt="The image shows the entrance of the fiscal authority" /> <p> The fiscal authority is... </p>

Search result:

Fiscal authority
----------------
The Image shows the entrance of the fiscal authority The fiscal authority is...

We cannot...

  • ...move the picture outside of the content
  • ...provide an empty alt="" attribute
  • ...use javascript to insert the image or the alt text after rendering
  • see http://www.w3.org/TR/WCAG20-TECHS/H37.html for further details

A visitor using a screen reader should get the alt text. I believe this should be a common problem with WCAG and I like to hear how other developers solved this issue?

Trendfischer
  • 7,112
  • 5
  • 40
  • 51
  • This question appears to be off-topic because it is about SEO. – Jukka K. Korpela Jul 10 '14 at 16:43
  • 1
    SEO issues are generally off-topic at SO. Moreover, this question does not describe a specific problem; it just vaguely refers to “(sometimes ugly) image descriptions”, with no example of actual `alt` texts and their impact in search results. And `alt` attributes are not supposed to be image descriptions but textual alternatives. – Jukka K. Korpela Jul 10 '14 at 16:46
  • I've added an example to the question. Since we use the google technology for our internal search, it is a sort of programming question. It is about SEO, yes, but I am not interested in boosting search ranks. I just want to provide the user with some usable descriptions in the search results. The important part of the question is about the best practice implementing the accessibility guidelines from WCAG 2.0 – Trendfischer Jul 11 '14 at 11:42
  • From the example, it seems that the *adequate* `alt` attribute is `alt=""`. Yet you say, without giving a reason, that you cannot use that. Looks like you have painted yourself into a corner, and you should reconsider your premises rather than regard this as the kind of technical questions that are on-topic at SO. – Jukka K. Korpela Jul 11 '14 at 12:50
  • Sorry, perhaps the question is not that clear for everyone, but I intended the question for people knowing what WCAG is and stands for. Empty alt-Attributes are only allowed for decorative images, all other images need a description to allow people using a screen reader to know, what content they represent. For example, concerning my own research, an "aria-describedby" might solve the issue. But can the alt attribute be emtpy then? That's why I ask the question here, to find perhaps a professional, who can answer this. – Trendfischer Jul 11 '14 at 15:49
  • 4
    I do know what WCAG is, and I know that when the adequate textual replacement for an image is no text, then the adequate `alt` attribute value is the empty string. You seem to think that an image of an entrance should tell that it is an image of an entrance, which is really pointless to people who *do not see the image* and useless to others. So the origin of the problem is a misunderstanding of `alt` attributes. If an `alt` text makes sense to a blind user, then it also makes sense in search results. – Jukka K. Korpela Jul 11 '14 at 16:39
  • Well, I believe, this is an answer, I personally would accept. If you could provide a clear reference to the WCAG specification, I would consider the question answered. Common interpretation for "decorative" seems to be a bit different. Additionally, here in Germany and developing for a government website, we have a certification process for BITV, the german equivalent for WCAG. So I can't act on my own opinion. – Trendfischer Jul 12 '14 at 17:44
  • 1
    At least, you can remove the beginning of your alt text: `The Image shows the entrance of` because screen readers already tell its user that it's an image before reading the value of alt. You can test with [NVDA](http://www.nvaccess.org) on Windows or VoiceOver on OS X and iOS. Otherwise I second @JukkaK.Korpela 's assertion: he does know a thing or two about accessibility and WCAG. And maths :) – FelipeAls Jul 12 '14 at 21:06
  • Well, I agree. But bad alt texts are part of the problem. We have a CMS with more than 1000 editors. If I had a credible proof, that empty alt texts are OK, perhaps, I could avoid senseless descriptions, at least. – Trendfischer Jul 14 '14 at 17:00
  • 1
    1000 editors sounds like a train wreck waiting to happen. I'd strongly encourage you to set up some gatekeepers. I slightly disagree with Jukka's point of making the `alt` here an empty string, but see his point. I would go the route FelipeAls said, but at times no two experts will agree. I would be careful about going down the *"If I had a credible proof, that empty alt texts are OK, perhaps, I could avoid senseless descriptions, at least"* path because that's like saying "I could delete every image on the site and make no difference", but http://is.gd/1CGDTS – Ryan B Jul 21 '14 at 15:12

1 Answers1

1

WCAG Technique H67 clearly states that:

The purpose of this technique is to show how images can be marked so that they can be ignored by Assistive Technology.

If no title attribute is used, and the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored.

Given that BITV very clearly follows the WCAG standard, then an empty alt tag for a purely decorative image (like a doorway) is perfectly fine. It is important to recognise that WCAG is a set of highly subjective recommendations and techniques. Many tests are non-automatable, so if you can appropriately argue compliance than that is enough.

Consider the following:

<h1>fiscal authority</h1>
<img src="doorway.bmp" alt="" />
<p>
   The fiscal authority is an institute for authorising fiduciary claims.
</p>

Here the existence of the doorway is purely a decoration.

And contrast with:

<h1>Doorway</h1>
<img src="doorway.bmp" alt="A Victorian-style doorway with beveled edging." />
<p>
   A doorway is a hole cut in a wall to allow passage between rooms.
</p>

This is an image of a doorway that adds context to the text (although the image might be better placed).

Community
  • 1
  • 1
  • Seems to be the right answer for my question. Especially the difference in the context for using an alt-text. Would like to give +1, but do not use the BMP file format for images, because imho, this is bad practice. – Trendfischer Aug 05 '14 at 13:00
  • The `.bmp` extension was a joke. –  Aug 05 '14 at 13:14