Devographics / Devographics/Monorepo
Difficult to quickly scroll pages for keyboard-only users
- Dominant language
- TypeScript
- Stars
- 178
- Forks
- 55
- Avg merge
- 1m
- Merged PRs (30d)
- 2
Description
## 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 `
* Also add `z-index: 1;` to the `
* Add `position: sticky`, `top: 2.8em`, and height: calc(100vh - 2.7em); (you may want to adjust the sizes) to `
* 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):
```CSS
.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.
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.