Add Skip Navigation link to the Website Header

[Mcnoble1]

Reason/Context

AsyncAPI website needs a skip link for bypassing or 'skipping' over repetitive web page content which is the navigation menu. This will help screen reader users and keyboard-only users navigate to the main content of each page on the website. they can skip the navigation area and jump right into the main content of the page instead of repeating and going over the large navigation area again The motivation for this is to improve the accessibility of AsyncAPI's website and be more inclusive.

Description

The main change is an addition of the skip-link code to the header/navigation section of the website and the styling for it in the css. Below is an example of github skip-link.

[github-actions[bot]]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Mcnoble1]

@alequetzalli

[quetzalliwrites]

@magicmatatjahu and @mcturco, I am tagging you folks in this a11y issue because it affects the /website repo code and styling.

@Mcnoble1, @magicmatatjahu helps as one of our main dev contributors to the /website repo, and @mcturco is one of our top design contributors, so these folks will prob need to be at a minimum, reviewers on the PR for this issue.

[Mcnoble1]

@magicmatatjahu and @mcturco, I am tagging you folks in this a11y issue because it affects the /website repo code and styling.

@Mcnoble1, @magicmatatjahu helps as one of our main dev contributors to the /website repo, and @mcturco is one of our top design contributors, so these folks will prob need to be at a minimum, reviewers on the PR for this issue.

Noted, Thanks.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity :sleeping:

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience :heart:

[pranavmadhu01]

Hey I can see that already a skip link is present in the website.

[akshatnema]

@ChandniJha630 kindly don't upload your proposal over here as it is open for all and can be copied by anyone.

[akshatnema]

Hey I can see that already a skip link is present in the website.

Hey @pranavmadhu01, sorry for the late response. Actually, the button exists in the website but it doesn't work properly. So the motive of the issue is to implement the functionality of the button properly.

[pranavmadhu01]

can you specify to which section should the button redirect when navigated @akshatnema

[akshatnema]

can you specify to which section should the button redirect when navigated @akshatnema

It's not a redirecting button. It allows the keyboard only users to skip the navigation buttons of website and directly start pointing out to Read the Docs button.

[pranavmadhu01]

ok sure i will make a pr

[akshatnema]

ok sure i will make a pr

Sorry, this issue is under the Winter of Code program, so the assigned mentee is allowed to contribute to the issue. Thanks for showing interest in this. You can look into other issues for contributing to the organization.

[pranavmadhu01]

ok sure i will make a pr

Sorry, this issue is under the Winter of Code program, so the assigned mentee is allowed to contribute to the issue. Thanks for showing interest in this. You can look into other issues for contributing to the organization.

Iam a participant of Winter Of Code program and I will submit a proposal for the issue

[akshatnema]

Iam a participant of Winter Of Code program and I will submit a proposal for the issue

Go for it. Good Luck :+1:. Make sure you don't share your proposal in this issue.

[pranavmadhu01]

sure

[pranavmadhu01]

Hey I have submitted the proposal for resolving the issue

[pranavmadhu01]

hey can I work on the issue? @akshatnema

[akshatnema]

hey can I work on the issue? @akshatnema

Sorry, this issue is under Winter of Code, so the contributor whose proposal gets accepted will work in this.