Use Alternative Information
A blind or visually impaired person can use a screen reader to hear a description of the image. If the written content contains the information needed convey meaning a very simple description in the "Alt tag" will do. If not make sure your alt tag information is adequate to supply meaning that would be missed in it's absence.
Applicable Guidelines from WCAG 2.0
Provide text alternatives for non-text content
Don’t use images of text
Alt Tags add a SEO Boost
“Alt tag” is shorthand for the contents of the alt attribute of an image on a web page. Alt tags provide a text alternative for an image or object on your page. They are important for users who visually impaired, but they can also impact how robots like Google’s “image search” function indexes content — in that way they provide an additional SEO (Search Engine Optimization) boost. Google officially confirmed it mainly focuses on alt text when trying to understand what an image is about.
If You Add an Image - Add an Alt Attribute (tag)
Image with Important Information Not Otherwise Conveyed on the Page
When the user is assisted by a screen reader or the image is missing/broken or the webpage is being searched there needs to be an Alt tag/text that conveys the meaning or purpose of that image to the web page content. Giving a "text alternative" meets these needs.
It should be accurate and succinct but not redundant to the word already provided and avoid use phrases like "image of ..." or "graphic of ..." to describe the image.
Non-Informative and Decorative Images
A decorative or non-informative image will need to have
alt=”” appear in the
<img /> tag (this is called an “null alt tag” – note there is no space between the quotes*) a screen reader will skip this image. If there is no "alt" tag a screen reader will read the name of the file, not helpful and possibly annoying. Choosing an image should include the process of determining the Alt tag information and caption and possibly a title and credit.
Some WYSIWYG (some versions of Microsoft Office) editors will require something in the input box for alt text (may be called title) to generate the alt attribute in the code. So in that case you may have to put in a space. Some screen readers will work with this, others may not. Try it and then look at your code, test with code sniffer. If you got it right you will get a warning form code sniffer that there is a blank alt tag.
Decorative Images do need an ALT Tag, but the ALT tag can be no-space (ALT="", best for Web) or a blank space (ALT=" " best for Microsoft Office or a CMS). Both are valid but produce slightly different results across environments.
The following code displays an image of an exclamation point. Depending on the type of screen reader, a user would hear the equivalent of “Graphic: Important”.
<img src="exclamation.gif" alt="Important">
When using an image for a button, the alternative text should describe what the button will do when activated, such as "Search", "Submit", "Register", "Place order", etc. For an image button on a site search form, the following code conveys the information to a screen reader:
<input type="image" alt="Search">
Also Consider Title Attributes
Image title provides additional information and follows the rules of a regular title: it should be relevant, short, catchy, and concise (a title “offers advisory information about the element for which it is set“). In the browsers, FireFox and Opera title pops up when you hover over an image.
The accessibility of an infographic has a direct impact on its potential reach. This increasingly popular method of information sharing can be inaccessible to people with a disability. Creating an accessible infographic will not only make it easier for someone with a disability to view the information presented, it can also increase the ability for your content to be indexed by search engines. If you must use an image at least provide a brief description in the alt attribute and provide more information in context, either as a caption or in the text area adjacent to or below the image.
Images that contain animation can be used as long as they don’t cause the screen to flash more than 3 times per second. Otherwise they can trigger seizures in some individuals.
Slideshows and carousels are popular on modern sites, but self-animating carousels are inaccessible. Additionally, all users, regardless of ability, prefer the option to control the flow and navigation of rotating images. Best to include previous and next controls as well as with “play” and “pause” buttons for accessibility.