Semantics

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.

Additional info from the ARIA specification

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 to or subtract from the current value by using directional keys such as arrow keys.

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

Authors MAY set aria-valuemin and aria-valuemax to indicate the minimum and maximum thumb position. Otherwise, their implicit values follow the same rules as <input type="range"> in HTML:

Authors MUST set the aria-valuenow attribute to indicate the current thumb position. If aria-valuenow is missing or has an unexpected value, user agents MAY implement the repair techniques specified in the section describing handling author errors in states and properties, which are equivalent to the repair techniques for <input type="range"> in HTML.

Elements with the role scrollbar have an implicit aria-orientation value of vertical.

Abstract Role

  • WidgetRepresents a focusable, interactive element.

Content Categories

  • Flow ContentAn element that structures and organizes the body of a web document.

Allowed Descendants

Phrasing Children Allowed

Note

Children Become Presentational

Browsers automatically apply the presentation role to all descendant elements, so their semantics are not conveyed to assistive technologies.

Usage

Allowed HTML elements

Implicit semantics

  • None

Explicitly allowed

  • img[role=scrollbar]

Elements that can have any role

  • abbr[role=scrollbar]
  • address[role=scrollbar]
  • b[role=scrollbar]
  • blockquote[role=scrollbar]
  • canvas[role=scrollbar]
  • cite[role=scrollbar]
  • code[role=scrollbar]
  • custom-element[role=scrollbar]
  • data[role=scrollbar]
  • del[role=scrollbar]
  • dfn[role=scrollbar]
  • div[role=scrollbar]
  • em[role=scrollbar]
  • figure[role=scrollbar]
  • i[role=scrollbar]
  • ins[role=scrollbar]
  • kbd[role=scrollbar]
  • mark[role=scrollbar]
  • output[role=scrollbar]
  • p[role=scrollbar]
  • pre[role=scrollbar]
  • q[role=scrollbar]
  • samp[role=scrollbar]
  • small[role=scrollbar]
  • span[role=scrollbar]
  • table[role=scrollbar]
  • tbody[role=scrollbar]
  • tfoot[role=scrollbar]
  • thead[role=scrollbar]
  • time[role=scrollbar]
  • u[role=scrollbar]
  • var[role=scrollbar]