alt attribute is meant to help users not miss any content, so make sure your text is helpful to anyone not seeing the image. These could be assistive technology users or users of a mobile with images turned off (to save data, for instance).
A few tips on how and when to use the
- Use the
altattribute for any image that is used as content.
alttext describes the function of an image and is rarely a detailed description of the image itself (unless, for example, the page is actually about a specific picture).
- Make sure the description of the image is useful. For example, if the image is your logo your
altshould be your company name and not “logo”.
- Don’t begin
alttext with “photo of..” or “picture of..”; assistive technologies already do this. Redundancy and repetition are almost as bad as not enough information.
- Don’t put line breaks in
alttext. It causes suboptimal effects when read by screen readers.
- Using an image file several times in a website doesn’t mean that the
altattribute has to be the same in each
altattributes change with context. For example, as seen above, a logo that is a link to your home page should have
alt="home page"and the same logo, used somewhere else as decoration, should have
- Use an empty
altattribute for any image that is decorative or not necessary for understanding the content of the page (
<img src="prettyswirl.jpg" alt>). If, for example, the information in a graph is explained in text below it, there’s no need to duplicate that in
- Images that are links should describe where they go. For example, a logo that is a link to your home page should have
alt="home page". But if the image is only one part of the contents of a link and the other contents (e.g. plain text) describes the link then use an empty
altattribute for the image - if you were to specify ‘alt’ text as well this would be redundant/repetitive.