WAI-ARIA: Role=Scrollbar
A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.
Description
A graphical object that controls the scrolling of content within a viewing area, regardless of whether the content is fully displayed within the viewing area.
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.
Authors MUST set the aria-valuemin, aria-valuemax, and aria-valuenow attributes. If missing, their implicit values follow the same rules as the HTML range input type:
- If aria-valuemin is missing or not a number, it defaults to 0 (zero).
- If aria-valuemax is missing or not a number, it defaults to 100.
- If aria-valuenow is missing or not a number, it defaults to the value half way between aria-valuemin and aria-valuemax.
- If aria-valuenow is present but less than aria-valuemin, it defaults to the value of aria-valuemin.
- If aria-valuenow is present but greater than aria-valuemax, it defaults to the value of aria-valuemax.
Elements with the role scrollbar have an implicit aria-orientation value of vertical.
Note: Assistive technologies generally will render the value of aria-valuenow as a percent of a 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.
Role=Scrollbar Example
HTML Example 1
<div role="scrollbar" aria-controls="main"></div>
<div id="main">
. . .
</div>HTML Example 2
<div id="content1">Lorem ipsum...</div>
<div
role="scrollbar"
aria-controls="content1"
aria-orientation="vertical"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="25">
<div class="scrollhandle"></div>
</div>Characteristics
Superclass Role
- range
Required States and Properties
- aria-controls
- aria-orientation
- aria-valuemax
- aria-valuemin
- aria-valuenow
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
- aria-valuetext
Name From
- author
Accessible Name Required
- False
Children Presentational
- True
Implicit Value for Role
- Default for aria-orientation is vertical.
- Default for aria-valuemin is 0.
- Default for aria-valuemax is 100.
- Default for aria-valuenow is half way between aria-valuemax and aria-valuemin.
Semantic HTML
Set the CSS Overflow property to scroll.
<head>
<title></title>
<style>
.divScroll {
overflow:scroll;
height:200px;
width:100px;
}
</style>
</head>
<body>
<div class=”divScroll”>
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
</div>
</body>
References
- WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=scrollbar.
