See also: Selection list , tree structure , table

A list is used for the structured display of data. A list contains several list entries. Lists can be sorted or unsorted. Lists can be nested inside each other. Lists often have a visual indicator at the beginning of each list entry, which is also known as a bullet point, e.g.

  • a dash or an icon for an unsorted list
  • a letter or a number for a sorted list.

List entries can contain control elements.

Figure 22: Unsorted and sorted list
No.PropertyDescriptionClassificationReference
374ContrastThe text content of the list entries must have a contrast ratio of at least 4.5:1 with respect to the background.

Note: In the case of sorted lists, this also applies to bullet points insofar as they convey information (e.g. if they have a number or letter).

MustEN 301 549:
9.1.4.3, 11.1.4.11
375ContrastIf the list entries are only identifiable as such on the basis of their color design, the color must have a contrast ratio of at least 3:1 with respect to the neighboring colors.

Note 1: A list entry might be recognizable as such on the basis of its bullet point or background color, for example.

Note 2: The requirement does not apply if the list entries are clearly identifiable as such, because of the spacing between them, for example.

MustEN 301 549:
9.1.4.11, 11.1.4.11
376ContrastThe graphic content of the list entries must have a contrast ratio of at least 3:1 with respect to the background.

Note: In the case of sorted lists, this also applies to graphic bullet points insofar as they convey information.

MustEN 301 549:
9.1.4.11, 11.1.4.11
377ResizingTo make its contents perceptible without horizontal scrolling, no list entry may be wider than 320 px with 400% zoom.MustEN 301 549:
9.1.4.10, 11.1.4.10
378HierarchyIf the list contains nested lists, the hierarchy should be clearly visible.

Note: Nested lists are usually represented by indentation. Different bullet points can also be used depending on the hierarchy level.

ShouldDIN EN ISO 9241-125: 6.1.2
379Focus visibilityIf a list entry or an element in it receives the keyboard focus, the focus indicator must be visible (see Focus indicator
9.2.4.7, 11.2.4.7
No.PropertyDescriptionClassificationReference
380Use of the keyboardIt must be possible to access, operate and exit all control elements in the list 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
381Click areaThe click area of the control elements in the list should total at least 24 x 24 px (see Use of the pointing device

Use of the keyboard: list (in an application that supports the virtual cursor)

Permalink "Use of the keyboard: list (in an application that supports the virtual cursor)"

With applications that support the virtual cursor , neither the list nor its list entries receive the keyboard focus. It should only be possible for interactive elements within the list entries to be accessed and operated with the keyboard.

ActionKeyClassification
Focusing interactive elements in the listTABRequired
Exiting interactive elements in the listTABRequired
Operating interactive elements in the listCorresponding to the respective elementRequired

Use of the keyboard: list (in an application that does not support the virtual cursor)

Permalink "Use of the keyboard: list (in an application that does not support the virtual cursor)"

With applications that do not support the virtual cursor, each list entry must be able to receive the focus so that its contents are perceptible with assistive technology (e.g. screen reader).

ActionKeyClassification
Focusing of the list (first and/or last focused list entry)TABRequired
Exiting the listTABRequired
Cell-based navigation within the table in navigation modeUP/DOWN ARROWRequired
Quick navigation (to the first and/or last list entry)POS 1, ENDRecommended
Quick navigation (with a defined increment)PAGE UP/DOWN

Note: The increment should match the amount of visible entries in the list.

Recommended

Note: In the programming languages for software, there is often no element for lists. Instead of this, selection lists are used for non-nested lists, and tree structures are used for nested lists. In this case, the selection list and/or tree structure should include a note in its label or description that it is only for the presentation of content and not for the selection.

Use of the pointing device: list

Permalink "Use of the pointing device: list"
ActionKeyClassification
Operation of interactive elementsCorresponding to the respective elementRequired
No.PropertyDescriptionClassificationReference
382RoleThe (sorted and/or unsorted) list and list entry roles must be communicated to the Accessibility API (see Accessibility APIlabeldescriptionAccessibility APIAccessibility APIFokusindikatorAccessibility API

Practical tip: lists in Web applications

Permalink "Practical tip: lists in Web applications"

Screen reader output of sorted and unsorted lists

Permalink "Screen reader output of sorted and unsorted lists"

With the virtual cursor :

  • JAWS:
    • List with [amount] entries (nesting [level])
    • [Bullet point] [list entry]
    • List end (nesting [level])
  • NVDA:
    • List with [amount] entries
    • [Bullet point] [list entry]
    • Outside of list
  • Windows Narrator:
    • Open list
    • [Position] of [amount] level [level] [bullet point] [list entry]
    • Close list

Note: The Windows Narrator incorrectly outputs “heading level [number]“ for each list entry due to the implicit and/or explicit aria-level.

Unsorted lists are marked with <ul> and <li>. For control elements in a list, <menu> is also used instead of <ul>. The <menu> element is communicated to the Accessibility API with the semantics of the <ul> element.

Sorted lists are marked with <ol> and <li>. With sorted lists, it is possible to specify the start value with start, change the direction with reversed, and determine the type of bullet point with type.
Nested lists are implemented such that a list (<ol> or <ul>) is located within a <li> element of the parent list.

The difference between a sorted list and an unsorted list, i.e., between <ol> and <ul>, can only be identified visually and with the assistive technology on the basis of the bullet points. The bullet points should therefore match the list type.

Simple bullet points, such as disc for unsorted lists or decimal and/or lower-latin for sorted lists, should be chosen to ensure the correct output and to avoid lengthening it unnecessarily. The following sample values of the list-style-type CSS characteristic are output by the JAWS (first entry), NVDA (second entry, if different), and Windows Narrator (third entry, if different) screen readers as follows:

  • none: [no output]
  • disc: Bullet points
  • circle: round hollow bullet point / white bullet point / empty bullet point
  • square: black square / large filled black square / [no output]
  • disclosure-open: black downward pointing small triangle / black downward pointing small triangle / [no output]
  • disclosure-closed: filled right-pointing small triangle / black right-pointing small triangle / [no output]
  • decimal: [number]
  • lower-roman: [number; with numbers that only consist of one letter, just the letter; with numbers that consist of several letters, the individual letters or as a word] / [number; with numbers that consist of several letters, the individual letters] / [number; with numbers that consist of several letters, the letters as a word]
  • lower-latin: [letter]
  • lower-greek: [letter with the supplement “Greek lowercase”] / [no output] / [no output]
  • georgian: [no output]

List characters with list-style-image are not output by JAWS and NVDA and are output as an “image” (without alternative text) by Windows Narrator.

Further information: 4.4.5 The ol element - HTML Standard (whatwg.org) (External Link), 4.4.6 The ul element - HTML Standard (whatwg.org) (External Link), 4.4.7 The menu element - HTML Standard (whatwg.org) (External Link), 4.4.8 The li element - HTML Standard (whatwg.org) (External Link)

If the list is not implemented with the HTML element, it is also necessary to take account of the following:

  • The role of the list is communicated with role=list.
  • The role of the list entries is communicated with role=listitem.
  • Nested lists can be implemented with aria-level according to the ARIA specification. This is only output correctly by Windows Narrator, however. For nested lists to be output correctly by JAWS and NVDA, nested lists should be nested correctly in the source code (for example: <div role=list><div role=listitem>Entry 1<div role=list><div role=listitem>Entry 1.1 …).

Further information: list role - Accessible Rich Internet Applications (WAI-ARIA) 1.2 (w3.org) (External Link)

Information about this article

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