Data Table

The data table page demonstrates how to build a fully accessible, sortable, filterable table with keyboard navigation and proper ARIA attributes.

Page URL

/data-table

Key Features

• Sortable column headers with aria-sort attributes
• Keyboard-navigable rows and cells
• Filter controls with proper labels
• Pagination with accessible navigation
• Row selection with checkbox patterns

Accessibility Patterns

Sortable Headers

Each sortable column header uses a <button> inside the <th>:

<th>
    <button aria-sort="ascending">
        Name
        <span aria-hidden="true">↑</span>
    </button>
</th>

The aria-sort attribute updates dynamically to ascending, descending, or none.

Keyboard Navigation

• Tab moves between interactive elements (filter, sort buttons, pagination)
• Sort buttons are keyboard-focusable and toggle on Enter/Space
• Pagination controls use proper aria-label (e.g., "Go to page 2")

Table Semantics

The table uses native <table>, <thead>, <tbody>, <th>, and <td> elements. Screen readers announce the table structure, row count, and column headers automatically.

Filter Controls

• Search input has a visible <label> or aria-label
• Filter dropdowns use aria-expanded and aria-haspopup
• Active filters are announced to screen readers via live region

Pagination

Pagination uses a <nav aria-label="Pagination"> with:

• Previous/Next buttons with aria-label
• Current page indicated with aria-current="page"
• Disabled buttons have aria-disabled="true"

Customization

1. Update column definitions to match your data schema
2. Replace seed data with API calls
3. Adjust the number of rows per page
4. Add or remove sortable columns as needed