Alt tags

Alt text (alternative text), are used within an HTML code to describe the appearance and function of an image on a page.

Alt Tag Uses

Adding alt tags to images* is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be reading an alt tag to better understand an on-page image.
Alt text will be displayed in place of an image if an image file cannot be loaded.
Alt text provides better image context / descriptions to search engine crawlers, helping them to index an image properly.

*Any png, jpg, jpeg, gif, svg, webp uploaded is defined as an image.

Optimal Alt Text Fomatting

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.

Not-so-good alt tag = dog

This alt text can be better because it's not very descriptive. Yes, this is an image of a dog, but there's more to be said about this image.

Better alt tag = dog running

This alt text is better. Yes, it is an image of a dog running, but there's still more to be said about this image.

Ideal alt tag = Border Collie running on beach

This alt text is the ideal alternative because it is far more descriptive of what's in the image. This isn't just a dog or a dog running; it's a Border Collie running on a beach.

Not-so-good alt tag = hammer and nail

Better alt tag = hammer nail into a roof

Best alt tag = hammer nail into a roof shingle

Alt Text Tips

Describe the image as specifically as possible. Alt text is, first and foremost, designed to provide text explanations of images for users who are unable to see them.
Keep it (relatively) short. The most popular screen readers cut off alt text at around 125 characters, so it's advisable to keep it to that character count or less.
Use your keywords. Alt text provides another opportunity to include targeted keywords on a page, and thus another opportunity to signal to search engines that the page is highly relevant to a particular search query. While the first priority should be describing and providing context to the image, if it makes sense to do so, include a keyword and/or name of business in the alt text of at least one image on the page.
Avoid keyword stuffing. Google won't "dock points" for poorly written alt text, but there could be consequences if the alt text is stuffed with too many or irrelevant keywords. Again, focus on writing descriptive alt text that provides context to the image and, if possible, includes a targeted keyword, and leave it at that.
Don't include "image of," "picture of," etc. in alt text. It's already assumed your alt text is referring to an image, so there's no need to reiterate it.

When to Use an Alt Tag

Image Type	Alt Text (Y/N)
Client Logo*	Yes
Call Out / In-Line Images	Yes
Slider	Yes
Gallery Images	Yes
Row / Container Background Images	No
Button	No
Badges*	Yes
Shields*	Yes
Icons*	No
Social Icons	Yes	When manually added
Pay Icons	Yes	When manually added

*Examples

Client Logos

Enter NOB logo as alt tag for the Hibu client logo. The client logo is the only instance when you add "logo" to the alt text.

Badges, Shields, Non-Client Logos (usually associated with a row directly above the footer or on contact us page)

Transcribe whatever is written in graphic for alt text

The National Trial Lawyers Top 100 Trial Lawyers

Icons (SVG, png, and, on occasion, jpg, gif, webp)