ivangdavila_image/accessibility.md

Accessibility for Images

Core Rule

• An image is not finished when it only looks good; it must also be understandable and usable in context.

Alt Text by Role

• Decorative image: use empty alt text (alt="") so assistive tech can skip it.
• Informative image: describe the content or takeaway briefly and specifically.
• Functional image: describe the action or destination, not just the pixels.
• Complex chart or diagram: alt text alone is not enough; provide nearby summary or structured explanation too.

Alt Text Rules

• Describe meaning and purpose, not every visible pixel.
• Do not start with "image of" or "picture of" unless that distinction matters.
• Keep it concise, but not so short that it loses the point.
• Captions and surrounding text can reduce what the alt text needs to repeat.
• If the surrounding copy already says the same thing, avoid redundant alt text.

Text Inside Images

• If the text is important, it should usually exist in real HTML or nearby copy too.
• Social images, banners, infographics, and screenshots often hide key meaning in pixels; duplicate the important message elsewhere when the medium allows.
• Tiny text that is readable in the editor but not in a preview is an accessibility failure even if the export dimensions are technically correct.

Charts, Diagrams, and Data Visuals

• Alt text should summarize the main takeaway, not list every bar or data point.
• If precise values matter, provide the values in nearby text or a data table.
• Colors alone should not carry the only distinction between categories or states.
• Thin lines, pale labels, and low-contrast legends disappear first when charts are resized.

Contrast and Overlays

• Text over photos often needs a deliberate overlay, blur, or crop change to stay readable.
• White text on a bright image and dark text on a muddy background both fail fast in previews.
• Overlays should improve readability without flattening the image so much that it loses meaning.

Icons and UI Imagery

• Icon-only controls still need accessible names outside the image itself.
• If an icon can be misread without a label, assume many users will misread it.
• Decorative icons do not need verbose alt text if adjacent text already carries the meaning.

Common Accessibility Traps

• Writing alt text that describes appearance but misses purpose.
• Repeating the exact caption inside alt text.
• Using images to carry headings, buttons, or instructions that should be live text.
• Publishing charts with no summary of the actual insight.
• Putting critical text near image edges where crops, previews, or zoom reduce legibility.