Image alt text and title text
Download as DOCX, PDF0 likes60 views
Alt text provides a text description of an image for situations where the image cannot be displayed, such as for users with visual impairments. It should include keywords relevant to the page and describe the purpose or content of the image. Descriptive but not excessively long alt text is best for accessibility and search engines. Images solely for design purposes should have empty alt text or be implemented via CSS instead of HTML.
Image alt text and title text
- 1. ALT TEXT AND TITLE TEXT 1. The alt text(or alttags) isaddedto an image sothere will be adescriptive textwhenthe image for whateverreasoncan’tbe displayedtothe visitor. a. “In situationswhere the image isnotavailable tothe reader,perhaps becausetheyhave turnedoff imagesintheirwebbrowserorare usinga screenreaderdue toa visual impairment,the alternativetextensuresthatnoinformationorfunctionalityislost.” 2. Make sure the alt textincludesthe SEOkeywordforthatpage and relatesto/ describesthe image. 3. Thisis a complete HTML image tag: a. <img src=“image.jpg”alt=“image description”title=“imagetooltip”> 4. Example:Soif youhave an image that’susedas a buttonto buy productX, the alt textwould say: “buttonto buyproduct X”. a. Buy productX nowfor $19!”. b. 5. If you have imagesinyourdesignthatare purelythere fordesignreasons,you’redoingitwrong, as those imagesshouldbe inyourCSSand not inyour HTML. If you reallycan’tchange it,give it an emptyaltattribute a. <img src="image.png"alt=""> Optimal format The best format for alt text is sufficiently descriptive, but doesn't contain any spammy attempts at keyword stuffing. If you can close your eyes, have someone read the alt text to you, and imagine a reasonably accurate version of the image, you're on the right track.
- 2. Let's look at a few examples of alt text for this image of a delicious-looking stack of blueberry pancakes: Okay:<img src="pancakes.png" alt="pancakes"> This alt text is only "okay" because it's not very descriptive. Yes, this is an image of a stack of pancakes. But, there's more to be said about this image. Better: <img src="pancakes.png" alt="Stack of blueberry pancakes with powdered sugar"> This alt text is a better alternative because it is far more descriptive of what's in the image. This isn't just a stack of "pancakes" (as the first alt text example demonstrated); it's a stack of blueberry pancakes with a dusting of powdered sugar! Not recommended: <img src="pancakes.png" alt=""> or <img src="pancakes.png" alt="pancake pancakes pan cake hotcakes hotcake breakfast food best breakfast top breakfasts breakfast recipes pancake recipe"> Neither of these examples are recommended. The first line of code actually doesn't contain any alt text at all (notice the quotes are empty), while the second example demonstrates keyword stuffing in alt text.