Skip to content

[css-scrollbars] Add notes and advisements to scrollbar-width #6750

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 3, 2021
Merged

[css-scrollbars] Add notes and advisements to scrollbar-width #6750

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce726ed
[css-scrollbars] Add notes and advisements to scrollbar-width
frivoal Oct 21, 2021
697ed39
Add an accessibility considerations appendix
frivoal Nov 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 64 additions & 1 deletion css-scrollbars-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,9 +192,32 @@ Percentages: n/a
This property allows the author to specify
the desired thickness of an element’s scrollbars.

<div class=advisement>
The primary purpose of this property is not
to allow authors to chose a particular scrollbar aesthetic for their pages,
but to let them indicate for certain small or cramped elements of their pages
that a smaller scrollbar would be desirable.

Scrollbars are a UI mechanism essential to interact with the page.
Operating systems tend to want consistency in such controls to improve usability through familiarity,
and users with specific preferences or needs can adjust
the appearance of various UI components, including scrollbars,
through OS or UA settings.

While using this property in support of specific UX goals is appropriate,
authors should otherwise refrain from overriding such user preferences.
</div>

<dl dfn-type="value" dfn-for=scrollbar-width>
<dt><dfn>auto</dfn></dt>
<dd>Implementations must use the default platform scrollbar width.
<dd>Implementations must use the default scrollbar width.

Note: On most systems, this corresponds to the traditional somewhat wide scrollbar.
However, through OS or UA settings,
users can have the ability to change what this default corresponds to,
possibly making the default scrollbar
wider or narrower than is typical.

</dd>
<dt><dfn>thin</dfn></dt>
<dd>Implementations should use thinner scrollbars than ''scrollbar-width/auto''.
Expand All @@ -204,6 +227,11 @@ The scrollbar should nonetheless remain wide enough to be usable.
(Implementers may wish to consult
<a href="https://www.w3.org/TR/WCAG21/#target-size">WCAG 2.1 SC 2.5.5 Target Size</a>. [[WCAG21]])

User agents may disregard this value and treat it as ''scrollbar-width/auto'',
for instance when the user has indicated discomfort
for thin scrollbars through some UA or OS setting.
(User agents are encouraged to provide such a setting.)

Note: Some platforms only have a tiny scrollbar by default
which cannot be reasonably made thinner.
In such cases, this value will behave as ''scrollbar-width/auto''.
Expand All @@ -230,6 +258,13 @@ authors should use ''overflow: hidden'' instead of ''scrollbar-width: none''.
</dd>
</dl>

<div class=note>Note: Users who find the ''thin'' style of scrollbars unusable
can include the following rule in their [=user style sheet=]:
<pre><code class=lang-css>* { scrollbar-width: auto !important; }</code></pre>
This will ensure that all scrollbars are sized as per OS and UA settings
regardless of author styles.
</div>

UAs must apply the 'scrollbar-width' value set on the root element to the viewport.

Note: Unlike the 'overflow' property (and its longhands),
Expand Down Expand Up @@ -367,3 +402,31 @@ or on overflowing elements with scrollbars in the page.</p>
<p>No.</p>
</li>
</ol>

<h2 class="no-num" id="accessibility-considerations">Appendix D. Considerations for accessibility</h2>

This appendix is <em>informative</em>.

As noted [[#scrollbar-width|in the definition of the property]],
authors need to be mindful of the accessibility implications
of using ''scrollbar-width: thin''.
Scrollbars are a important piece of the user agent's interface,
and it is not appropriate for a web site author to change their size over aesthetic considerations.
The property is available to support cases
where the author wants to indicate that in a cramped area of the web page
a thin scrollbar would be a more effective use of space.
However, ultimately, the user, through their user agent,
needs to have the last word on such things.

Using this property in such cases is preferable to
authors building a custom thin-looking scrollbar in via script or proprietary extensions,
because it does give the user the opportunity to override it.

[=User style sheets=] do provide such an override,
and additionally, user agents are encouraged to expose a setting
letting users express that they do not want thin scrollbars to be used.

The CSS Working Group also acknowledges the needs of some users
to have scrollbars that are wider than is typical.
Operating systems and user agents can offer a means to let users express that preference,
and in such cases, CSS will honor that choice.