Make Images Accessible

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

Perceivable

 

1.1.1 – Non-text Content

Provide text alternatives for non-text content

1.4.5 – Images of Text

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) 

Dr. Gorge Campbell of the Children’s Hospital Diabetes Center at UCSF examines a patient.

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 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.

Icon

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">

Button

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. 

Infographics

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.

Animations

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.