Lists

Proper Semantic Usage

Most word processors and email clients provide some function (e.g. rich text or WYSIWYG editor) to create ordered and unordered lists. Where this functionality is available, it should be used. Using the semantic version of lists allows screen readers to properly read list items, including indicating the number of list items in the list.

Where word processor functionality is possible, never use spacing to format any alignment issues or special characters (e.g., *, !, -, +, #, ^) to lay out content.
Where word processor functionality is possible, never use special characters (e.g., *, !, -, +, #, ^) to emphasize the importance of something.
Do use bold (the strong HTML tag) or italics (the em HTML tag) on important phrases.
When needed, use a colon (:) to introduce a list, not a hyphen (-) or a comma (,).
Use a colon to introduce a fact or important information (e.g., "Note:", "Example:"), but do not use them at the end of a heading (Heading 1 - 6) as the format itself introduces information by default.

Examples of unsemantic lists

* List Item 1
* List Item 2
* List Item 3

Why is it ineffective?

Without semantic formatting, screen readers view the "bullet" as another character in the paragraph, and it reads it as just another part of the paragraph. It provide no indication that it is a list or use the list mode functionality.

- List Item 1
-  List Item 2 is
   very long, but I
   want it to line up
- List Item 3

Why is it ineffective?

Without semantic proper formatting, screen readers view the "bullet" as another character in the paragraph, and it reads it as just another part of the paragraph. It provide no indication that it is a list or use the list mode functionality. Similarly, the spaces are read in with the rest of the content. Spacing also changes from one screen size to the next, so it will wrap differently, making it look very unbalanced on many screen sizes.

How-to

Web pages can have a variety of lists, including:

ol: ordered or numeric list
ul: unordered or bulleted list

Lists in these blocks include list items which are li tags. A normal list may look something like this:

<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>

When an li tag includes its own ol or ul block, it is a nested list. A nested list may look something like this:

<ul>
<li>List item 1
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</li>
<li>List item 2</li>
</ul>

Lists should not contain other HTML tags, like heading tags or table tags, since they represent lists of items. They can use inline tags to define portions of a list item, such as strong or em tags to emphasize portions of the text.

If the list style needs to be changed, this can be done either using classes to define the list style type or inline:

Unordered list types
- Note: Per Technique G140: Separating information and structure from presentation to enable different presentations, inline styles should be avoided and classes should be used to defined unordered list style types.
Ordered list types

Making the document accessible in Microsoft first improves accessibility of the PDF document. This is because defining the tags in a PDF document as lists is not readily available in the Reading Order menu options, like other common tags. Also, the tags are slightly different from HTML tags:

L: This is the List tag, which can contain one or more LI tags.
LI: This is the List Item tag. List item tags can contain Lbl and LBody tags.
Lbl: This is the List Item Label tag. This contains the list style type, such as an item number or bullet character.
LBody: This is the List Item Body tag.

Therefore, the tag structure within a PDF document might look something like this:

<L>
- <LI>
  - <Lbl>
  - <LBody>
- <LI>
  - <Lbl>
  - <LBody>

View PDF Accessibility: Lists video from the Microsoft Enable PDF Accessibility Training YouTube Playlist.

Not all areas in Cascade CMS allow you to use lists. Only rich text editor areas, such is WYSIWYG Content or Content in an Accordion area, will have options for list items. It is important to use them only in those areas because adding spaces or special characters in the other areas does not turn them into lists.

Menus in those areas include buttons for Bullet list and Numbered list. Dropdown menus allow you to pick the list style type.

Lists

Proper Semantic Usage

Examples of unsemantic lists

Why is it ineffective?

Why is it ineffective?

How-to

References

EIR Accessibility Coordinator

Lists

Proper Semantic Usage

Examples of unsemantic lists

List styling with special characters

List styling with special characters and lined up with spaces

How-to

HTML Code

Adobe Acrobat

Cascade CMS

Microsoft 365 (formerly Microsoft Office 365)

References

Guides and How-To's

Simulations

EIR Accessibility Coordinator