📚 Documentation: multiple <nav> elements should be labelled [a11y][TheA11y100]

[GrahamTheDevRel]

Issue

There are multiple <nav> elements on each page. When you have more than one <nav> you should add a label to each.

Why it matters

When you have more than one <nav> element you should add a label to each to aid navigation with assistive tech and to differentiate them, otherwise when navigate via landmarks it can be confusing which navigation a user is targetting.

Suggested fix

Add aria-labels to each of the <nav> elements to identify their purposes.

For example:
Nav at the top could be <nav aria-label="main"> and the nav at the side could be <nav aria-label="docs"> (these could be better, if someone can think of more descriptive names for each navigation element. You do not need to say "navigation" as part of the text.)

Relevant Guidance

multiple navigation landmarks

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[divyanshkul]

Would love to work on this!
Also, could this be added to Appwrite's Hacktoberfest program?

[TGlide]

@divyanshkul Assigned it to you. We can add the hacktoberfest-accepted label to a merged PR 😄

[CBID2]

Hi @TGlide. Hacktoberfest is over, and it seems that the assignee has not worked on this issue. If you're open, I'd love to work on this.

[TGlide]

Hi @TGlide. Hacktoberfest is over, and it seems that the assignee has not worked on this issue. If you're open, I'd love to work on this.

Go ahead!

[guptadeepak8]

@CBID2 are you working on this issue?

[CBID2]

@CBID2 are you working on this issue?

Yes

[CBID2]

Hi @TGlide! :) I made the PR for this. It's #358