16

We have a project that is all about web accessibility compliance. About a week from launch we have the accessibility committee reviewing our site to give the final thumbs up. However, they reported back to us that we should set alt="" on some of our icons because they do not provide any additional content to the site and thus are merely distracting to a screen reader but yield no benefit.

  1. Is this correct?
  2. I was under the impression alt was a required attribute of img? Sure alt="" on an img tag would include the alt attribute but is this valid ?

Comments are appreciated.

Chris
  • 11,780
  • 13
  • 48
  • 70
  • I assume you meant to say "they reported back to us that we should **not** set alt="" on some of our icons"? – userx Sep 27 '10 at 17:37
  • 7
    To clarify your question, the committee suggested to put a blank `alt=""` attribute vs `alt="some text"` attribute, correct? – scunliffe Sep 27 '10 at 17:38
  • No, he is saying they recommended that they set it to blank as they are useless unless visual. @naivists is correct in his answer. – Dustin Laine Sep 27 '10 at 17:39
  • 4
    @userx: no, they suggested to change things like alt="home icon" to alt="" because icons with no functionality having alt detract from screen reader experience and provide no benefit. @scunliffe: yes, this is correct and applicable to any graphic/icon that is merely a icon/graphic with no additional functionality. – Chris Sep 27 '10 at 17:41
  • 1
    For anyone with JAWS or similar screen reader experience, is there a difference in how the reader handles a "missing" alt attribute vs. an empty one? I see a technical difference, but semantically I would expect the screen reader to ignore both. – scunliffe Sep 27 '10 at 17:44

3 Answers3

23

If the icons provide any functionality (user-clickable or something), I'd recommend setting a descriptive alt value. If they are just decorative, then alt="" is valid.

From the standard:

While alternate text may be very helpful, it must be handled with care. Authors should observe the following guidelines:

  • Do not specify irrelevant alternate text when including images intended to format a page, for instance, alt="red ball" would be inappropriate for an image that adds a red ball for decorating a heading or paragraph. In such cases, the alternate text should be the empty string (""). Authors are in any case advised to avoid using images to format pages; style sheets should be used instead.
  • Do not specify meaningless alternate text (e.g., "dummy text"). Not only will this frustrate users, it will slow down user agents that must convert text to speech or braille output.
bdukes
  • 152,002
  • 23
  • 148
  • 175
naivists
  • 32,681
  • 5
  • 61
  • 85
  • Do you have any resources that document this? (Not saying you are wrong, just curious.) – Chris Sep 27 '10 at 17:39
  • 1
    @Chris I was just remembering this paper I read some time ago http://www.standardista.com/standards/alternative-text-for-images-the-alt-attribute – naivists Sep 27 '10 at 17:43
  • 2
    Thanks! You might as well link to that in your answer, this is a solid answer and a solid resource pertaining to said answer. Appreciated. – Chris Sep 27 '10 at 17:44
  • Also see the Access Board's 508 guide: http://www.access-board.gov/sec508/guide/1194.22.htm – Jeff Sep 27 '10 at 17:47
7

According to this source: http://msdn.microsoft.com/en-us/library/ms228004(v=VS.100).aspx#guideline_11__providing_alternate_text_for_images omitting alt attribute would make some sreen readers pronounce the file name and distract the user, which is why setting alt to an empty string is recommended.

Nemanja Trifunovic
  • 24,346
  • 3
  • 50
  • 88
5

The alt attribute is always required if you want your code to pass validation, however it's not necessary for the alt attribute to have a value.

If you're using images for page decoration (for example, rounded corners or shadows for browsers that don't support CSS3), these images should be in the CSS rather than inside <img> tags in the html. However, there are cases when you may have images that should be included as actual images in the html, even though there is no meaningful way to describe them for screen reading software. In this case, w3.org says that it's okay to use alt="". 1

1: http://www.w3.org/QA/Tips/altAttribute

Michael Martin-Smucker
  • 11,927
  • 7
  • 31
  • 36