Overview
Images are used to support understanding, reinforce key ideas, and provide visual context. They should be clear, readable at their default size, accessible to all learners, and integrated into the layout in a way that prioritizes perceivability and instructional value over visual aesthetics.
Common Pitfalls to Avoid
- Using images as containers for instructional text
- Letting images carry the primary instructional meaning
- Misusing long descriptions as a workaround for poor design
- Treating image captions as accessibility alternatives
- Overusing contextual or decorative images
- Relying on zoom or click‑to‑enlarge to make images perceivable
- Relying on zoom or click-to-enlarge for images to be perceivable
- Placing images with readable text or fine details inside cards
- Resizing instructional images too small (e.g., w‑25, w‑50, w‑75)
- Using low‑contrast or low‑quality images
CDD Tag
<image></image>
Guidelines
Do
ID
Prefer real text over text heavy images
If the content is primarily text (such as lists, tables, or explanations), present it as real text and not embedded in an image. Use simple supporting visuals alongside text, tables, or bullet lists as needed.
ID
Use images to show things text cannot easily convey
Use images to communicate visual structure, spatial relationships, or comparisons. Do not use images as containers for text or data tables.
ID
Provide text alternatives for images
When an image conveys instructional meaning, an equivalent text alternative must be provided so the information is accessible to all learners.
- Alt text (required): Alt text briefly communicates the instructional meaning of an image. It should describe what learners need to understand, not every visual detail. Alt text is required for all non‑decorative images and is sufficient when the image’s instructional meaning is conveyed concisely (~150 characters) through the alt text and surrounding body text, even if the image itself appears visually complex.
- Long descriptions (used when needed): Long descriptions are used only when an image conveys instructional meaning that cannot be adequately communicated through brief alt text and surrounding text. This includes cases where learners must understand detailed relationships, processes, or multiple data points. Visual complexity alone does not require a long description.
ID
Ensure sufficient color contrast for images with embedded text
Any image that includes text must meet WCAG color contrast requirements so the text is clearly legible for all learners. Verify contrast using the WebAIM Contrast Checker.
ID
Do use high‑quality, clear images
Images must be sharp, well‑resolutioned, and free from blurring or pixelation. If an image includes text, the text must be fully legible at normal viewing size and when zoomed.
Production
Optimize large images for performance
Images larger than ~400 KB should be optimized to reduce file size and improve page load performance, especially for learners on slower internet connections. Use a web‑optimized format and compression method that preserves visual clarity and readability. (TinyPNG can be used to convert images to WebP).
Production
Resize images at the source when large display is unnecessary
If an image does not need to appear large in any context, resize it before upload rather than relying on CSS size classes. Source resizing ensures consistent, predictable sizing across layouts and devices. MS Paint can be used to resize images.
Do Not
ID
Use long descriptions as a substitute for instructional content
Long descriptions should not compensate for images that carry most or all instructional meaning. When an image functions as primary instruction (such as a dense infographic or table), the instructional content should be written in the body text, with the image used as a supporting visual.
ID
Use image captions to meet accessibility requirements
Image captions are not a substitute for alt text or long descriptions and do not satisfy required text alternatives for images with instructional meaning. Captions are optional, visible text used to provide brief context, labels (for example, Figure 1.4 for reference in surrounding text), or source citations. Aim for ~125 – 150 characters.
ID
Overuse contextual or decorative images
Images that provide context or orientation without conveying instructional meaning should be used selectively and in balance with sufficient instructional text, not as primary page content.
ID
Production
Treat accessibility accommodations as the baseline experience
Core instructional images must be usable at default viewing size without requiring zooming, resizing, or visual adjustment. Accessibility features should enhance access for learners who need them, not compensate for unreadable or undersized design choices. In practice, avoid the following:
- Placing images with readable text or fine details inside cards: Cards display images at reduced sizes, which can make text or detailed visuals difficult or impossible to perceive without zooming or resizing.
- Resizing images (w-25, w-50,w-75) when they contain instructional content: Shrinking images with text or fine details can force learners to rely on zoom or visual adjustments. Image readability and perceivability should take priority over layout or page length.
Production
Use click‑to‑enlarge when it adds no value
Click‑to‑enlarge should only be used when it reveals a clearly larger and more readable version of an image. If the enlarged view does not meaningfully improve visibility, the interaction should not be used.