Alt Text, alternative text for images

Best practice

• Give all HTML <img> elements an alt attribute.
• Give any decorative images an empty alt attribute ( alt="" ).
• Describe (for non-visual readers) the contents and purpose of the image in the alternate text.
• If an alt attribute is not inserted in the Media Library, this will be interpreted as alt="" in the front end.
• If an image contains a link, the alt attribute should contain the target of that link (e.g. the post title), and not a description of the image.
• When possible, use CSS to insert images that are only decorative, like an icon or ornament.

Code examples

<img src="../../gallery/illustration.png" alt="description of the illustration">
Correct: will be interpreted as "description of the illustration, image" (example by Apple VoiceOver)

<img src="../../gallery/illustration.png" alt="">
Correct: will be interpreted as "image" (example by Apple VoiceOver)

<a href="blog.html"><img src="icon.png" alt="Blog Postings"></a>
Correct: will be interpreted as "link, image Blog Postings, image" (example by Apple VoiceOver)

<img src="../../gallery/illustration.png">
<img src="illustration.png">
False: will both be interpreted as "illustration.png, image" (example by Apple VoiceOver)

Visual example