Needs keyboard-only user consideration

[aardrian]

Describe the bug The post Overflow in the Learn CSS evergreen course goes into detail about overflowing areas that scroll. It does not, however, note that scrolling containers are a problem for keyboard-only users.

While Chromium is working to add a feature to make scrolling areas keyboard-accessible (Issue 907284: WebUI regressions caused by Keyboard-accessible scroll containers), so far only Firefox has the feature built in.

To Reproduce Steps to reproduce the behavior:

1. Go to https://web.dev/learn/css/overflow/
2. Go to any embedded example that is a scrolling box.
3. Attempt to scroll by navigating the example with only a keyboard.

Expected behavior Scrolling boxes need a way to accept keyboard focus so a keyboard user can use the arrow keys to scroll.

Give them tabindex="0". Note that once you do this, to conform to WCAG they will also need an accessible name and appropriate role.

While this makes for a verbose page for screen reader users, this is the only/best choice for supporting keyboard-only users (caret browsing does not suffice: Keyboard-Only Scrolling Areas).

I have other posts that discuss scenarios in more detail:

• Keyboard and Overflow, 2016
• Under-Engineered Responsive Tables, 2020
• Using CSS to Enforce Accessibility, 2021

Potential Fix For any container that scrolls, consider the following HTML:

<div tabindex="0" role="[region|group]" aria-labelledby="[appropriate existing text]">
    content
</div>

And the following CSS to enforce the keyboard-friendly structure while also giving a visual cue on focus:

[role][aria-labelledby][tabindex] {
  overflow: auto;
}
[role][aria-labelledby][tabindex]:focus {
  outline: .1em solid ActiveText;
}

Obviously the selector can change based on the role and/or accName chosen (aria-labelledby or aria-label). The color I chose for the outline is a system color, so that can (should) be changed too.

[rachelandrew]

@aardrian thank you for raising this, I have a PR adding a section on the issue https://github.com/GoogleChrome/web.dev/pull/8505.

Preview: https://deploy-preview-8505--web-dev-staging.netlify.app/learn/css/overflow/#scrolling-and-accessibility

I need to go through and update the CodePens so they also allow for focus. I did the chat example below this section so I could test the behaviour but I need to do the others.

[aardrian]

@rachelandrew This looks lovely, thank you!

I made one edit suggestion, though I am sure you would have seen it on another read-through.

[rachelandrew]

hah yes - I think I got halfway through rearranging that sentence and the heat got to me or something :D