Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Byte007 lists #917

Merged
merged 4 commits into from
Nov 14, 2024
Merged

Byte007 lists #917

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1633b70
Stage Byte No. 7 Lists
michaelhortongsa Nov 2, 2024
2ed6d1b
update per comms
michaelhortongsa Nov 6, 2024
dc89568
Update per comms and date
michaelhortongsa Nov 12, 2024
f5c4467
Change date published
michaelhortongsa Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
159 changes: 159 additions & 0 deletions _posts/2024-11-14-byte-007-lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
---
layout: post
permalink: blog/accessibility-bytes/lists/
type: article
title: 'Accessibility Bytes No. 7: Information Grouped in a List'
tags: Accessibility-Bytes Content-Creation Testing #choose one or more (comma separated): Accessibility-Bytes, Acquisition, Content-Creation, Design-and-Develop, Events, Policy-and-Management, Testing
social_img: 'https://assets.section508.gov/files/images/social-media-og-image-bytes.jpg'
created: 2024-10-16
description: "<strong>Do you know some people rely on structured content to understand and navigate information grouped in lists?</strong><p>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."
contributors:
redirect_from:
- blog/accessibility-bytes/7/ #Allows users to navigate by number
---
<h2 style="line-height:1.2;">Do you know some people rely on structured content to understand and navigate information grouped in lists?</h2>

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&mdash;such those in Microsoft Office 365* including Word, PowerPoint, OneNote, and Outlook&mdash;is straightforward and can be done using either bulleted, numbered, or multilevel lists. Here’s how to create each type:

<div class="tablet:grid-col" style="margin: auto; max-width: 100%; text-align: center; padding: 10px 0px">
<div class="margin-top-1"><img src="https://assets.section508.gov/files/images/byte-007-figure-1.jpg" alt="" aria-describedby="figure-1" class="border-2px border-base-light shadow-2 padding-1">
</div>
<div class="font-mono-3xs margin-x-auto auto" style="max-width: 98%; text-align: center;"><span id="figure-1"><strong>Figure 1.</strong> Microsoft Word Home Ribbon with unordered and ordered list controls highlighted.</span>
</div>
</div>

### 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.

<div class="code-box" style="width: 100%; background-color: #444;">
<span class="code-box-text">
&lt;ul> <br>
<span class="tab-16">&lt;li>Item 1&lt;/li></span><br>
<span class="tab-16">&lt;li>Item 2&lt;/li></span><br>
<span class="tab-16">&lt;li>Item 3&lt;/li></span><br>
&lt;/ul><br>
</span>
</div>

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.

<div class="code-box" style="width: 100%; background-color: #444;">
<span class="code-box-text">
&lt;ol> <br>
<span class="tab-16">&lt;li>First item&lt;/li></span><br>
<span class="tab-16">&lt;li>Second item&lt;/li></span><br>
<span class="tab-16">&lt;li>Third item&lt;/li></span><br>
&lt;/ol><br>
</span>
</div>

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:

<div class="code-box" style="width: 100%; background-color: #444;">
<span class="code-box-text">
&lt;ol type="A"> <br>
<span class="tab-16">&lt;li>First item&lt;/li></span><br>
<span class="tab-16">&lt;li>Second item&lt;/li></span><br>
<span class="tab-16">&lt;li>Third item&lt;/li></span><br>
&lt;/ol><br>
</span>
</div>

### Nested List (Lists within Lists)
To create sub-lists within a list, you can nest **<ul>** or **<ol>** elements inside **<li>** tags.

<div class="code-box" style="width: 100%; background-color: #444;">
<span class="code-box-text">
&lt;ul><br>
<span class="tab-16">&lt;li>Item 1</span><br>
<span class="tab-32">&lt;ul></span><br>
<span class="tab-48">&lt;li>Subitem 1.1&lt;/li></span><br>
<span class="tab-48">&lt;li>Subitem 1.2&lt;/li></span><br>
<span class="tab-32">&lt;/ul></span><br>
<span class="tab-16">&lt;/li></span><br>
<span class="tab-16">&lt;li>Item 2&lt;/li></span><br>
&lt;/ul><br>
</span>
</div>

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.

<div class="code-box" style="width: 100%; background-color: #444;">
<span class="code-box-text">
&lt;ol type="A"><br>
<span class="tab-16">&lt;li>Item 1</span><br>
<span class="tab-32">&lt;ol type="i"></span><br>
<span class="tab-48">&lt;li>Subitem 1.1&lt;/li></span><br>
<span class="tab-48">&lt;li>Subitem 1.2&lt;/li></span><br>
<span class="tab-32">&lt;/ol></span><br>
<span class="tab-16">&lt;/li></span><br>
<span class="tab-16">&lt;li>Item 2&lt;/li></span><br>
&lt;/ol><br>
</span>
</div>

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
* [Use Built-in Features to Create Lists in Microsoft Word](https://www.section508.gov/training/documents/aed-cop-docx03/)
* <a href="https://www.w3.org/WAI/tutorials/page-structure/content/" target="_blank" class="usa-link--external">Content Structure | W3C</a>
* <a href="https://webaim.org/techniques/semanticstructure/" target="_blank" class="usa-link--external">Semantic Structure: Regions, Headings, and Lists | WebAIM</a>
* <a href="https://designsystem.digital.gov/components/list/" target="_blank" class="usa-link--external">List | U.S. Web Design System (USWDS)</a>

<div class="border-base radius-lg border-1px padding-1" style="width: 100%; background-color: #f5f9fc;">
To subscribe to, manage, or unsubscribe from <em>Accessibility Bytes</em>, visit <a href="https://public.govdelivery.com/accounts/USGSA/subscriber/new?topic_id=USGSA_1324" target="_blank" class="usa-link--external">GSA Email Updates</a>.
</div>

<div class="border-base radius-lg border-1px padding-1 bg-primary-lighter" style="margin-top: 1.0em;"><strong>*Disclaimer</strong>: 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.</div>

**Reviewed/Updated:** November 2024
15 changes: 14 additions & 1 deletion assets/css/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1527,4 +1527,17 @@ div[role=rowheader] {
font-family: Roboto Mono Web, Bitstream Vera Sans Mono, Consolas, Courier, monospace;
color: #454545;
font-size: 0.95rem;
}
}

.tab-16 {
display: inline-block;
margin-left: 16px;
}
.tab-32 {
display: inline-block;
margin-left: 32px;
}
.tab-48 {
display: inline-block;
margin-left: 48px;
}