Accessible Image Guidelines
Accessible images allow users who use assistive technologies equal access to information provided by an image. Always test with screen readers to confirm alt text clarity and context.
Purpose & Placement
- Use images only when they add meaning or context; never as the only way to present important information.
- Place images before or after full sentences instead of inside headings or mid-sentence.
- Avoid background images for meaningful content.
Alt Text Essentials
- Keep it short, clear, and purposeful (usually 1–2 sentences).
- Explain the image’s function or relevance, not just its appearance.
- Don’t use phrases like “image of”; screen readers announce images automatically.
- Use proper grammar (e.g., capitalize the first word, end with a period), as this improves how screen readers convey the alt text.
- If an image is decorative or redundant, mark it as decorative for alt text.
Special Cases
- Functional images (e.g., buttons, icons, linked graphics): alt text should describe the action (e.g., “Search site,” “Submit form”).
- Complex visuals (e.g., charts, diagrams, infographics): pair short alt text with a longer description or linked text explanation.
- Groups or image maps: provide overall context plus descriptive labels for each part.
Text in Images
- Prefer HTML/CSS text over embedding text in images for better accessibility and responsiveness.
- If text must appear in an image (e.g., logo, flyer), ensure the alt text communicates the full text content.
How Alt Text is Added
For the Web: When placing an image on a web page with the image block, an alt text field exists in the image settings area. If uploading media to the media library, this data can be included when adding the image. Note that once alt text is added, it accompanies the image each time that it is placed.
For Documents: Right-click the image, choose “Edit Alt Text…”, and type a short, meaningful description of the image’s content and purpose. If the image is purely decorative, check “Mark as decorative.” Keep your descriptions clear and concise—usually one or two sentences.
For Canvas Pages: When you add an image to a Canvas page, in the Rich Content Editor, click the Image icon and select/upload your image. Once the image is inserted, click on it. A small menu appears, choose “Image Options.” In the Alt Text field, type a brief description of the image’s content and purpose. Example: “Student studying in the library with laptop open.” If the image is purely decorative, select “Decorative Image.”