Synonyms: Slide show, diashow, image rotator, cover flow, element flow, slider

See also: Accordion , Tabs

A carousel is used for the grouping of blocks of content that can be scrolled through (see DIN EN ISO 9241-161: 8.3).

Several implementation variants are possible, including:

  • Only one content block is visible at a time, several content blocks are visible, or all content blocks are visible.
  • The visible content blocks are completely visible, conceal each other or are truncated at the edge of the screen.
  • The content blocks are arranged vertically or horizontally side by side, in a circle, or one above the other.
  • All visible content blocks are displayed in the same way or a central content block is highlighted, while the content blocks are displayed adjacently in smaller form or grayed out.
  • It is possible to scroll through the content blocks automatically or this can be done by the user. - The scrolling through the content blocks takes place using a scrollbar , button for scrolling back and forth, or with a pagination .
  • The content blocks may contain graphical elements, text, and control elements.

Examples:

Figure: Carousel
No.PropertyDescriptionClassificationReference
876ContrastIf the control elements of the carousel are labeled with text, they must have a contrast ratio of at least 4.5:1.MustEN 301 549: 9.1.4.3, 11.1.4.3
877ContrastIf the control elements of the carousel are labeled with graphics, they must have a contrast ratio of at least 3:1.MustEN 301 549: 9.1.4.11, 11.1.4.11
878ContrastIf, in terms of the pagination, the current page only differs from the rest of the pages due to its color, the colors must have a contrast ratio of at least 3:1.MustEN 301 549: 9.1.4.1, 11.1.4.1
879AnimationIf the content blocks in the carousel are scrolled through automatically, a mechanism must be implemented to stop the automatic scrolling and it must then be possible to scroll through the content blocks manually.MustEN 301 549: 9.2.2.1, 11.2.2.1, 9.2.2.2, 11.2.2.2
880AnimationIf moving animations are displayed during the operation of the carousel, a mechanism should be available to disable them(see ) animationsfocus indicator
No.PropertyDescriptionClassificationReference
882Use of the keyboardIt must be possible to access, operate and exit the carousel and the elements that it contains with the keyboard (see Use of the keyboard table, below).MustEN 301 549: 9.2.1.1, 11.2.1.1, 9.2.1.2, 11.2.1.2
883Use of the keyboardThe hidden content blocks and their contents must not receive keyboard focus.MustEN 301 549: 9.1.3.1, 11.1.3.1
884UpdatesDuring the focusing of the control elements of the carousel, no change of contextnavigation sequenceuse of the pointing device
Permalink "Use of the keyboard: carousel"
ActionKeyClassification
Focusing of the first element in the carouselTABRequired
Exiting the carouselTAB

Note: There can be several control elements within the carousel that have been previously focused with TAB.

Required
Navigating within the carouselTAB or LEFT/RIGHT/UP/DOWN ARROW (depending on the used control element)Required
Quick navigation between the content blocksPOS1, END, PAGE UP/DOWNRecommended
Activating of the control elements in the carouselENTER or SPACE (depending on the used control element)Required
Permalink "Use of the pointing device: carousel"
ActionKeyClassification
Enabling of the control elements in the carouselleft clickRequired
No.PropertyDescriptionClassificationReference
888RoleThe role of the control elements in the carousel must be communicated to the Accessibility API (see Accessibility APIElement statusFocus indicator

Information about this article

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