img alt attribute
The alt attribute on the img element:
- allows you to add alternative text for the embedded image;
- this text should serve as a viable replacement for the image (the alt text and the image should convey the same meaning)
- this text will display when the image cannot be displayed for various reasons:
- the name of the image is wrong
- the path of the image is wrong
- the image is corrupted
- loading images option is disabled in browser
- any other error that leads to the failure of the user agents to render the image in browser
- alt is a specific attribute → can be applied ONLY on the next HTML5 elements: area, img, input
- is a required attribute (an alt text must be provided on each image)
Observations:
- alt absent: alt attribute is always required except when it can't be provided
- alt present, value empty string: allowed when the image is supplemental or decorative
- alt present, value text: in most of the cases, and the image is important for its context
all these aspects are presented in the video tutorial below
Warning
The same image can be embedded multiple times in the same page and have different alternative text each time.
The image is part of the context, it is representative for the context, it is correlated with the context → different contexts can lead to different alt text for the same image.
Examples
| <img | attribute | = | "value(s)" | > | Examples | ||
|---|---|---|---|---|---|---|---|
| 1. | alt | = | "", text | < src="images/puppy.jpg" alt="a grey puppy standing in the middle of a room"> |
Video demonstration img alt attribute
HTML5 img alt attribute Tutorial
| min | video details |
|---|---|
| 00:08 | the alt attribute on img |
| 00:08 | the alt attribute on img allows you to add text that will display in the place of the image when that embedded image cannot be displayed |
| 00:13 | this alternative text should serve as a viable replacement for the image and obviously should convey the same meaning |
| 00:19 | alt attribute is always required except when it can't be provided: e.g. the case of an interface that allows users to upload pictures and an alternative text cannot be asked to them... |
| 00:25 | next we will present few cases when alt attribute is present and its value is: 1. "" (empty string) 2. alternative text |
| 00:34 | 1. alt="" empty string "" accepted when the image has a decorative role or it's supplemental |
| 00:36 | this image is supplemental, next to it we have its corresponding text → it's not useful supplying 2 times the same information |
| 00:50 | the image is decorative; it adds no extra information to our article |
| 00:58 | the alternative text could be 'sunset' which is also the title of the article → nothing new; |
| 01:07 | 2 times sunset..we can remove this value of the alt attribute → the empty string |
| 01:21 | 2. alt="corresponding alternative text" it's the most common case; the image is important to the context so an alternative text is necessary for your context to still have the same sense when the image is not displayed |
| 01:25 | for example this image has important content: if the image is not displayed, the users won't understand a thing |
| 01:39 | test: the image didn't display, the alt text is missing, displays only "You won't regret it!" → but nobody knows what the non-regret is about → a value for the alt attribute is necessary |
| 01:50 | the image didn't display; the alt text displays in its place, everything is clear |
| 02:02 | this image is important for the context, and it is highly discussed → a viable, alternative text should be provided and it is |
| 02:16 | the cup plate can also be presented |
| 02:24 | alt attribute must always be added to img tag, except when it can be provided. When added, accepts no value ("" empty string) if the image is decorative or supplemental, otherwise, when the image is important for its context, an alternative text should be supplied |