2 min readAn original planning guide. Use the linked primary documentation for platform details and the supported procedure for your environment.
Classify the image's purpose
Identify informative, functional, decorative, complex, and text-containing images in their actual page context.
Write the needed equivalent
Describe information or function that would otherwise be missing. For purely decorative images, use the appropriate empty alternative.
Review neighboring content
Avoid unnecessarily repeating an adjacent heading or caption. Provide a longer text explanation for complex information when a short alternative cannot convey it.
Check implementation
Inspect the rendered markup and review the reading experience with appropriate tools. Verify linked images and image buttons have a useful accessible purpose.
Worked scenario
See the plan in practice.
A magnifying-glass button performs search, so its accessible name should explain the action instead of merely describing the shape.
Review your result
Your acceptance checklist
Purpose classified- Alternatives useful
- Markup checked
Use these checks to identify gaps in your image-alternative review. Assign an owner to any unresolved item before the next dependent step.
The terms behind the task
- Alt textA text alternative that communicates an image's information or function when the image is not perceived.
- AccessibilityThe practice of making products usable by people with a broad range of abilities and assistive technologies.
- HTMLHyperText Markup Language expresses the structure and meaning of web content with elements and attributes.
Primary references
For the underlying concepts and current platform details:
