List

Description: There are three types of lists to display information. The lists are:

508 Guidelines: For nested items, the screen reader will inform the user that there is a nested list within a list, read the list group, and then identify the item itself.

Ordered List

  1. Item 1
    1. Nested Item 1
  2. Item 2
  3. Item 3

Unordered List


Definition List

First Item
Description of First Item
Second Item
Description of Second Item

Inline List Without Bullets


Bullet-less list with hoverable items


<ol>
    <li>Item 1
    	<ol>
    	   <li>Nested Item 2</li>
        </ol>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
            
Copy
<ul>
    <li>Item 1
    	<ul>
    	   <li>Nested Item 2</li>
        </ul>
    </li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
            
Copy
<dl>
    <dt>First Item</dt>
    <dd>Description of First Item</dd>
                    
    <dt>Second Item</dt>
    <dd>Description of Second Item</dd>
</dl>
            
Copy
<ul class="list-inline">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
            
Copy
<ul class="list-block">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
</ul>
            
Copy