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
Empty states are communicated clearly.
- Empty state message is announced
- Screen readers inform users table is empty
- Message provides context
Tables remain accessible on different screen sizes.
Horizontal scrolling is accessible.
- Keyboard users can scroll horizontally
- Focus indicators remain visible
- Table structure is maintained when scrolling
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
Test tables with screen readers for proper announcements.
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"
Expected announcements handle colspan correctly, associating merged header with both data columns.
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
