Michael Gaigg: Über UI/UX Design

Best Practices for accessible Images

Posted by Michael Gaigg

Graphics can be of great benefit to the accessibility of a Web page by providing

• Illustrations
• Icons
• Animations
• other visual cues that aid comprehension for sighted individuals

When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Basic Rules

• Do not use color alone to convey meaning
• Choose contrast so that text is easily distinguishable from the background
• Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
• When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
• Use empty alt text for decorative, transparent, spacer, and redundant images
• Try to limit the amount of text in graphics
• Do not use effects that flicker or produce a strobe-like effect
• Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)

Best Practices

Level 1

Level 2

Level 3

References

• Arditi, Aries PhD. Effective Color Contrast. http://www.lighthouse.org/color_contrast.htm
• Ion, P., Miner, R. (editors); Mathematical Markup Language. http://www.w3.org/TR/REC-MathML/
• WebAIM; Creating Accessible Images. http://webaim.org/techniques/images/