The next attribute we’ll look at is alt. Its value is supposed to be a textual description of the image, for use in situations where the image cannot be seen/displayed or takes a long time to render because of a slow internet connection. For example, our above code could be modified like so:
The easiest way to test your alt text is to purposely misspell your filename. If for example our image name was spelled dinosooooor.jpg, the browser wouldn’t display the image, and would display the alt text instead:
You are viewing: Which Image Would Best Enhance The Paragraph
So, why would you ever see or need alt text? It can come in handy for a number of reasons:
- The user is visually impaired, and is using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users.
- As described above, the spelling of the file or path name might be wrong.
- The browser doesn’t support the image type. Some people still use text-only browsers, such as Lynx, which displays the alt text of images.
- You may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries.
- Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones, and in countries where bandwidth is limited or expensive.
Read more : Which Acrobatic Family Gambled With Their Lives
What exactly should you write inside your alt attribute? It depends on why the image is there in the first place. In other words, what you lose if your image doesn’t show up:
- Decoration. You should use CSS background images for decorative images, but if you must use HTML, add a blank alt=””. If the image isn’t part of the content, a screen reader shouldn’t waste time reading it.
- Content. If your image provides significant information, provide the same information in a brief alt text – or even better, in the main text which everybody can see. Don’t write redundant alt text. How annoying would it be for a sighted user if all paragraphs were written twice in the main content? If the image is described adequately by the main text body, you can just use alt=””.
- Link. If you put an image inside <a> tags, to turn an image into a link, you still must provide accessible link text. In such cases you may, either, write it inside the same <a> element, or inside the image’s alt attribute – whichever works best in your case.
- Text. You should not put your text into images. If your main heading needs a drop shadow, for example, use CSS for that rather than putting the text into an image. However, If you really can’t avoid doing this, you should supply the text inside the alt attribute.
Essentially, the key is to deliver a usable experience, even when the images can’t be seen. This ensures all users are not missing any of the content. Try turning off images in your browser and see how things look. You’ll soon realize how helpful alt text is if the image cannot be seen.
Source: https://t-tees.com
Category: WHICH
