Chapter 5: Lists

Lists are quite common on web pages. They are used to denote similar items grouped together on a page. However it is worth understanding the types of lists supported by markup and how to use them effectively.

HTML markup support 3 types of lists.

1. Unordered list: These can have one or more items that are not necessarily sequential in order. In other words shuffling the items in this type of list do not change the meaning of effect the sequence. E.g. The list of grossery items.
2. Ordered list: Ordered list is used specifically when the items or points in the list have a sequence or order in which they have to be perceived by the user. Re-ordering these items will completely change the meaning or purpose of the content. E.g. The science experiment in the school.
3. Definition list: Definition list is used when the content of the page contains terms that have to be described to the user. Unlike unordered and ordered lists, definition lists contains two parts to each item. Definition term and definition description. E.g. Glossary, FAQs

Validation of lists

Check 1

1. Navigate to the page on the browser.
2. Check if the page contains any content that looks like a list.
3. Run Paul Adam’s lists bookmarklet and verify if the identified items are marked with appropriate list markup.
4. If the list markup is used then this requirement of the success criteria is considered as pass else failed.

Check 2

1. Open the page on the browser.
2. Run the Paul Adam lists bookmarklet.
3. Verify if all the items that are marked as lists are really list items or not.
4. If all the elements that are marked with list are real lists this requirement of success criteria is considered pass else failed.

Check 3

1. Open the page on the browser when screen reader is switched on.
2. Navigate through the page specifically where the lists are marked.
3. Verify if start of list and end of list are announced by the screen reader.
4. At the beginning of the list screen reader will announce number of items the list contain. Count if the list announced by screen reader and the items displayed are equal.
5. If step 3 and step 4 are passed this requirement of the success criteria is considered as pass else failed.

WCAG Success criteria

1.3.1 Info & relationshipps (Level A)