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.

Sign up for GitHub

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

Jump to bottom

[Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present #238

Open
1 task done
Faith-K-commits opened this issue Oct 16, 2024 · 5 comments · May be fixed by #243
Open
1 task done

[Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present #238

Faith-K-commits opened this issue Oct 16, 2024 · 5 comments · May be fixed by #243
Labels
💻 aspect: code Concerns the software code in the repository ✨ goal: improvement Improvement to an existing feature 🟩 priority: low Low priority and doesn't need to be rushed 🏁 status: ready for work Ready for work

Comments

@Faith-K-commits
Copy link
Contributor

Problem

The current navigation elements lack appropriate ARIA attributes, which limits their accessibility for users relying on assistive technologies.

Description

This feature will improve the accessibility of the navigation elements by implementing ARIA attributes where appropriate. This will help users with screen readers understand the purpose of the navigation links better. This issue references issue #149

Alternatives

An alternative would be to rely on semantic HTML alone. However, adding ARIA attributes will provide additional context and clarity for users with disabilities.

Implementation

  • I would be interested in implementing this feature.
@Faith-K-commits Faith-K-commits added ✨ goal: improvement Improvement to an existing feature 💻 aspect: code Concerns the software code in the repository 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🟩 priority: low Low priority and doesn't need to be rushed labels Oct 16, 2024
@possumbilities possumbilities changed the title [Feature] Enhance Accessibility of Navigation Elements with ARIA Attributes [Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present Oct 16, 2024
@possumbilities possumbilities changed the title [Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present [Functionality] nav elements Accessibility can be improved through use of aria-labelled-by or aria-label, depending on markup present Oct 16, 2024
@possumbilities possumbilities added 🏁 status: ready for work Ready for work and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work labels Oct 16, 2024
@Faith-K-commits
Copy link
Contributor Author

Hi @possumbilities
I noticed that in order to use aria-labelledby for improving the accessibility of the nav elements, we would need to associate the nav with an existing heading, such as the <h2> element in the current markup. However, the current structure doesn’t provide an id for the <h2> element, which would be necessary to implement aria-labelledby.

Would it be possible to modify the <h2> tag to include an id, allowing us to reference it in the nav elements using aria-labelledby?

@possumbilities
Copy link
Contributor

@Faith-K-commits IF there is an existing hX element present that applies, it would be fine to add an id for the purposes of utilizing it with aria-labelledby. I don't know that all the nav areas have an hX element to do that with, so it'll vary of course.

@Faith-K-commits
Copy link
Contributor Author

Sure, I'm adding the id where applicable.

@OmarAmeen01
Copy link
Contributor

hey @Faith-K-commits are you working on this issue

@Faith-K-commits
Copy link
Contributor Author

Yes @OmarAmeen01

@Faith-K-commits Faith-K-commits linked a pull request Oct 16, 2024 that will close this issue
Open
7 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
💻 aspect: code Concerns the software code in the repository ✨ goal: improvement Improvement to an existing feature 🟩 priority: low Low priority and doesn't need to be rushed 🏁 status: ready for work Ready for work
Projects
WebDev
Status: Backlog
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Enhance accessibility by adding ARIA attributes and IDs to navigation… Faith-K-commits/vocabulary
3 participants
@OmarAmeen01 @possumbilities @Faith-K-commits