Should the 'alt' attribute on an HTML image describe the image, or the meaning of the image?

I have a report with several sections. Many of these sections have a paragraph at the top that describes the purp开发者_如何转开发ose of the section, and these paragraphs are all styled with the 'i'-in-a-circle (information) icon at the top left of the paragraph.

For the 'alt' attribute of this image, should I use "Information icon", or "Report Section Description"? I am more incline to go with the first, and maybe use something else directly on the paragraph to more explicitly describe it, maybe a title attribute or something.

the Alt stands for alternative, so if someone say visually impaired were to browse a site using the reader, alternative would describe for them what they are missing visually.

In your case I would go for a short tag that doesn't describe the image. As a screen reader user I prefer alt tags that are short and to the point. I don't really care what the icon looks like, what color it is, what it's shape is etc, all I care about is that this is an informational icon so what follows is not data. If you need more detail about an image use the long description attribute. For example if you were displaying a chart I would want an alt tag of "chart of the last 10 stock market days". The long description of the image could then be quite detailed, something like "On day one the market went up 200 points, on day two it went down by 100 points, on day three it fluctuated in a range of 300 points but closed about where it opened" etc.

The alt tag should be descriptive enough to suggest what the image is if the image is not available when the user visits the page. I have seen image alt text such as "image" which means nothing but I have seen others with a long description "image to show the relationship between the game and quiz entities"

I personally would go with the longer more descriptive text

I'd go with this solution because the image is just a UI element which declares something about the paragraph.

http://jsfiddle.net/jphellemons/QY7ng/

CSS:

p{
    background-image: url('http://images.findicons.com/files/icons/2146/realistik_reloaded/128/error.png');
    background-position: top -128px;
    background-repeat: no-repeat;
    padding-left: 128px;
}

you can use this pseudo class if it is only the first paragraph, otherwise work with a class :first-child http://www.w3schools.com/cssref/sel_firstchild.asp

EDIT: to answer the question. the alt attribute of an image should describe the image. But in this case you do not need an <img ... /> tag since it is just to make it more clear for visible people that the paragraph contains meta info

Alt icon is generally used when image is not displayed on the users screen. I don't get why you want to have it on paragraph. From a SEO perspective Information icon is more suitable.