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

[Faith-K-commits]

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]

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]

@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]

Sure, I'm adding the id where applicable.

[OmarAmeen01]

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

[Faith-K-commits]

Yes @OmarAmeen01