CivicTechTO / CivicTechTO/civictech.ca
Icon SVGs missing aria-hidden / inconsistent accessible names
- Dominant language
- HTML
- Stars
- 1
- Forks
- 6
- Avg merge
- 9h 45m
- Merged PRs (30d)
- 6
Description
## Summary
Two related problems exist with the icon SVGs in `_includes/icons/`:
1. **Most icons lack `aria-hidden="true"`** — `github.svg`, `slack.svg`, `mastodon.svg`, `youtube.svg`, `facebook.svg`, `instagram.svg`, `linkedin.svg`, `twitter.svg`, `guild.svg`, `link.svg`. These SVGs are used alongside visible text labels in social link lists. Without `aria-hidden`, screen readers may attempt to announce the SVG content (path data, element structure) in addition to the visible label text.
2. **`bluesky.svg` and `wikipedia.svg` use `role="img"` + ``** that duplicates the visible text label already rendered next to the icon. Screen readers will announce the name twice.
## Fix
**For icons alongside visible text labels** — add `aria-hidden="true"` so the SVG is treated as decorative:
```html
<!-- Before (e.g. github.svg) -->
<svg xmlns="..." class="lucide lucide-github">...</svg>
<!-- After -->
<svg xmlns="..." class="lucide lucide-github" aria-hidden="true" focusable="false">...</svg>
```
The `focusable="false"` attribute is needed for IE11/older Edge which otherwise makes SVGs focusable.
**For `bluesky.svg` and `wikipedia.svg`** — remove `role="img"` and `<title>`, replace with `aria-hidden="true" focusable="false"` to match the rest.
## WCAG criteria
1.1.1 Non-text Content (Level A), 4.1.2 Name, Role, Value (Level A)
Contributor guide
Research direction
Start by inspecting the listed SVGs in `_includes/icons/`, especially `github.svg`, `bluesky.svg`, and `wikipedia.svg`, and compare their accessibility attributes. Apply the issue’s decorative-icon treatment consistently, then review the social link lists to confirm icons are hidden from assistive technology and visible labels remain available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 62/100