OzWiki

Making Images Accessible

You’re most likely here because you need to make sure the images you use in your web content are accessible to people with disabilities.

You might have a specific problem, like:

  • how to use alternate text in ALT attributes
  • when to use alternate text in ALT attributes
  • how to use images as links in an accessible way
  • how to make groups of images accessible
  • what role color contrast plays in making images accessible
  • when to use empty ALT attributes

Perhaps you need a comprehensive list of likely issues with the accessibility of images in web content – and how to address them. Or maybe you just want to ask a direct question and get a clear, expert response.

You’re in the right place.

OzWiki will tell you what you need to know to use images in an accessible way. The Images  section details 30 accessibility problems and how to address them, demonstrating compliance with 28 WCAG Level A success criteria, and 2 WCAG Level AA success criteria.

As a subscriber, you’ll also be able to request further or more detailed information relating to your specific situation.

See an example

Important information disappears with images disabled

Important information disappears with images disabled

CategoryImages
TopicImages disabled
WCAG SC 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:

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to WCAG 2.0 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 WCAG 2.0 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.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html

See more errors for this SC

LevelA
Technique(s)

G94: Providing short text alternative for non-text content that serves the same purpose and presents the same information as the non-text content

ImpactHigh

Error

With images disabled, various items disappear. These do not have a textual equivalent.

Incorrect Example(s)

Screenshot:Dropdown menu titled 'Research' with six sub-items
Screenshot:'Research' title of the dropdown disappears
Screenshot:Search bar with blue arrow to indicate submit button
Screenshot:Blue arrow disappears
Screenshot:Icon indicating document next to link 'Teen drinking law' and PDF icon next to 'Australian alcohol guidelines'
Screenshot:Both document icon and PDF icons disappear
Screenshot:Post-state of a coloured menu with images disabled. A red highlight box is used to indicate where the images are meant to be, but currently shows empty space.
Screenshot:Pre-state of a coloured menu with images disabled. A red highlight box overlays a set of arrows used against each menu option.  The highlight box is used to indicate what images are affected by having images disabled.
Screenshot:Pre-state of a social media section prior to having images disabled.  A red highlight box is used to indicate what images will be affected by images disabled, with the box overlaying over several icons used for social media.
Screenshot:Pre-state of a social media section prior to having images disabled.  A red highlight box is used to indicate what images will be affected by images disabled, with the box overlaying over several empty blank squares, where social media icons are meant to be shown

Solution

Ensure all content and functionality are visible when images are disabled.

Already a subscriber?

Log in!

Want access?

Subscribe!

OzWiki is an accessible resource that provides best known methods to achieve A & AA level design and interaction for web content in areas such as Audio, Video, Link, Captcha, Maps, Navigation and more. These outlined accessibility errors, examples and solutions help you become 508 compliant by demonstrating associated WCAG 2.0 success criteria and techniques.

Gain access to more detailed information on all OzWiki categories for only $39/month by purchasing a subscription today! You can cancel your subscription at any time.