Difficult to quickly scroll pages for keyboard-only users

[aardrian]

Issue

Typically a user loads a web page and can immediately start scrolling without the need to navigate into the page. Here, keyboard-only users have to move keyboard focus into the content area in order to scroll the page.

This is not a WCAG violation, but it is a hassle for keyboard-only users to peruse the page.

To reproduce

1. Visit https://2024.stateofcss.com/en-US in a desktop browser.
2. Prior to any other interaction, use the down arrow key (↓) to scroll the page.
3. Alternatively, press Space to scroll one screenful.
4. Using Chrome, press Tab↹ until "Skip to Content" is in focus.
5. Press Enter↵
6. Press ↓ or Space to scroll the page.

Additional notes:

• Firefox will scroll once "Skip to Content" has been followed.
• Chrome will not.
• On subsequent loads, Chrome will 'remember' (my word) that it once had focus and allow scrolling.
• This may be because the skip-link links to href="#page-main" but the scrolling container is id="pageContent" (id="page-main" is a child).
• I did not test in Safari.

Suggestion

The following should / could resolve the issue.

• Adjust the skip-link destination.
• Remove .oPsli { overflow: unset; }.
• Add position: sticky and top: 0 to the <div class="SurveyBanner__Banner_-sc-md19pk-0 kPzTea">.
• Also add z-index: 1; to the <div class="SurveyBanner__Banner_-sc-md19pk-0 kPzTea"> some of the content boxes don't sit above it.
• Add position: sticky, top: 2.8em, and height: calc(100vh - 2.7em); (you may want to adjust the sizes) to <div id="sidebar">.
• Remove overflow styles from .REBFc.
• Set the skip link to fixed position and give it a background color.

Or I guess I could have just pasted this into the issue (which includes overrides for the things I could not remove):

.oPsli {
  overflow: unset;
}
#sidebar {
  position: sticky;
  top: 2.8em;
  height: calc(100vh - 2.7em);
}
.SurveyBanner__Banner_-sc-md19pk-0 {
  position: sticky;
  top: 0;
  z-index: 1;
}
.REBFc {
  overflow-y: initial;
  overflow: initial;
}
.cLQUPa:focus {
  z-index: 2;
  position: fixed !important;
  background: #000;
}

That CSS is from a custom style block I added to Stylus for the site in Firefox. It may not be perfect.