Skip to content Button for accessibility

Is your feature request related to a problem? Please describe.

I was trying to implement freeCodeCamp Skip to content button to Chapter, but there is none in freeCodeCamp. The button is used in websites like YouTube, this button will provide quality of life to people who access the site daily and give them chance to skip some annoys

Describe the solution you’d like

Creating a skip to content button component, that skips the navigation bar

Describe alternatives you’ve considered

Toggle the nav bar component, that hides the navigation. Although not standard, it’s used in sites like CodePen

[bbsmooth]

Having a skip to main content link at the very top of the page is a good idea. I was actually working on this a while ago but got distracted and forgot about it 🤦 Though let me be clear that it is not “required” by WCAG since we are marking up the HTML with appropriate landmarks and headings.

This should be marked up as a link (anchor element) and should be the very first element on the page. I would place it as the first element in the header, before the nav. It can definitely be hidden by default and then only displayed when it has keyboard focus. Where/how you display it at the top of page is more an issue of aesthetics, just as long as it meets color requirements.

The other part of this is where the skip link targets. Based on the HTML structure used in FCC, I would recommend the skip link target the first heading in the main element. A quick look through the various types of pages in FCC learning curriculum confirms that this will be the h1, except for the Profile and Donate pages which are starting with h2 instead of h1 (this should probably be changed). This of course means that these headings will need to be given an id so that the skip to link can target them.

Speaking of the target heading, it should NOT be given a tabindex of 0. We do not want to create another tab stop here, and it is not necessary. All browsers will automatically shift the focus to the target when you click on an internal link without needing an explicit tabindex set on the target.

An additional feature that is sometimes used with skip links (but not required) is to provide a temporary focus indicator on the target when the skip link is activated. This is often implemented as a focus ring or background color on the target that fades out over a period of a few seconds. This is a nice visual indicator that the skip link actually worked and shows the user that the focus is now on the heading (remember, skip links are primarily for sighted users). For example, if I am on a Step in a RWD course and I activate the skip link, chances are nothing visually is going to indicate that the skip link worked. Placing a temporary focus indicator on the h1 heading will help confirm that the skip link worked and show me exactly where the focus is placed. Some examples of this in action:

WebAIM: Skip Navigation Links Adrian Roselli

Note: In order to add a focus effect on the target heading we would need to add tabindex=-1 to the heading, which is fine since it doesn’t add the heading to the default tab order.

[Sboonny]

Do I open new issue for donate and profile missing h1?