The task and original case
Audit image alternatives according to each image's purpose. The supplied decorative flourish, informative diagram and linked image need different treatments. Your portfolio should explain those choices in page context, rather than applying one repeated description to every asset.
| Case element | Value or requirement |
|---|---|
| Inputs | Three images: decorative flourish, an informative process diagram, and a linked image acting as a button. |
| Build | An image-alternative audit with reasoning for every treatment. |
This is an original invented exercise. It is independent practice, with no employer assessment or open-vacancy claim. Download the inputs, attempt your own result, then open the separate answer key.
Data and worked inputs
Build a result another person can follow
For each image, record where it appears, what nearby text already communicates and whether it is functional. The decorative flourish adds no information needed to understand the page. The process diagram communicates steps or relationships. The linked image serves as a control leading to a destination.
W3C's images tutorial distinguishes decorative, informative and functional purposes. Use an empty alt value for the purely decorative image. Give the diagram an alternative conveying its essential message, with nearby fuller text for details it cannot reasonably fit. For the linked image, identify the action or destination; a description of its colors or shape alone does not explain the control.
Sources[1]
Check the worked result
A possible treatment is alt="" for the flourish, a concise process summary for the diagram and an action-oriented name such as “Open the project guide” for the linked image, if that is its actual destination. The specific words depend on the real context and must not be invented from a filename alone.
If the link already includes visible text that names its destination, decide whether the image adds distinct information or should avoid duplicating that name. Inspect the final accessible name of the whole link, not just its image attribute.
Make the failure visible
Move the formerly decorative flourish into a position where it communicates a warning or status. Its old empty alternative may no longer fit. Also test a diagram whose steps are already fully explained nearby; redundant descriptions can create unnecessary repetition. Missing alt and intentionally empty alt are different treatments, so record the reason for an empty value.
Revise it and ask someone to reproduce it
Have a peer review the page without relying on the images. Ask what information or action they cannot understand. Revise the alternatives and repeat the review, retaining context screenshots and reasoning for all three decisions. Report the scope reviewed rather than claiming that three fixes certify an entire site.
- Every treatment records the image purpose and surrounding context.
- The functional image produces an understandable action name.
- Empty alternatives are intentional and justified.
Describe the work accurately
After completing your own version, you could adapt this project bullet: “Audited three invented image uses with purpose-specific alternatives and contextual review of informative content and link actions.”
Use Projects or Independent practice as the heading. Keep the input files, result and revision together. Describe only your own completed work; the invented numbers are model outputs, not employer results or measured business impact.