Data Table

Tables make it easier for users to compare and analyse data. Data tables organize information with logical relationships and two-dimensional data structures from a data set into a grid with two axis. An example of two-dimensional data is a table of flight costs, each row represents an airline, and each column represents a destination. 

On this page

Use Cases

User should be able to:

  • Navigate headings and cells
  • Identify headings
  • Compare data points

Interaction and Style

Relevant WCAG Requirements

  • Info and Relationships

    Ensure information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. This means use proper HTML elements to structure your content, so it makes sense when read by assistive technology.

    WCAG 2.1 Understanding 1.3.1

  • Keyboard

    Ensure all functionality of the content is operable through a keyboard interface. This allows users who can't use a mouse or touchscreen to navigate and use your content.

    WCAG 2.1 Understanding 2.1.1

  • Focus Order

    If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability.

    WCAG 2.1 Understanding 2.4.3

  • Name, Role, Value

    For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

    WCAG 2.1 Understanding 4.1.2

Keyboard Navigation

KeyAction
TabFocuses between table cells or controls.
Enter/SpacebarActivates cell content or control.

Questions?

Connect with the DLS Team on Slack or by email.

Resources

Check out additional resources.