Skip to end of metadata
Go to start of metadata

Images are a large part of what makes web content appealing, approachable, and useful. However, not everybody can see them or see them well enough.  Other people find them distracting.  Others may turn them off to save on their data plans, or find that they did not load due to low bandwidth.

You need to provide text that serves the same function as the image, most often by using the "alt" (for "alternative text") attribute of an IMAGE tag.  Screen readers will read that text instead of saying the unhelpful "image" or the file name.  Browsers will display that text for images that are not loaded.

Dos and Don'ts

Use short and clear text that replaces the image.

Alt text is meant to serve as a replacement for the image, not a description of it.  A good test is to read aloud the text with the alt text included.  Does it make sense? Is it too long and wordy?  Never use the alt attribute for "keyword stuffing" or other dubious SEO practices.

NOTE: An image can be used to mean different things in different places.  You may need different alternative text for the same image depending on the context.

imageWrongRight
alt="picture of the seal of the Commonwealth of Massachusetts"

alt="Commonwealth of Massachusetts"
alt="seal of the Commonwealth of Massachusetts"
alt="seal"

alt="click here to learn more about the Community Compact Cabinet"
alt="Community Compact Cabinet"
alt="a man's hand adjusting a home heating control device"alt="manual thermostat"
alt="Turn the outer ring with your hand to adjust the setting"
alt=""


Don't provide text for decorative images

Images used to enhance the aesthetics of the page, but have no informational value, should have the null value: alt=""  Screen readers will skip over them instead of reading "blank" (for a space) or the file name.

 Tip: If you are using a stock photograph, chances are that it is decorative.

imageWrongRight
alt="Photo of a family taken outside during fall."
alt="  "
alt="null"
alt=''"

alt="computer icon"
alt="  "
alt="null"

alt=''"
alt="blue horizontal rule"alt=''"

Provide more description for information-rich images

Some pictures are worth a thousand words, or at least more words than you should put in an alt attribute.  In those cases, use very brief text for the alt, and then use another method to provide further description.

Describe the information in the page content:

Sometimes an image is providing an illustration of data already discussed.  The alt text should make it easy to see that it is related to that information.

exampletext

The chart is provided to help visualize the information in the text.

alt="Bar chart showing Stabilization Fund balances since 1992, as described above"

Use a caption

Provide more information in a caption for the picture.  This makes it available for all users.

exampletext

A caption associated with a photograph provides information in text that is illustrated in the picture

alt="yurt interior"

caption: "Inside Otter River Yurt: Yurts are wooden framed, canvas-covered structures. With furniture and electricty, they offer an accessible camping experience for campers of all abilitties"

Point to a description on another page.

You can use the "longdesc" attribute to enter a URL to another resource with full information, which screen readers can present to users.  Since others may need that information, too, it might be best to provide a visible link to it as well.

exampletext

A complete text description of the chart on the same page would distract from the key point, which is just one data element in the chart. It uses the longdesc attribute and a link under the image to point to a full description on another page.

alt="Bar chart showing Stabilization Fund balances of states" longdesc="fisc_stabilization-text.html"

<a href="fisc_stabilization-text.html">Detailed description of Stabilization Fund Balances chart</a>

Avoid using pictures of text

When you put your textual content in an image, you are making it invisible to screen readers and search engines.  Unlike text, it cannot be magnified clearly.

  • Don't use pictures of text just to achieve a visual effect.  Use styles instead.
  • Don't use pictures of text that can be rendered in HTML, such as a data table. 
imageWrongRight
no text

<h3>Most Requested</h3>
style: text-shadow
: 2px 2px 1px #000;

img="chart.jpg" alt="Massachusetts Household Heating"

<table>

<caption>Massachusetts Household Heating</caption>

<tr>
<th scope="col">Fuel Type</th>
<th scope="col"># of Households</th>
<th scope="col">%</th>
</tr>

<tr>
<th scope="row">utility gas</th>
<td>1,241,379</td>
<td>49.1%</td>
</tr>

etc.

 

When you do use pictures of text:

  • Include any text in the image in the alt text, unless it is repeating text already in the content.
  • Images used as buttons or links must have alt text.  Be sure the alt text is exactly the same as the text shown in the image.
  • Be sure there is sufficient color contrast between the text and the background.
imageWrongRight
<h1>One Care: MassHealth plus Medicare</h1>
img alt="One Care: MassHealth + Medicare, Bringing your care together"
<h1>One Care: MassHealth plus Medicare</h1>
img alt="Bringing your care together"

alt=""

alt="Informed MA"

alt="Informed Massachusetts portal"

alt="Informed Massachusetts"

alt=""

alt="MassGIC on Twitter"

alt="twitter link"

alt="Follow us on Twitter! @MassGIC"

alt="Send this email"

alt="submit"

alt="Send"

Avoid the use of animated GIFs

Avoid the use of animated GIFs because there are no browser controls for stopping, starting, or replaying them.  Certain types of motion can trigger epileptic seizures.  If you do use animated GIFs:

  • There must be less than 5 seconds of motion.
  • There must be no more than 3 "flashes" per second.
  • Don't use looping in animated GIFs

It's an art - learn more

Text alternatives for images, by 4 Syllables
links from there:

Writing text alternatives for maps

CMS tips

The Image Content Item has all of the elements you need to use images accessibly.

Caption:

Use for text that will display below the image.  You should also have very brief alt text.

Decorative Image

Use the check box for "Decorative Image (no alt text)" to indicate when an image has no informational value.

Image ALT text

Use the "Image ALT text (required UNLESS the decorative checkbox above is selected):" field to provide alternative text for the image.

Re-use

If you are re-using an image that is already in the CMS, you can create a new Image content item to provide alt text and/or a caption that is different than the original use.

 

Standards

WCAG2 1.1.1 (A) Non-text Content

"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

  • "Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
  • "Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
  • "Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • "Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • "CAPTCHA: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • "Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology."

Sufficient techniques:

Common failures:

WCAG2 1.4.3 (AA) Contrast (Minimum)

"The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

  • "Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
  • "Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • "Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement."

Sufficient techniques:

Common failures:

WCAG2 1.4.5 (AA) Images of Text

"If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

"If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

  • "Customizable: The image of text can be visually customized to the user's requirements;
  • "Essential: A particular presentation of text is essential to the information being conveyed."

Sufficient technique:

WCAG2 1.4.6 (AAA) Contrast (Enhanced)

"The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

  • "Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
  • "Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
  • "Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement."

Sufficient techniques:

Common failures:

 

WCAG2 2.2.2 (A) Pause, Stop, Hide

"For moving, blinking, scrolling, or auto-updating information, all of the following are true: (Level A)

  • "Moving, blinking, scrolling: For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
  • "Auto-updating: For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential."

Sufficient techniques:

WCAG2 2.3.1 (A) Three Flashes or Below Threshold

"Web pages do not contain anything that flashes more than three times in any one second period, or the flash is below the general flash and red flash thresholds. (Level A)"

Sufficient techniques:

WCAG2 2.3.2 (AAA) Three Flashes

"Web pages do not contain anything that flashes more than three times in any one second period. (Level AAA)"

Sufficient techniques:

 

  • No labels