contained-list/accessibility

9 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Contained list keyboard interactions with Tab, Space, and Enter

The contained list component uses Tab key for navigation between actionable items. Both Space and Enter keys are used to activate components in interactive variants. Users tab between any actionable items in the list, regardless of whether each item is clickable or contains an action button.

Multiple tab stops in contained list with mixed interaction

When a contained list contains both clickable rows and action items, there are multiple tab stops on each row. Users can tab to the clickable row itself, and then to individual action buttons on that row.

Design annotation requirement for clickable contained list rows

Designers must annotate when rows in a contained list are intended to be clickable to help developers distinguish them from the default non-interactive contained list. Clickable buttons on each row do not need to be annotated since they are visually identifiable.

Contained list HTML structure with ARIA labelledby

The contained list is implemented as a list element (usually a `<ul>`) with each item as an `<li>`, and the list title is associated with the list through use of `aria-labelledby`. Any operable variant, whether a clickable list or a list with action items, implements a `<button>` as a child of the `<li>`.

Contained list accessibility features provided by Carbon

Carbon incorporates keyboard operation into the contained list component, improving the experience of blind users and others who operate via the keyboard. The standard contained list component already incorporates accessibility, though design annotations are needed for specific instances such as clickable rows.

Lists do not require keyboard operability

Lists are not keyboard operable unless the list items themselves are operable. List items retain their component's default keyboard interaction. For example, in a list of links, each link will be in the tab order and can be activated by Enter.

Carbon uses native HTML for lists

Carbon uses native HTML unordered (ul) and ordered (ol) lists and list items (li), then styles them with CSS.

List numbering and bullets use CSS pseudo-elements

Carbon uses ::before and ::marker CSS pseudo-elements for the numbering and bulleting of lists, which are properly read by assistive technologies such as screen readers.

No accessibility annotations needed for lists

No accessibility annotations are needed for lists themselves in Carbon.

Give your agent this brain