Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add accessible name to navigation icon links #442

Merged
merged 2 commits into from
Mar 25, 2024
Merged

Conversation

patrickhlauke
Copy link
Member

@patrickhlauke patrickhlauke commented Mar 25, 2024

Currently these links lack an accessible name at large screen sizes (as their actual text content is set in the <small class="d-lg-none ...">). Adding aria-label to the links themselves explicitly circumvents this problem.

Additionally, this fixes the visible text for the "Twitter" link.

Preview: https://deploy-preview-442--bootstrapblog.netlify.app/

Currently these links lack an accessible name at large screen sizes (as their actual text content is set in the `<small class="d-lg-none ...">`).
Adding `aria-label` to the links themselves explicitly circumvents this problem.

Additionally, this fixes the visible text for the "Twitter" link.
@XhmikosR
Copy link
Member

Could you also check the theme toggler in case we are missing anything? And/or our other <svg cases in templates?

Thanks again!

@patrickhlauke
Copy link
Member Author

Theme toggler is fine (and already has appropriate aria-label). Navigating through the blog with a screen reader, didn't notice any other problems anywhere else where there are icons, but will have a quick second pass in the code.

@patrickhlauke
Copy link
Member Author

Didn't see any other problematic instances where .svgs are used that would lead to unlabelled links, buttons, or similar. So I think this is good to go.

@XhmikosR XhmikosR merged commit 93f6a19 into main Mar 25, 2024
8 checks passed
@XhmikosR XhmikosR deleted the navigation-a11y branch March 25, 2024 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants