Skip to page content

Lists

Lists are one of the best content solutions for readability:

  • They simplify complex concepts
  • They provide step-by-step processing.
  • They organize content into logical structure. 

Proper Semantic Usage

Most word processors and email clients provide some function (e.g. WYSIWYG editor) to create ordered (numeric, <ol>) and unordered (bulleted, <ul>) lists. Where this functionality is available, it should be used. Using the semantic version of lists allows screen readers to properly read list items (<li>), 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.
Bad List Examples
Bad List Example Why is it Ineffective?
* List Item 1
* List Item 2
* List Item 3
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
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.

References

Guides and How-To's

Guidelines

Simulations