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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant