Adding a "Skip to Content" Link

[canerakdas]

Enter your suggestions in details:

For users navigating only with a keyboard or using screen readers, reaching the main content on pages like the "Learn" section can be challenging. Currently, they need to bypass links in the navigation and progression sidebars before accessing the main page content, which creates a barrier to efficient navigation

To enhance accessibility, we could add a "Skip to Content" link, enabling users to jump directly to the primary content area.

Example Implementation: Carbon Design System, GitHub

WCAG Reference: WCAG 2.0 Technique G1

[yaten2302]

Hey @canerakdas , I would like to work on this issue, could you please guide regarding this issue that what Skip to Content button would exactly do? Like, here on the content page

Also, this button would be like creating a button to be clicked by the user (using mouse) or it is like if the user presses (let's say) Tab (on windows), then the user would be redirected to the main content page?

[aduh95]

what Skip to Content button would exactly do?

I think it would skip to content.

this button would be like creating a button to be clicked by the user (using mouse)

No, it's not aimed to users using a mouse, it should not be visible unless it has focus. You can read about in the linked spec, or you can get inspiration from an existing implementation (e.g. the GitHub one is arguably easy to grasp)

[yaten2302]

Thanks @aduh95 , got it now 👍
Just wanted to ask that should this button be present on the extreme right-bottom side of the page?(since, it'll not disturb other buttons or elements present on the page), WDYT?

[aduh95]

Like on GitHub web UI, it should not be visible by default, and, on focus, it should appear on the extreme top-left – as you can see on the spec, it's not the only possible implementation, but in my experience it's the most usual one. It should not disturb anything on the page, in fact if it's correctly implemented users using a mouse should not be able to tell there's a new button, it's aimed for screen-readers and/or keyboard users.

[yaten2302]

Yes, got it 👍 I'll keep it on the top-left of the page and by default it'll be hidden, unless the user presses - tab (for windows)

[yaten2302]

Hey @canerakdas , I've created a PR for this issue, could you please have a look at it?
Thanks