Overview
Whenever content on a web page or in a digital document can be described as a list of something, it should be created as a list, using the list features that are provided by the authoring tool. Most authoring tools provide one or more controls for adding unordered lists (with bullets) and ordered lists (with numbers).
When creating content, it is important to recognize when your content is a list of items. For example, university web pages often include lists of links, events, staff members, degree programs, and much more. When lists are explicitly created as lists, screen readers can inform their users that they have landed on a list and can provide additional information such as the number of items in the list, which is extremely helpful. It also facilitates navigation, as users can easily navigate between list items with a single keystroke.
Techniques
In HTML, code your lists using <ul>
(unordered list, usually displayed with bullets) or <ol>
(ordered list, usually displayed with numbers), depending on whether the order of list items is important.
TheĀ <dl>
(definition list) element is sometimes appropriate as well, for example to markup definitions in a policy or contract, vocabulary terms in a lesson, or frequently asked questions. However, screen readers do not currently differentiate between definition lists and unordered lists, so using this element is optional, but not a bad idea when it’s the correct choice for accurately representing the semantics of the content.
Rich content editors such as those used for adding content to Canvas, WordPress, or Drupal, all include multiple buttons on their toolbars for adding lists to web pages. The following screenshot shows the “Bulleted List” and “Numbered List” buttons in WordPress.
Most document authoring tools, including Microsoft Word, Google Docs, and others, include multiple buttons on their toolbars for adding lists to documents. The following screenshot shows the ribbon in Microsoft Word, which includes buttons for “Bullets”, “Numbering”, and “Multilevel list”. Each of these buttons has a pop-up menu that allows for a high level of customization.
The rich content editor in Canvas includes a single button for selecting “Ordered and Unordered Lists” from a popup menu. Depending on your screen size, it might be hidden behind the “More…” button (three dots).
WCAG 2.1 success criteria
The issues described on this page, and associated Techniques pages, map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:
- 1.3.1 Info and Relationships (Level A)