Accessibility Bytes No. 7: Information Grouped in a List

Do you know some people rely on structured content to understand and navigate information grouped in lists?

Lists in HTML and documents serve as structured ways to present grouped information, making it easier for readers to understand relationships between items. Lists help break down information into manageable parts, improving readability and navigation. HTML and documents share two main types of lists:

Ordered List (Numbered List): These lists present items in a numbered or alphabetically-ordered sequence, which is useful when steps or priority matters.
Unordered List (Bulleted List): These lists display items in a bulleted format, ideal for grouping related but unordered content.

For accessibility, lists are essential because they provide semantic structure that screen readers can recognize and announce to users. Screen readers can identify and convey the number of items in a list, helping users who are visually impaired understand content layout and relationships without visual cues. This structure also enables users with motor impairments to navigate the document more easily, especially when using keyboard shortcuts to move between list items.

Document Lists

Creating lists in electronic documents authoring tools—such those in Microsoft Office 365* including Word, PowerPoint, OneNote, and Outlook—is straightforward and can be done using either bulleted, numbered, or multilevel lists. Here’s how to create each type:

Figure 1. Microsoft Word Home Ribbon with unordered and ordered list controls highlighted.

Bulleted List

Select the text you want to turn into a bulleted list or place the cursor where you want to start the list.
Go to the Home tab on the Ribbon.
In the Paragraph group, click the Bullets button (●).
Word will automatically create a bulleted list and you can press Enter to add new items. Each new line will start with a bullet until you press Enter twice to end the list.

Numbered List

Select the text you want to turn into a numbered list or place the cursor where you want to start it.
Go to the Home tab on the Ribbon.
In the Paragraph group, click the Numbering button (1., 2., 3., etc.).
Word will begin numbering the list automatically. Press Enter to add additional items to the list, or press Enter twice to end the list.

Multi-Level List

Place your cursor where you want to start the list or select text.
Go to the Home tab and select the Multi-level List button in the Paragraph group.
Choose a list style from the dropdown menu. This allows you to create lists with multiple levels (e.g., outlines).
To increase or decrease indentation for list items, press Tab or Shift + Tab.

Formatting List

To customize bullets or numbering, right-click on a bullet or number and select Define New Bullet or Set Numbering Value.
You can change bullet symbols, number formats, and even use custom symbols or images as bullets.

HTML List

Creating lists in HTML is straightforward using specific tags for each type of list. Here’s how to create unordered lists, and ordered lists.

Unordered List (Bulleted List)

To create a bulleted list, use the <ul> tag for the list itself and <li> tags for each list item.

This code creates a bulleted list with three items.

Ordered List (Numbered List)

To create a numbered list, use the <ol> tag with <li> tags for each item.

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

This will generate a numbered list starting at 1 by default.

Customizing the Ordered List

You can customize the numbering style by using the type attribute inside the <ol> element:

type=”1” for numbers (default).
type=”A” for uppercase letters.
type=”a” for lowercase letters.
type=”I” for uppercase Roman numerals.
type=”i” for lowercase Roman numerals.

Example:

<ol type="A">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Nested List (Lists within Lists)

To create sub-lists within a list, you can nest <ul> or <ol> elements inside <li> tags.

<ul>
<li>Item 1
<ul>
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ul>
</li>
<li>Item 2</li>
</ul>

This will create a nested list where “Subitem 1.1” and “Subitem 1.2” are indented beneath “Item 1”.

Multilevel List (Different Types of Lists within Lists)

To create sub-lists within a list, you can nest <ul> or <ol> elements inside <li> tags and mix the type to create multilevel lists.

<ol type="A">
<li>Item 1
<ol type="i">
<li>Subitem 1.1</li>
<li>Subitem 1.2</li>
</ol>
</li>
<li>Item 2</li>
</ol>

This will create a multilevel list where “Subitem 1.1” and “Subitem 1.2” are indented and use lower-case Roman numerals beneath “Item 1” which uses an uppercase letter ordering.

Additional Resources

To subscribe to, manage, or unsubscribe from Accessibility Bytes, visit GSA Email Updates.

*Disclaimer: Reference in this site to any specific commercial product, process, or service, or the use of any trade, firm or corporation name is for the information and convenience of the public, and does not constitute endorsement, recommendation, or favoring by GSA. GSA does not guarantee that outside websites or products comply with Section 508 (accessibility requirements) of the Rehabilitation Act.

Reviewed/Updated: November 2024