Lists (<ul>, <ol>, <dl>, <li>, <dt>, <dd>, <menu>)

When To Use

• Use <ul> elements to create unordered lists. ¹
• Use <ol> elements to create ordered lists. ²
• Use <dl> elements to create description lists. An instance where this element may be useful is in presenting glossaries or showcasing a set of key-value pairs. ³

Rules

• The benefit of lists to users that rely on assistive technology is, that they conveys context to the user like how many list items are contained in the list and that the elements in the list form some sort of group.
• Make sure to use the most appropriate list to increase semantics.
• To decide whether to use <ul> or <ol>, consider rearranging the order of the list items. If doing so alters the meaning of the list, then the <ol> element should be used. Otherwise, <ul> can be used. ¹
• You can also nest and switch freely between <ol> and <ul>. ^{1 2}
• Rules for description lists:
  • It is possible to have several consecutive <dt> or <dd> elements for a single entry. ^{5 7}
  • Avoid using ARIA roles such as "term" and "definition" in description lists, as this may cause unexpected behavior in iOS browsers. ⁷
• The <menu> element exposes the same semantics to the accessibility tree than the <ul> element. Therefore there is currently not benefit of using the <menu> element over the <ul>. ⁹
• Make sure that your design uses lists such a way, that they their meaning is unambiguous. For example by a Headline that describes the list or by using lists inside semantic elements like primary navigations.
  • Only if it is not possible to convey the meaning by other means you could give the list an accessible name if - and only if - it improves the usability. You can achieve this by using aria-label on the list itself. This technique is not supported by all ATs, which means the label may not be annouced for all users. ¹⁰
• Safari will remove the semantics of a list if you remove the list style, if the list is outside of a nav element. To enforce the semantics of a list use role="list". ¹¹

Examples

Description list example:

<dl>
    <dt>ARIA Comment Role</dt>
    <dd>To denote a comment/reaction to some content on the page, or to a previous comment.</dd>

    <dt>ARIA Image Role</dt>
    <dt>img element </dt> 
    <dd>Embeds an image into the document.</dd>

</dl>

Sources 

1. MDN: <ul>: The Unordered List element by Mozilla contributors is licensed under CC-BY-SA 2.5
2. MDN: <ol>: The Ordered List element by Mozilla contributors is licensed under CC-BY-SA 2.5
3. MDN: <dl>: The Description List element by Mozilla contributors is licensed under CC-BY-SA 2.5
4. MDN: <li>: The List Item element by Mozilla contributors is licensed under CC-BY-SA 2.5
5. MDN: <dt>: The Description Term element by Mozilla contributors is licensed under CC-BY-SA 2.5
6. MDN: <dd>: The Description Details element by Mozilla contributors is licensed under CC-BY-SA 2.5
7. Adrian Roselli: Brief Note on Description List Support by Adrian Roselli © Adrian Roselli
8. Bureau Of Internat Accessiblity: Tips for Making HTML Lists Accessible © Bureau of Internet Accessibility
9. MDN: <menu>: The Menu element by Mozilla contributors is licensed under CC-BY-SA 2.5
10. Results of labeling lists (and list items!) by Scott Ohara
11. Fixing" Lists by Scott Ohara