Icon SVGs missing aria-hidden / inconsistent accessible names

[alexwolson]

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" + <title> 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:

<!-- 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)