CivicTechTO / CivicTechTO/civictech.ca

Icon SVGs missing aria-hidden / inconsistent accessible names

Open Beginner friendly
#90 0 comments 0 reactions 0 assignees View on GitHub
accessibility
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.