Skip to content

a11y(bio): give social links human-readable aria-labels - #3338

Open
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:a11y/social-aria-labels
Open

a11y(bio): give social links human-readable aria-labels#3338
Vidminas wants to merge 1 commit into
HugoBlox:mainfrom
Vidminas:a11y/social-aria-labels

Conversation

@Vidminas

Copy link
Copy Markdown

The resume-biography-3 social links set aria-label to the raw icon slug, so screen readers announced e.g. "brands/github" or "academicons/google-scholar" (WCAG 4.1.2). Prefer the link's label; otherwise fall back to the humanized icon basename (e.g. brands/github -> "Github"). Authors can set an explicit label for exact wording.

🚀 What type of change is this?

  • 🐛 Bug fix (A non-breaking change that fixes an issue)
  • New feature (A non-breaking change that adds functionality)
  • 💅 Style change (A change that only affects formatting, visuals, or styling)
  • 📚 Documentation update (Changes to documentation only)
  • 🧹 Refactor or chore (A code change that neither fixes a bug nor adds a feature)
  • 💥 Breaking change (A fix or feature that would cause existing functionality to not work as expected)

🎯 What is the purpose of this change?

The social links in the resume-biography-3 block set aria-label to the raw icon slug, so
screen readers announce link purposes as e.g. "brands/github", "academicons/google-scholar",
or "hero/link" (WCAG 4.1.2 — Name, Role, Value). Note the human-readable value already exists
in the template — it's just used for the title tooltip, not the accessible name.

Fix. Set aria-label to the link's label when present, otherwise the humanized icon
basename
(brands/github → "Github", hero/link → "Link"). Authors can set an explicit label
for exact casing (e.g. "GitHub").

Verified on the academic-cv starter: the six bio social links now expose
E-mail Me / X / Github / Linkedin / Google scholar / Orcid — no raw brands/ or
hero/ slugs remain in any aria-label.


📸 Screenshots or Screencast (if applicable)

n/a — accessible-name change; inspect the aria-label attributes or a screen reader.


ℹ️ Documentation Check

  • No, this change does not require a documentation update.
  • Yes, I have updated the documentation accordingly (or will in a follow-up PR).

📜 Contributor Agreement

Thank you for your contribution!

The resume-biography-3 social links set `aria-label` to the raw icon slug, so
screen readers announced e.g. "brands/github" or "academicons/google-scholar"
(WCAG 4.1.2). Prefer the link's `label`; otherwise fall back to the humanized
icon basename (e.g. `brands/github` -> "Github"). Authors can set an explicit
`label` for exact wording.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Vidminas
Vidminas requested a review from gcushen as a code owner July 11, 2026 07:49
@netlify

netlify Bot commented Jul 11, 2026

Copy link
Copy Markdown

Deploy Preview for academic-demo canceled.

Name Link
🔨 Latest commit 46edf9b
🔍 Latest deploy log https://app.netlify.com/projects/academic-demo/deploys/6a51f572986e2e00082b9f5c

@github-actions

Copy link
Copy Markdown
Contributor

This PR is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help.

If you feel that the PR is still relevant in the latest release, consider making the PR easier to review and finding developers to help review the PR.

Please be mindful that although we encourage PRs, we cannot expand the scope of the project in every possible direction. There will be requests that don't make the roadmap.

This PR will automatically close soon if no further activity occurs. Thank you for your contributions.

@github-actions github-actions Bot added the stale label Aug 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant