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 to convey meaning, a very simple description in the image or perhaps even a null alt attribute will do. If not make sure your alt tag information or surrounding body text is adequate to supply meaning that would be missed in its absence.

Applicable guidelines from WCAG 2.0

Alt attributes add an SEO boost

“Alt tag” is shorthand for the contents of the alt attribute of an image on a web page. Alt attributes provide a text alternative for an image or object on your page. They are important for users who are 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 attributes when trying to understand what an image is about. If you add an image - add an alt attribute.

If you add an image - add an alt attribute (tag) 

Example of a UCSF image with a descriptive "Alt" tag that reads "Dr. George Campbell of the Children’s Hospital Diabetes Center at UCSF examines a patient."

Every image you embed in your website must include an alt attribute. Not only is this a requirement of the HTML standard, but it also ensures that image content, or the ability to skip it, is available for screen readers. The rule applies whether the image conveys important information or is purely decorative. 

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 web page 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 words already provided.  Avoid use phrases like "image of ..." or "graphic of ..." to describe the image. Many screen readers prefer brevity when encountering images with using text-to-speech assistive technology.

Decorative images 

A decorative or non-informative image will need to have alt=””in the <img /> tag (this is called a “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 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 try to see the editor allows a space or has an option to "mark as decorative". 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 from 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 The Web) or a blank space (ALT=" " best for Microsoft Office or a CMS). Both are valid but produce slightly different results across environments.

For more information, read WebAIM's article on Alternative Text, especially the sections on functional images and decorative images.

Screen shots for "How To" documentation

Convey everything via text on the page (the “how to” instructions), organized by headings, etc. Any screenshots should be considered a bonus (for those who do benefit from a visual explanation), not to be relied on for the explanations/instructions.

Best practice for the alt text is to keep it simple since the text on the page does the heavy lifting, for example “screenshot of [PROCESS] as explained on this page.”

This Standards for Writing Accessibly article from A List Apart suggests using behavioral action language such as "choose" or "select" instead of device-agnostic words like "click" or "tap". See the heading "Describe the Action, Not the Behavior".

Resources

• Alt Decision Tree from the W3C describes how to use the alt attribute of the <img>& element in various situations such as when the image is functional or decorative.
• Alternative Text article from WebAIM using a picture of George Washington to demonstrate how context is everything in how you write your image's alt text.