[css-scrollbars-1] accessibility review [css-a11y] · Issue #3315 · w3c/csswg-drafts (original) (raw)

Reviewed on behalf of the CSS Accessibility Task Force:

At the end of https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925/#scrollbar-color we have

When using scrollbar-color property with specific color values, authors should ensure the specified colors have enough contrast between them. For keyword values, UAs should ensure the colors they use have enough contrast. See Techniques for WCAG 2.0: G183: Using a contrast ratio of 3:1 […] [WCAG20].

It may be worth generalising this to also mention that UAs should ensure that their automatically-chosen color values for scrollbar-color: light and scrollbar-color: dark should also pass sufficient contrast (i.e. that scrollbar-color: light on a light background / scrollbar-color: dark on a dark background should always have sufficient contrast (under the control of the UA)

WCAG 2.0 only provides guidance for text color contrast (so not directly applicable here). This should now reference WCAG 2.1 SC 1.4.11 Non-text Contrast https://www.w3.org/TR/WCAG21/#non-text-contrast which is directly related.

Additionally, it may be good to mention that UAs may ignore this directive altogether based on user preferences (for instance, providing users with a configuration option/setting that always ensures a particular scrollbar color / use of system default scrollbars)

As a side note, example 1 in this section has stray opening/closing single quotes.

https://www.w3.org/TR/2018/WD-css-scrollbars-1-20180925/#scrollbar-width allows authors to set the width of the scrollbar, including completely removing the visual display of the scrollbar with scrollbar-width: none. Too thin a width may make the scrollbar difficult/impossible for users to operate - particularly users with mobility impairments. A minimum size should be required/suggested/enforced by UAs - see WCAG 2.1 SC 2.5.5 Target Size https://www.w3.org/TR/WCAG21/#target-size
Having the scrollbar completely suppressed may be confusing for all (sighted) users, unless an alternative/equivalent visual hint that scrolling is possible / that there is more content is provided. This should at least be strongly suggested/noted. For situations where an area is going to be scrolled by other means (e.g. programmatically), overflow: hidden is likely the more apt choice, rather than not using overflow but instead setting scrollbar-width: none