Alt text has two closely related jobs in HTML. The i element marks words that should be interpreted differently from ordinary prose, such as titles, technical terms, foreign phrases, or thoughts. The alt attribute supplies a short replacement description for an image when the image cannot be seen or loaded. section 2.12 section 6.1
Use the appropriate form for the job:
- Write <i>text</i> when the text has an alternative role or voice. Browsers usually display it in italics, but i is not the same as em: em adds emphasis, while i marks a different interpretation. section 2.12
- Add an alt attribute to every img element. Describe the image with a word or short phrase that can stand in for it and help screen-reader or Braille users understand it. section 6.1
- Use alt="" for decorative or nonessential images so assistive technology can skip them without losing page validity. section 6.1
A descriptive image
An image can identify both its file and its meaning: <img src="/images/atomic-logo.png" alt="Atomic Web Design logo" title="Logo for Atomic Web Design">. section 6.1
<img
src=”/images/atomic-logo.png” #1
alt=”Atomic Web Design logo” #2
title=”Logo for Atomic Web Design”> #3
<span>Atomic Web Design</span>
Inspect the complete image example and compare the file location, alternative description, and optional tooltip. section 6.1
