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
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.
With images disabled, various items disappear. These do not have a textual equivalent.
Incorrect Example(s)
Example 1
Example 2
Dropdown menu titled 'Research' with six sub-items
Example 3
'Research' title of the dropdown disappears
Example 4
Example 5
Search bar with blue arrow to indicate submit button
Example 6
Blue arrow disappears
Example 7
Example 8
Icon indicating document next to link 'Teen drinking law' and PDF icon next to 'Australian alcohol guidelines'
Example 9
Both document icon and PDF icons disappear
10. Images disabled
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.
11. Images visible
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.
12. Images visible
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.
13. Images disabled
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.
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.
