List

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.

Focus indicator). | Must | EN 301 549:
9.2.4.7, 11.2.4.7 |

Use of the pointing device). | Should | WCAG 2.2 |

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.

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).

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.

Accessibility API). | Must | EN 301 549: 9.1.3.1, 11.1.3.1, 9.4.1.2, 11.4.1.2, 11.5.2.5 | | @!383 | Role | The list and list entry roles can only be used for lists. Layout lists that are solely for the visual design and not for the display of structured data must not be assigned these roles. | Must | EN 301 549: 9.1.3.1, 11.1.3.1 | | @!384 | Name | If the list has a label or description, these must be communicated as the Accessible Name and/or Accessible Description (see

label and

description). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.5, 11.5.2.8 | | @!385 | Operation | It must be possible to access, operate and exit the list and/or the interactive elements that it contains with assistive technology (see

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.12, 11.5.2.17 | | @!386 | Update | Updates regarding the contents of lists must be communicated to the Accessibility API (see

Accessibility API). | Must | EN 301 549: 9.4.1.2, 11.4.1.2, 11.5.2.15 | | @!387 | Desktop: Position | The size and position of the list entries and the interactive elements they contain must be communicated to the Accessibility API (see

Fokusindikator). | Must | EN 301 549: 11.5.2.5, 11.5.2.13 | | @!388 | Element hierarchy | The parent / child relationships of the elements within the list must be communicated to the Accessibility API.

Note 1: The assistive technology requires this information to determine, among others, the amount of list entries, their position within the list and the hierarchy of nested lists.

Note 2: A list cannot be programmatically divided into different lists, for instance.

Accessibility API). | Must | EN 301 549: 9.1.3.1, 11.1.3.1 |

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

Date:

16.01.2024

License:

CC-BY-SA 4.0

Version:

1.0

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