Ascrollbar is a graphical object that controls the scrolling of content within a viewing area.

Description

Ascrollbar is a range that controls what part of a viewport's content is currently visible in the viewport's frame; whether the viewport is a full browser size, an iframe, or any element'sblock formatting context.

What is scroll bar

Many applications provide native scroll bars when the content area is larger than the application window. Scrollbars generally appear on the right or bottom of the viewing area. Native scroll bars appear as thin rectangular track areas the length of the viewport it controls with a piece of UI called a thumb or scroller that can be dragged along a track to move the associated content within the viewport. Some scrollbars have arrows at each end of the track that allow scrolling the viewport a short set distance when activated.

Take this document as an example: if the viewport is the full browser window and the content is taller than the viewport, in most browsers the scroll bar on the right edge of the window represents the overall length of the page and the scroll thumb represents the portion of the page content that is currently in the viewport.

Scroll bars may also appear on viewports that are sub-sections of the full browser window. Continuing with this content as our example, if this content is embedded in an<iframe> or<object>, the native vertical scroll bar will be the height of the frame. A scroll bar generally is the length of the viewport, but isn't required to be.

If you aren't currently seeing a scroll bar, it may be because your browser only displays the scroll bar when scrolling or only when an element's content is too big to fit in its block formatting context. Depending on the browser and operating system, scroll bars can be made to be visible even when the content fits in the viewport when no scrolling is necessary or even possible.

ARIAscrollbar

It is always best to use native scroll bars. You can use the CSSoverflow property to ensure the appearance of native scroll bars. ACSS scrollbar specification is being developed. Some browsers allowstyling scroll bars via prefixed pseudo-elements.

Because native scroll bar styling has historically been limited, you may come across a scrollbar implemented in JavaScript that you need to support and make fully accessible. For this, you can use thescrollbar role to inform assistive technologies that a UI control is an interactive scrollbar.

An element with thescrollbar role is a graphical object that controls the scrolling of content within a viewing area; it is the ARIA role which indicates an element is a scroll bar. The HTML element that is most similar is therange<input> type,<input type="range">.

Thescrollbar element has two required attributes:aria-controls andaria-valuenow. Thearia-controls attribute references theid of the scrollable area it controls. Thearia-valuenow property defines the current value of the scrollbar.

While thearia-valuenow is always required, thearia-valuemin andaria-valuemax properties only need to be set for the scrollbar role when thescrollbar's minimum value is not 0 or the maximum value is not 100. The value ofaria-valuenow must always be between the minimum and maximum inclusive values, or between0 and100 inclusive if the minimum and maximum values default to0 and100 respectively.aria-valuenow communicates how close the viewport is to the bottom of the document. Think of it like a progress bar, where the start of the document is the minimum value and the end of the document is the maximum value.

Ascrollbar represents the current value and range of possible values via the size of the scrollbar and position of the thumb with respect to the visible range of the orientation (horizontal or vertical) it controls. In other words, thescrollbar length (height or width) represents all the content within a viewport. Thearia-valuemin value represents the beginning of the content and the scrollbar, thearia-valuemax value represents the end of the content and the end of the scrollbar. Thearia-valuenow represents the content that is currently visible in the viewport and the current position, or value, of the movable thumb. Thearia-valuenow value will generally be exposed as a percentage betweenaria-valuemin andaria-valuemax calculated by assistive technologies.

Like a native scroll bar, users interact withscrollbar elements directly or indirectly using mouse, touchpad, keyboard, and voice input.scrollbar role implementations must also accommodate all these interaction methods.

When using a mouse, the user must be able to activate thescrollbar by clicking the scroll arrows at either end of the scroll bar, if present, clicking an empty portion of the scroll track, as well as clicking and dragging the scroll thumb.

Keyboard scrolling must also be supported. When focus is within the viewport controlled by ascrollbar, theUp Arrow andDown Arrow (orLeft Arrow andRight Arrow for a horizontal scroll bar) should move the scroll bar thumb proportionally. Additionally, thePage Up,Page Down,Space, andShift + Space keys must move the content and the scroll thumb the height (or width) of the viewport for each key press until the bottom or top (or left or right) of the content is in view.

JavaScript must be used to translate thescrollbar action into scrolling commands, providing the user with feedback by:

1. Visually updating thescrollbar element,
2. Scrolling the viewport's content, and
3. Updating thearia-valuenow property value.

The default orientation of thescrollbar role is vertical. Includingaria-orientation="vertical", in this case, is optional. The orientation represents the orientation of the scrollbar and the scrolling effect on the viewing area controlled by the scrollbar. If the scrolling is left to right or right to left and not top to bottom, includearia-orientation="horizontal" on the element with thescrollbar role.

All descendants are presentational

There are some types of user interface components that, when represented in a platform accessibility API, can only contain text. Accessibility APIs do not have a way of representing semantic elements contained in ascrollbar. To deal with this limitation, browsers, automatically apply rolepresentation to all descendant elements of anyscrollbar element as it is a role that does not support semantic children.

For example, consider the followingscrollbar element, which contains a heading.

<div role="scrollbar"><h3>Title of my scrollbar</h3></div>

Because descendants ofscrollbar are presentational, the following code is equivalent:

<div role="scrollbar"><h3 role="presentation">Title of my scrollbar</h3></div>

From the assistive technology user's perspective, the heading does not exist since the previous code snippets are equivalent to the following in theaccessibility tree:

<div role="scrollbar">Title of my scrollbar</div>

Associated WAI-ARIA roles, states, and properties

aria-controls (Required)

Identifies the viewport, via theid, whose contents controlled by the scrollbar.

aria-valuenow (Required)

Set to a decimal value between0, oraria-valuemin if present, andaria-valuemax indicating the current value of the scrollbar.

aria-valuetext

Assistive technologies often present the value ofaria-valuenow as a percentage. If this would not be helpful, use this property to make the scrollbar value more understandable to users.

aria-valuemin

Set to a decimal value representing the minimum value, and less thanaria-valuemax. If not present, the default value is0.

aria-valuemax

Set to a decimal value representing the maximum value, and greater thanaria-valuemin. If not present, the default value is100.

aria-labelledby

When not using a native form control and therefore not able to associate the scrollbar with a<label>, if visible text is available that can provide the required accessible name, set to theid of an element containing text serving as a label. Otherwise, usearia-label.

aria-label

If no<label> can be used, and no visible text is present that can be referenced byaria-labelledby, provides the string value that labels thescrollbar element providing the required accessible name.

aria-orientation

By default, the orientation isvertical. The property can be included and set tohorizontal,undefined (the default for all roles unless otherwise specified), orvertical.

Keyboard interactions

Up Arrow

The content in the viewport moves up one line with the thumb moving up the scroll bar slider proportionally, until the top of the content and scrollbar are reached.

Down Arrow

The content in the viewport moves down one line with the thumb moving down the scroll bar slider proportionally, until the bottom of the content and scrollbar are reached.

Left Arrow

With horizontal scrolling, the content in the viewport moves left the width of one character with the thumb moving left across the scroll bar slider proportionally, until the left edge of the content abuts the left end of the viewport and the thumb is aligned on the left end of the scrollbar.

Right Arrow

With horizontal scrolling, the content in the viewport moves right the width of one character with the thumb moving right across the scroll bar slider proportionally, until the right edge of the content abuts the right end of the viewport and the thumb is aligned on the right end of the scrollbar.

Page Up andShift + Space

The content in the viewport moves up the height of one viewport with the thumb moving up the scroll bar slider proportionally, until the top of the content and scrollbar are reached.

Page Down andSpace

The content in the viewport moves down the height of one viewport with the thumb moving down the scroll bar slider proportionally, until the bottom of the content and scrollbar are reached.the bottom or top of the content is in view.

Examples

The following is an example of a word likely being too long for a parent container.

<div>Pi</div><div>  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</div><div  role="scrollbar"  aria-labelledby="pi-label"  aria-controls="pi"  aria-orientation="horizontal"  aria-valuenow="0"  aria-valuemin="0"  aria-valuemax="100">  <div></div></div>

When using the ARIA roles instead of native UI features, CSS must be used to style the scrollbar and thumb and JavaScript must be used to handle all keyboard and pointer events.

CSS could have been used to ensure the overflowing value of PI had a native scrollbar:

<h3>Pi</h3><p tabindex="0" aria-labelledby="PI">  3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679</p>

.pi {  overflow: auto;  max-width: 100%;}

The above CSS means a native scroll bar will appear when the user interacts with the paragraph's viewport if the length of the longest word in the paragraph is wider than the paragraphs containing box. Thetabindex attribute was added to allow people using a keyboard to navigate to, and scroll around the overflowed content.

Specifications

See also

• <input type="range">,
• HTML<progress> element
• HTML<meter> element
• Other range widgets include:
  • meter
  • slider
  • separator (if focusable)
  • progressbar
  • spinbutton
• Documentscroll event