✎ Technique: Identifying lists of content
Source: https://accessibility.huit.harvard.edu/technique-semantic-list-markup Parent: https://accessibility.huit.harvard.edu/accessibility-topics/text
Lists are collections of related content. For example, a navigation bar is a list of links or a set of instructions may be an ordered (numbered) list. Clearly identifying a set of items as a list helps people understand that relationship. When you include a list in your page content, this relationship needs to be conveyed visually, and it also needs to be conveyed to people using screen readers.
Examples
✗ Bad example
It's perfectly possible to create a structure that looks like a list by using characters to mimic bullets:
* Mars
* Jupiter
* Saturn
This might look like a list, but to screen readers, it's just three lines of plain text, each preceded by an asterisk.
(Note: Some content editing systems, like Markdown or MediaWiki, will convert asterisks into proper list items when you publish the content. But you should check that this will happen before writing lists!)
✓ Good example
When you use an online editor or word-processing software to write lists, make sure you use its list option to create lists. When the content is published, it will be converted to a proper list, using HTML that’s similar to this example:
Here, an unordered list is represented by a
- element for the list and
- elements for each item:
<ul>\<li>Mars</li>\<li>Jupiter</li>\<li>Saturn</li>\</ul>This list will be identified by screen readers. For example, when a screen reader user enters the list, it will say something like "list, item 1, one of three." On leaving the list, some screen readers will announce "out of list." In JAWS, it's possible to navigate between list items using dedicated keyboard shortcuts: "i" to go forwards and SHIFT + "i" to go backwards.
Video: Creating lists in WYSIWYG editors
See also: