Axon 911 Frontend Docs
Search
Loading navigation…
Components
Table
Accessibility
Alignment Accessibility
Table
Open in Cursor
Open in Cursor
More open options
Alignment Accessibility
Alignment Accessibility
Copy link to this section
Cell alignment doesn't affect accessibility.
Alignment affects visual presentation only
Screen readers announce content regardless of alignment
Accessibility is maintained across alignments
Empty State Accessibility
Copy link to this section
Empty states are communicated clearly.
Empty state message is announced
Screen readers inform users table is empty
Message provides context
Responsive Accessibility
Copy link to this section
Tables remain accessible on different screen sizes.
Horizontal Scrolling
Copy link to this section
Horizontal scrolling is accessible.
Keyboard users can scroll horizontally
Focus indicators remain visible
Table structure is maintained when scrolling
Mobile Considerations
Copy link to this section
Ensure tables work on mobile devices.
Tables scroll horizontally on small screens
Touch targets meet minimum size requirements
Content remains accessible
Testing with Screen Readers
Copy link to this section
Test tables with screen readers for proper announcements.
Expected Announcements
Copy link to this section
Expected sequence:
Table encountered: "Table with 2 columns and 1 row"
Navigate to first header: "Name, column header"
Navigate to second header: "Status, column header"
Navigate to first data cell: "Item 1, row header, Name column"
Navigate to second data cell: "Active, Status column"
Complex Table
Copy link to this section
Expected announcements handle colspan correctly, associating merged header with both data columns.
Best Practices Summary
Copy link to this section
Ensure table accessibility by:
Using proper cell types (
ColumnHeader
,
RowHeader
)
Providing descriptive column headers
Using row headers when appropriate
Maintaining consistent table structure
Ensuring sufficient color contrast
Supporting keyboard navigation
Testing with screen readers
Handling empty states clearly
Making tables responsive
Keeping tables simple and understandable
Previous
Accessibility / Complex Cell Content
Next
Tabs / Usage
On this page
Alignment Accessibility
Empty State Accessibility
Responsive Accessibility
Horizontal Scrolling
Mobile Considerations
Testing with Screen Readers
Expected Announcements
Complex Table
Best Practices Summary