0

If I have a link (anchor) in the header that just contains an image, like this:

<a href="index.html" title="Home">
  <img src="http://placehold.it/200x50" alt="Site Name">
</a>

Is this accessible? The alt attribute appears to be overridden by the title attribute. I know that title is not usually necessary, but because nothing is describing the link except the alt text (which only has the Site Name because the image is a site logo in this case), the title is supposed to say that the link goes back home. I can't add any text because I don't want to hide it with CSS; that would not fit with progressive enhancement.

Where should the link description go in this case? Alt or title? What's the best practice?

Ryan B
  • 3,364
  • 21
  • 35
Ian
  • 5,704
  • 6
  • 40
  • 72
  • This might be a better question on [ux.stackexchange.com](http://ux.stackexchange.com). Also, why would hiding text with CSS by anti progressive enhancement? I agree, it's spammy and not a good idea, but I don't think it has anything to do with progressive enhancement. – Tim Aug 20 '14 at 05:31
  • Because progressive enhancement means that the site will look fine without CSS and JS, So I don't want to have extra text that doesn't belong that will show up when CSS is off. – Ian Aug 20 '14 at 15:23

2 Answers2

6

  1. Titles of surrounding links don't override alts on images. Both will be announced by screenreader software unless the user has chosen to suppress titles in the settings (if you've ever listened to a Wordpress site you'll understand how too many can be annoying).

  2. Best practice is to leave out the title and rely on the alt as the link content for cases where the image is not seen or not loaded. You can see an example here: http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/H30 in the techniques for 2.4.4 Link purpose (in context).

  3. Visually-hidden text can work well with progressive enhancement. It shouldn't be used as a catch-all for poorly designed widgets, but it can help provide context for non-sighted users. I use it more for indicating the current page in a menu when there are no graphics but just colours, that sort of thing.

stringy
  • 1,323
  • 7
  • 16
  • 1
    Thank you, [Example 2](http://www.w3.org/TR/2014/NOTE-WCAG20-TECHS-20140408/H30#H30-ex2) is exactly what I was looking for (`Current routes at Boulders Climbing Gym`) – Ian Aug 20 '14 at 15:25
1

There is nothing unaccessible about the way you have it. You provided both a description of the link and the image. As for what goes where, the link description should go in the title while the image description should go in the alt. titles aren't as common or necessary, but alts are important for both SEO and accessibility (screen readers and in case the image doesn't load).

Tim
  • 2,123
  • 4
  • 27
  • 44
  • Your "what goes where" is not entirely correct. If a link contains only an `img`, then [`alt` needs to describe the purpose of the link](http://stackoverflow.com/a/19776398/1591669), not the image. – unor Aug 20 '14 at 17:42