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

A scrollbar is used when the content is larger than the viewing area.  In such situations, a scroll bar is provided to allow the users to scroll either vertically or horizontally to view the remaining content.

To notify screen reader users about the existence of a scrollbar on the page, the scrollbar role is used. Since the scrollbar will have a viewable area on both sides i.e. left and right for horizontal scroll, top and bottom for a vertical scroll, minimum and maximum scrollable area should be intimated to the user with aria-valumin and aria-valuemax notifying the current value with aria-valuenow. Aria-orientation property can be used to notify the user about the direction of the scroll.

A scrollbar 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. Its orientation represents the orientation of the scrollbar and the scrolling effect on the viewing area controlled by the scrollbar. It is typically possible to add or subtract to the current value by using directional keys such as arrow keys.

Authors must set the aria-controls attribute on the scrollbar element to reference the scrollable area it controls.

Note: Assistive technologies generally will render the value of aria-valuenow as a percent of the range between the value of aria-valuemin and aria-valuemax, unless aria-valuetext is specified. It is best to set the values for aria-valuemin, aria-valuemax, and aria-valuenow in a manner that is appropriate for this calculation.