There are three basic types of lists in HTML:
1. Unordered lists,
-
Unordered lists should be used when a set of items can be placed in any order.
- Raindrops on leaves
- Bright colorful butterfly
- Beautiful roses
- Black horse running on a green field
2. Ordered lists
-
Ordered lists should be used when the list items need to be placed in a specific order.
3. Definition lists
-
Definition/description lists are used to describe or define the items in the list.
Screen Reader notify users when they come to a list and tell them how many items are in a list. This helps listeners know what they are listening to, and what to expect as they listen to it.
If you don’t mark up a list as a real list—for example, if you use a table to create a fake list, or you use the
element to create a fake list—screen readers cannot inform the listener that they are listening to a list, and cannot let them know how many items are in the list.
Good Example: An unordered list with proper markup
Here is an unordered list, using proper semantic markup:
Begin code:
these are a few of my favorite things
End code.
Bad Example: Fake list created with break (
) elements
Even though screen readers will read all of the text in the fake list below, blind users won’t be told that it is a list, so they won’t benefit from any semantic cues.
Begin code:
These are a few of my favorite things :
Raindrops on roses
Bright copper kettles
Snowflakes that stay on my nose and eyelashes
End code.
Navigating lists with screen readers
Method 1: Show All Lists
Screen Reader & Browser Command
JAWS with Chrome, IE: Insert + Control + L
NVDA with Firefox, Chrome Not available
Method 2: Navigate from One List to the Next
Screen Reader & Browser Command
JAWS with Chrome, IE: Press L
NVDA with Firefox, Chrome: Press L
Method 3: Navigate from One List Item to the Next
Screen Reader & Browser Command
JAWS with Chrome, IE: Press I
NVDA with Firefox, Chrome: Press I
