Reviewing icons and SVGs in a community events dashboard
Assess meaningful, decorative, and functional SVGs while managing saved events in a community dashboard.
- Difficulty:
- beginner
- Estimated time:
- 20 minutes
Objectives
- Classify inline SVGs as meaningful, decorative, or functional before judging their implementation.
- Compare visible graphic meaning with exposed graphic and control names.
- Identify missing, generic, noisy, and duplicated accessible names.
- Distinguish problematic patterns from correctly named or correctly silent comparisons.
- Record evidence and remediation direction without assuming identical speech phrasing across platforms.
Instructions
Use the Testing icons and SVGs with a screen reader method to review the community events dashboard. Start the exercise from the Exercise workspace.
- Review every visible icon and SVG and predict whether it is meaningful, decorative, or functional.
- Navigate through graphics and controls with your screen reader.
- Compare each announcement or silence with the graphic’s visible purpose and nearby text.
- Inspect markup where you need to confirm why an SVG is exposed or hidden.
- Identify exactly five accessibility findings and four passing checks.
- For each finding, record the affected graphic or control, current output, expected result, user impact, and remediation direction.
Screen readers and browsers may phrase graphic roles and repeated names differently. Assess whether the same purpose is available without missing meaning or unnecessary noise rather than expecting one exact announcement.
Exercise workspace
Community events dashboard icons and SVGs exercise
The exercise opens on a separate page. Return to this page whenever you need a hint, or when you are ready to continue and review the solution.
You can open the exercise in a new tab if you want to keep these instructions and hints available.
Hints
- Decide which graphics communicate information or function and which merely repeat nearby text.
- Compare the visual meaning of each graphic with its accessible name, including controls that contain both an SVG and visible text.
- Look for one unnamed graphic, one generic graphic name, an unnamed icon-only control, and two controls made noisy by exposed decorative SVGs.
Solution
The dashboard contains five findings. The named event-summary graphic, hidden calendar icon, contextually named add button, and silent arrow beside View event details are passing checks.
The availability graphic has no accessible name
The Riverside repair café graphic visually communicates that only a few places remain, but its exposed graphic role has no name and no nearby text supplies the information. Give it a concise meaningful name, or provide equivalent visible text and hide the SVG.
The online-event graphic is named only Icon
Icon confirms that a graphic exists but does not communicate that the gardening workshop is online. Name the meaningful graphic for the information it conveys, or provide equivalent visible text and hide the SVG.
The Save event button exposes an unnecessary Star name
Visible text already gives the button its complete purpose. Exposing the star SVG adds irrelevant wording to the control name or navigation experience. Hide the decorative SVG and retain the visible button text.
The remove icon-only button has no accessible name
The button contains only an SVG that is correctly hidden as decorative, leaving the control itself unnamed. Give the button a contextual name such as Remove Riverside repair café from saved events.
The Download schedule button repeats download wording
The visible Download schedule text already communicates the action, while the exposed SVG contributes another Download name. Hide the decorative SVG so the control retains one concise visible name.