9

I understand it is generally a best quality practice to have title tags for hyperlinks and alt tags for images. This is good for several reasons: additional information for low bandwidth users, additional information for assistive technologies, better display of search results from search engines, etc.

My question is when an image is a hyperlink, i.e.

<a href="google.com><img src="google.gif"/></a>

Should that be done with the a title attribute

<a href="google.com" title="Google"><img src="google.gif"/></a>

or with the img alt tag

<a href="google.com"><img src="google.gif" alt="Google/></a>

or with both

<a href="google.com" title="Google"><img src="google.gif" alt="Google"/></a>

or with both having both

<a href="google.com" title="Google" alt="Google"><img src="google.gif" title="Google" alt="Google"/></a>

Moved here from the qa site. closed there.

2
  • I have a family member who is blind and her screen-reader uses the alt tags to describe the images (not the title tag). She hates it when she browses to sites and can't navigate them because they don't have alt tags, it make the site unusable to her.
    – Baronz
    Apr 3, 2016 at 19:43

2 Answers 2

8

Both of them

However, the alt description in the image should be for the link description, not for the image itself

From Accessibility and Usability at Penn State: Image ALT Tag Tips for HTML

term "ALT tag" is a common shorthand term used to refer to the ALT attribute within in the IMG tag.

  • Any time you use an image, be sure to include an ALT tag or ALT text within the IMG tag. Doing so will provide a clear text alternative of the image for screen reader users. WCAG 2.0 Guideline 1.1.1.—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."
  • The description in the ALT tag

should be meaningful in the context of the Web page, specifically:

  • Images used as links should have alternative (or "alt") text describing the destination of the link, not the image itself.
  • Alt text

with acronyms should be written with spaces in between letters. For instance, <alt="I T S at P S U" > (read by a screen reader as "ITS at PSU") is preferable to <alt="ITS at PSU" > (read as "It’s at Sue").

  • Images used as spacers or in toolbars should have an empty ALT tag (i.e. <alt="" >). Screen readers will simply skip over images with empty ALT tags.
  • Images that already include a text description within

the main text of the page can have a summary ALT tag.

  • If you want to

provide a tooltip for visual browsers, use the TITLE tag in addition to the ALT tag, since it is supported in most browsers. For example:

  • While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within the JAWS screen reader. Many versions of JAWS break up longer text tracts into blocks of 125 characters, which can be confusing to users.
  • For an especially complex image, such as a

chart, equation or diagram, a link to an extended text description should also be included.

  • Images that are used as buttons or labels

should use fonts that are readable to a large segment of the audience (probably 12 pixels/point or larger).

  • In some cases you can replace

decorative or layout-related images with styled HTML elements, such as HRs or DIVs, for which you change background colors and specify background images.

The article above clearly explains the alt usage on image links. However, the title part is incomplete in the original article, but you should use both, because one of them will help you with assistive technologies and accessibility , while the title on links will help you with this, but also with better readability and SEO.

Additional concerns

On top of the above, you should never rely on title only, see The title attribute

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).

but... by no adding it, you get this:

If this attribute is omitted from an element, then it implies that the title attribute of the nearest ancestor HTML element with a title attribute set is also relevant to this element. Setting the attribute overrides this, explicitly stating that the advisory information of any ancestors is not relevant to this element. Setting the attribute to the empty string indicates that the element has no advisory information.

In short

You must use both elements whenever possible, but there are some specifications and special rules you should follow

0

I disagree on the title element. I believe the case you state where it would take the title attribute of the nearest ancestor HTML element with a title attribute is not common. The best solution in this case would be to remove the title attribute from the nearest ancestor as well.

Drawbacks of the title element:

  • Only available to visual users
  • Not available to tablet/mobile users
  • If an alt attribute (for images) is in place or text is used in other places like links or buttons then the information is redundant
  • Title texts don’t work with keyboard navigation
  • Title texts require users to guess whether it needs to be hovered over

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.