• Ordered list mark-up SHOULD be given to the items which need to follow some sequential order. It is also known as “Numbered list”.
• The ordered list items displays numbers such as “1”, “2”, “3”, “I”, “II”, “III” and so on.

Implementation

• Ordered list SHOULD be marked up using <ol> element.
• The items inside the ordered list SHOULD be marked up using <li> element.

For example,

<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

• Unordered list mark-up SHOULD be given to the items which don&8217;t follow any such sequential order. It is also known as a ”Bulleted list“.
• The unordered list items are marked as bullets (small black circles) by default.
  • The default bullets CAN be modified to a custom icon through CSS.

Implementation

HTML

• The unordered list SHOULD be marked up using <ul> element.
• The items inside the unordered list SHOULD be marked up using <li> element.

For example,

<ul>
    <li>Cabbage</li>
    <li>Cauliflower</li>
    <li>Brussels sprouts</li>
    <li>Broccoli</li>
</ul>

ARIA

Use using ARIA as Native HTML elements supports accessibility out of the box.

• Roles such as list and listitem CAN be used to mark-up the unordered list.
• role="list" CAN be given to the <div> element containing all the list items.
• role="listitem" CAN be given to the <div> elements containing the list items.

For example,

<div role="list">
    <div role="listitem">Cabbage</div>
    <div role="listitem">Cauliflower</div>
    <div role="listitem">Brussels sprouts</div>
    <div role="listitem">Broccoli</div>
</div>

• The description list contains two related values in each list items.
  • They are: “Term / Name” and “Value / Description” of the “Term / Name”.

Implementation

• Description list SHOULD be marked up using <dl> element.
• <dt> element SHOULD be used to define the term of the list item.
• <dd> element SHOULD be used to define the description or definition of the <dt> element.

For example,

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

• A nested list in HTML is a list within a list.
• Developers CAN make a nested unordered list, a nested ordered list, or even an ordered list nested inside an unordered list or vice versa.
• Avoid stray start and end <ul> and <li> elements.

For example,

<ul>
    <li>
        America
        <ul>
            <li>Alabama</li>
            <li>Alaska</li>
        </ul>
    </li>
    <li>
        India
        <ul>
            <li>Tamil Nadu</li>
            <li>Kerala</li>
        </ul>
    </li>
    <li>
        France
        <ul>
            <li>Auvergne-Rhône-Alpes</li>
            <li>Bourgogne-Franche-Comté</li>
        </ul>
    </li>
</ul>

A well-defined list benefits majorly the below users.

• People with visual disabilities
• People with cognitive disabilities