Skip to content
This repository has been archived by the owner on Mar 22, 2024. It is now read-only.

Accessibility for contributors table #135

Merged
2 commits merged into from
Jan 17, 2022

Conversation

BenDMyers
Copy link
Contributor

I noticed that the contributors table was using <h4> elements to give contributor usernames extra prominence. Since the h4s weren't being used for sectioning, I've removed the h4s around the username links and given the username links display: block;, font-weight: bold, and the appropriate margins to emulate the same appearance those links had inside an h4.

I've also added an aria-describedby on the username links, pointing to the contributor's title. This means that if someone is tabbing through the contributor links while using a screenreader, if they choose to linger on a link, it will announce their title as supplementary information: Holben888, link, Supreme Slinkity Stan. More info at https://benmyers.dev/blog/aria-labels-and-descriptions/

@netlify
Copy link

netlify bot commented Jan 16, 2022

✔️ Deploy Preview for slinkity ready!

🔨 Explore the source changes: c3e67b2

🔍 Inspect the deploy log: https://app.netlify.com/sites/slinkity/deploys/61e442ee4a204f0008f87914

😎 Browse the preview: https://deploy-preview-135--slinkity.netlify.app

Copy link

@ghost ghost left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ Simplified CSS
✅ Learned how aria-describedby works

10/10 PR

@ghost ghost merged commit 09082a1 into slinkity:main Jan 17, 2022
@BenDMyers BenDMyers deleted the docs/contributors-a11y branch January 17, 2022 04:54
This pull request was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant