Synonyms: Scrollbar

See also: Slider , pagination , carousel , control point

A scrollbar is for scrolling through the entire page, part of a page or parts of an element (such as list entries in a drop-down list) in the visible area. The scrollbar also serves the visualization of the current position and the overall size of the page, parts of the page or elements (see DIN EN ISO 9241-161: 8.35).

A scrollbar consists of a moving bar and the scroll box. The moving bar represents the total length or width of the scrollable area. The scroll box shows the location and size of the visible section and also allows the visible section to be moved.

At the start and end of the moving bar there is generally a button with an arrow icon for incremental scrolling.

Vertical scrollbars are located on the right-hand border of the scrollable area. Horizontal scrollbars are located on the lower border of the scrollable area.

Figure 51: Vertical and horizontal scrollbar

Presentation

Permalink "Presentation"

Zoom). | Must | EN 301 549 9.1.4.10, 11.1.4.10 |

No.PropertyDescriptionClassificationReference
764ContrastThe icons of the buttons on the border of the scrollbar must have a contrast ratio of at least 3:1 with respect to the background.MustEN 301 549: 9.1.4.11, 11.1.4.11
765ContrastThe scroll box must have a contrast ratio of at least 3:1 with respect to the moving bar.

Note: The contrast ratio of the scroll box and moving bar can also be maintained with a corresponding border around the moving bar.

MustEN 301 549: 9.1.4.11, 11.1.4.11
766ContrastIf the moving bar is only identifiable as such on the basis of its color design, the color must have a contrast ratio of at least 3:1 with respect to the neighboring colors.

Note 1: A moving bar might be recognizable as an interactive element on the basis of its border or its background color, for example.

Note 2: This requirement does not apply if the entire scrollbar is clearly recognizable as such, because of its position in combination with the buttons at the start and end and the scroll box, for example.

MustEN 301 549: 9.1.4.11, 11.1.4.11
767AmountThe page contents must wrap in such a way that they only need to be scrolled vertically or horizontally for a display size up to a minimum of 320 x 256 px. This does not apply to required two-dimensional content (see

Operation

Permalink "Operation"

change of context should occur. | Must | WCAG 2.1: 3.2.5 (AAA) | | @!772 | Animations | When scrolling, there should not be any other visual animation apart from the moving of the visible area. | Should | WCAG 2.1: 2.3.3 (AAA) | | @!773 | Click area | The scrollbars should be at least 24 px wide. | Should | WCAG 2.2 | | @!774 | Click area | The click area of the buttons and scroll box of the scrollbar should be at least 24 x 24 px. | Should | WCAG 2.2 |

No.PropertyDescriptionClassificationReference
768Use of the keyboardIt must be possible to scroll in the areas with the keyboard (see Use of the keyboard table, below).

Note: The scrollbars should not receive keyboard focus, but the scrollable areas and/or elements within the scrollable areas.

MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
769Use of the pointing deviceThe use of the pointing device for the scrollbar may not be complex.

Please note: Complex use of the pointing device means

  • multipoint operation (e.g. swiping with several fingers),
  • path-based operation (where the start and end points of the use of the pointing device are not just relevant, but at least one intermediate point is).

MustEN 301 549: 9.2.5.1, 11.2.5.1
770Use of the keyboardIt should also be possible to operate the scrollbar without the dragging use of the pointing device.

Note: This can be done enabling the scrolling by clicking on the moving bar or the buttons, for example.

ShouldWCAG 2.2
771UpdatesWhen scrolling, no unexpected

Use of the keyboard: scrollbar

Permalink "Use of the keyboard: scrollbar"
ActionKeyClassification
Focusing of the scrollable area or elements within the scrollable areaTAB

Note 1: If the scrollable area does not contain any elements that allow for scrolling with the arrow keys, then the area itself must receive the focus.

Note 2: Elements that are themselves controlled by the arrow keys (such as input fields, selection lists and radio buttons) do not allow for the scrolling of the area in which they are located.

Required
Exiting the scrollable areaTABRequired
Scrolling of a focused item to the visible areaWhen receiving the keyboard focusRequired
Vertical scrollingUP/DOWN ARROWRequired
Horizontal scrollingRIGHT/LEFT ARROWRequired
Vertical scrolling (quick navigation)PAGE UP/PAGE DOWN
(CTRL +) POS1/END		Recommended

Use of the pointing device: scrollbar

Permalink "Use of the pointing device: scrollbar"
ActionKeyClassification
Incremental scrollingLeft click on the buttons on the edge of the scrollbarRequired
Scrolling (quick navigation)Left click on the moving bar outside the scroll boxRequired
Scrolling to a specific positionDragging of the scroll box (drag and drop)Required

Note: The scrolling capabilities of the pointing devices should also be supported (e.g., mouse scroll wheel, gesture commands for scrolling on the touch-pad).

Programming/interfaces

Permalink "Programming/interfaces"

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!776 | Role | If the scrollable area receives the keyboard focus and does not have the role of control element, the scrollable area role must be communicated to the Accessibility API.

Note: If the technology used does not know the role of the scrollable area, reference should be made in the Accessible Description that the element for scrolling receives the focus.

| Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!777 | Value | The values of the scrollbar must be communicated to the Accessibility API (see Accessibility API).

Note: The scrollbar has the following values:

  • Size of scroll box relative to the size of the moving bar (represents the size of the visible section)
  • Position of scroll box within the moving bar.

| Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.7 | | @!778 | Desktop: Value range | The minimum and maximum value of the scrollbar must be communicated to the Accessibility API (see Accessibility API). | Must | EN 301 549: 11.5.2.7 | | @!779 | Status | The status of the scrollbar must be communicated to the Accessibility API (see

Element status). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!780 | Orientation | The orientation of the scrollbar (vertical or horizontal) must be communicated to the Accessibility API. | Must | EN 301 549: 9.4.1.2, 11.4.1.2 | | @!781 | Desktop: Position | The new position of the focused element must be communicated to the Accessibility API after the scrolling of the area (see Accessibility API). | Must | EN 301 549: 11.5.2.5, 11.5.2.13, 11.5.2.15 |

No.PropertyDescriptionClassificationReference
775RoleThe role of the scrollbar must be communicated to the Accessibility API (see

Information about this article

Date:
15.01.2024
License:
CC-BY-SA 4.0
Version:
1.0

You are welcome to send feedback by email about our handout!