Summary List

General

• Ensure sufficient colour contrast for all text
• Do not rely on colour alone to convey information in keys, use a clear label and consider position and context
• Provide clear, descriptive labels for all items
• Make all text links keyboard accessible
• Ensure the relationship between labels and values is clear

Web

Semantic markup

• Use a definition list (<dl>, <dt>, <dd>) for semantic HTML
• Alternatively, use a table structure with proper headers if edit links are present
• Ensure proper heading hierarchy for section titles

Definition list approach:

• Use <dl> for the summary list container
• Use <dt> for labels (definition terms)
• Use <dd> for values (definition descriptions)
• Use <dd> for action links as well, or wrap both value and links in a single <dd>

Key element accessibility

When using keys to relate to charts:

• Ensure keys have sufficient colour contrast
• Do not rely on colour alone — add text labels or patterns
• Use aria-describedby to associate the key with related chart elements if needed

Action links

• Provide descriptive aria-label for action links that include context (e.g., "Change email address" rather than just "Change")
• Ensure links are keyboard accessible
• Use consistent link text across similar actions
  

Keyboard navigation

• Users should be able to Tab through all action links
• Focus indicators must be clearly visible with
• Pressing Enter activates the focused link

Screen reader considerations

• Screen readers announce the relationship between labels and values through semantic markup
• When using definition lists, screen readers announce "term" and "definition"
• Action links should provide full context through aria-label or visually hidden text

React Native

Component structure

Summary lists can be created using View and Text components with appropriate accessibility properties:

Accessibility properties

• Container: Provide accessibilityLabel for the entire summary list collection if needed
• Labels: Use accessibilityRole="text" and ensure labels are clearly announced
• Values: Use accessibilityRole="text" for value content
• Keys: If using visual keys, ensure they have text equivalents or are announced appropriately
• Action links: Use accessibilityRole="link" or accessibilityRole="button" with descriptive labels

Reading order

Ensure the component hierarchy creates logical reading order:

1. Section title (if present)
2. Label
3. Value
4. Action links (with full context)

Touch targets

Ensure all interactive elements (action links) meet the minimum touch target size of 44px × 44px.

Responsive behaviour

On React Native, implement appropriate stacking behaviour based on available space, similar to responsive web behaviour.