Flag websites with custom scrollbars that are very thin

See here for more details:

Open UI: Force bad scrollbar designs to apply accessibility patches Google Chrome: Issue 1251575

Feature request summary

Website developers/designers can now customize the scrollbar in the browser, using this spec: https://drafts.csswg.org/css-scrollbars-1/

Browser support is now over 97% https://caniuse.com/?search=scrollbar

Issue

I have come across several websites that have customized the browser scrollbar. But their websites have really bad Scroll Jank issues!

“Jank” is the term used to describe the visual hiccup that occurs when the system is not able to build and provide frames in time for them to be drawn to the screen at the requested cadence (60hz, or higher). Jank is most apparent when scrolling, when what should be a smoothly animated flow has hiccups, where the movement pauses along the way for one or more frames as the app takes longer to render content than the duration of a frame on the system.

Because of the JANK issues; when I try to use the mouse wheel to scroll down the webpage. The jank is preventing the page from scrolling down. So I try to grab the scrollbar with the mouse pointer and move the scrollbar down.

However, I have seen quite a few websites with really thin scrollbars that I end up spending several minutes trying to grab a scrollbar that is say 1-3px wide for example.

What is the motivation or use case for changing this?

Improve web accessibility standards.

How is this beneficial to Lighthouse?

Google Lighthouse should flag websites with poorly designed custom scrollbars giving a bad user experience and causing web accessibility issues.

e.g. making the main webpage scrollbar very thin say 1-3px width.

Google Lighthouse has a set standard for Tap targets e.g.

Targets that are smaller than 48 px by 48 px or closer than 8 px apart fail the audit.

I’m suggesting Google Lighthouse flag websites with very thin webpage scrollbars that fail to meet a certain minimum width threshold, e.g.

Scrollbars with a width under 5px fail the audit.

[patrickhulce]

Thanks @summercms these are great examples to consider! We’ll be sure to discuss this in our next sync 👍

[daiplusplus]

For reference, I described this accessibility/usability issue previously here: https://github.com/GoogleChrome/lighthouse/issues/11292