Images

Accessibility Guidelines for Images

The following guidelines should be validated for accessibility compliance for all image content:

• Alternative Text
• Colour Contrast

Alternative Text

Provide "alt" attributes for all images.

For example: <img src="logo.jpg" alt="Company Logo" />

WCAG Guidelines referenced:

• Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • 1.1.1 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)
    • 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.

For content images, make the "alt" attribute a brief description of the content.

For example:

<img src="doctor.jpg" alt="Doctor examining a child patient" />

or

<img src="sale.jpg" alt="20% sale till November 2011" />

WCAG Guidelines referenced:

• Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
  • 1.4.5 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)
    
    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.
    
    Note: Logotypes (text that is part of a logo or brand name) are considered essential.

For image links, use the "alt" to briefly describe the link destination.

For example: <img src="next.jpg" alt="Next page of the Web Accessibility article" />

WCAG Guidelines referenced:

• Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • 1.1.1 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)
• Guideline 2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
  • 2.4.4 Link Purpose (In Context): The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general. (Level A)

For purely decorative images, it is not necessary to add a descriptive "alt" tag. Use an empty "alt" tag instead.

For example: <img src="line.jpg" alt="" />

WCAG Guidelines referenced:

• Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • 1.1.1 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)
    • 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.

 

 

Colour Contrast

Ensure that text colour has an acceptable colour contrast ratio.

For most colours, 4.5:1 is an acceptable ratio, however for the red/orange colour range, a 7:1 ratio is recommended. There are various colour contrast checking tools available online (i.e. Colour Contrast Check by snook.ca).

WCAG Guidelines referenced:

• Guideline 1.4 Distinguishable: Make it easier for users to see and hear content including separating foreground from background.
  • 1.4.3 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.