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

GrahamTheDevRel commented 8 months ago

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?

[X] I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

[X] I have read the Code of Conduct

divyanshkul commented 8 months ago

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

TGlide commented 8 months ago

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

CBID2 commented 7 months ago

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 commented 7 months ago

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 commented 7 months ago

@CBID2 are you working on this issue?

CBID2 commented 7 months ago

@CBID2 are you working on this issue?

Yes

CBID2 commented 7 months ago

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

appwrite / website