Accessibility Checklist: Images
Bobby Bailey
How to Ensure Images Are Accessible for Everyone
Images play a key role in web content, but without proper accessibility, they can exclude people using screen readers or those with low vision. Use this checklist to ensure images are accessible to all.
10-Point Accessible Images Checklist
Number one: All meaningful images have alt text
Use concise and descriptive alt attributes for images that convey information. Avoid using "image of" or "picture of" unless necessary for context.
Number two: Decorative images are hidden from assistive technology
Use alt="" on purely decorative images. Background images should not convey critical content.
Number three: Alt text provides useful context
Describe the purpose of the image, not just what it looks like. If the image contains text, ensure that text is in the alt description.
Number four: Complex images have detailed descriptions
Use aria-describedby or a <figcaption> for charts, infographics, or diagrams. Provide a full explanation elsewhere on the page if needed.
Number five: Images used as links describe the action
Alt text should explain where the link goes, e.g., "View pricing page" instead of "arrow icon." Avoid vague descriptions like "click here."
Number six: Icons are labeled for screen readers
Use aria-label, aria-hidden="true", or an alt attribute depending on the purpose. Ensure icon fonts and SVGs are accessible.
Number seven: Text is not embedded in images
Use real text instead of images of text whenever possible. If an image must contain text, provide an equivalent description in the alt attribute or nearby content.
Number eight: Ensure images do not cause seizures
Avoid flashing images or animations that blink more than three times per second. Provide controls to pause or stop animations.
Number nine: Responsive images adjust to different devices
Ensure images scale properly for mobile and desktop screens. Use srcset or <picture> elements for adaptive image loading.
Number ten: Test images with assistive technology
Use a screen reader to verify how alt text is read aloud. Check images in high contrast mode and with zoom settings enabled.