| Page Properties | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Pagination, Load More and Carousels are “list controls” and allow for a mechanism to divide lists when space is limited. Filters and Sorting are also list controls.
Key Content
Item | Type | Notes |
List name | ||
List description | ||
… | ||
|
|
...
Lists in and of themselves don’t have a specific visual style. But within lists, there are common layout patterns.
...
Discuss grid vs flexbox and how to deliver a centred option (e.g. 3 + 2).
Behaviour
Lists themselves are often guided by the content that exists within them, so don’t specifically have a behaviour though there are some behavioural ‘extensions’ to be mindful of.
Lists are always structural, but can also be semantic. Semantic lists allow for ordered and unordered lists (and potentially definition lists).
Any individual list can be considered critical or optional. A critical list always displays its entire contents and is generally used with the list of the core content of the page (e.g. the main product list on a product listing page. An optional list can display a portion of the list, with the remained revealed through user interaction of list controls.
List controls include carousels, ‘batch loading' and pagination, which are defined separately within this section.
Filtering and sorting are also list controls that fall outside of the MVP.
...
Semantic lists, marked as <li> within an ordered list <ol> or unordered list <ul> will provide a count of the items in the list to screen-readers to aid orientation. Where optional lists hide a portion of the list from display, semantic list markup would only reveal the visible portion and deliver a list count that is misleading. For this reason, optional lists need to deliver an alternative experience. The general best practice recommendation is to create an item count such as “showing X of Y items” and apply a polite live region to that phrase. If/when list controls are applied (e.g. carousel or load more) the user will be told the status of what is available.
Lists can be named and potentially even described. These fields can be used to populate aria-label, aria-labelledby and aria-describedby functions as relevant.
For long lists, if keyboard users are required to tab through a large amount of items it is often considered best practice to offer those users the ability to skip the list (much like a hidden skip link at the start of the page which becomes visible on focus). This is not needed for all lists, but is a valuable enhancement where there are a lot of tab-stops.
Analytics & Data
Tracking of list performance for some types of lists is critical to understanding performance. An example is the ability to track list impressions in Google Analytics in a True-View style. This technique requires a data-attributes to log the position that the item sits within the list.
...