table-accessibility

Name: table-accessibility
Author: Owl-Listener

82stars25forks

How to install table-accessibility?

owl-listener/inclusive-design-skills/table-accessibility

$npx -y skills add Owl-Listener/inclusive-design-skills --skill table-accessibility

Installs into the current project.

Summary

Design data tables that work for screen readers and cognitive accessibility. Use when creating or reviewing tables, data grids, comparison tables, pricing tables, or any tabular data. Triggers on: table, data table, grid, spreadsheet, comparison table, pricing table, screen reade

Files · 1

View on GitHub

SKILL.md

1	# Table Accessibility
2
3	Design tables that communicate structure and relationships — not just
4	to sighted users scanning rows and columns, but to screen reader users
5	who navigate one cell at a time.
6
7	## When to Use a Table
8
9	Tables are for data that has relationships across two dimensions (rows
10	and columns). Don't use tables for layout.
11
12	- Use a table: comparing features across products, showing schedules,
13	displaying data with consistent categories
14	- Don't use a table: laying out a form, arranging cards, creating
15	visual columns of unrelated content
16
17	## Core Requirements
18
19	### Every Table Needs Headers
20	- Column headers: use <th> with scope="col"
21	- Row headers: use <th> with scope="row"
22	- Screen readers announce headers before each cell, so users always
23	know which column and row they're in
24	- Without headers, a screen reader user hears a stream of disconnected
25	values with no context
26
27	### Every Table Needs a Caption or Label
28	- Use <caption> element for HTML tables
29	- Or use aria-labelledby pointing to a visible heading
30	- The caption describes what the table contains:
31	"Pricing comparison for Standard, Pro, and Enterprise plans"
32	- Not just "Table 1" or "Data"
33
34	### Simple Tables Over Complex Tables
35	- Prefer simple tables with one row of column headers
36	- Avoid merged cells (colspan, rowspan) wherever possible
37	- If merged cells are necessary, use proper headers/id/scope
38	associations
39	- If a table needs merged cells to make sense, consider whether
40	it should be split into multiple simpler tables
41
42	## Cognitive Accessibility for Tables
43
44	### Visual Design
45	- Zebra striping (alternating row colours) aids row tracking
46	- Adequate cell padding (at least 8px) prevents crowding
47	- Align numbers right, text left for readability
48	- Highlight the header row with stronger contrast
49
50	### Reduce Complexity
51	- Maximum 5–7 columns for comfortable scanning
52	- If more columns are needed, consider a different format
53	or allow users to show/hide columns
54	- Provide a summary or key takeaway above complex tables
55	- Don't require horizontal scrolling — make tables responsive
56
57	### Responsive Tables
58	- On small screens: convert to card/list view where each row
59	becomes a labelled card
60	- Or allow horizontal scroll with a sticky first column
61	- Never hide data on smaller screens without a way to access it
62	- Test: can a mobile user access every piece of data?
63
64	## Assessment Checklist
65
66	- [ ] All tables have column and/or row headers with proper scope
67	- [ ] All tables have a caption or accessible label
68	- [ ] No merged cells (or properly associated headers if unavoidable)
69	- [ ] Tables are responsive on small screens
70	- [ ] Tables are not used for visual layout
71	- [ ] Complex tables have a text summary of key findings
72	- [ ] Cell padding and spacing support readability

People who liked this also viewed

6 picks

Type

table-accessibility

82stars25forks

View on GitHub

How to install table-accessibility?

owl-listener/inclusive-design-skills/table-accessibility

$npx -y skills add Owl-Listener/inclusive-design-skills --skill table-accessibility

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Table Accessibility
2
3	Design tables that communicate structure and relationships — not just
4	to sighted users scanning rows and columns, but to screen reader users
5	who navigate one cell at a time.
6
7	## When to Use a Table
8
9	Tables are for data that has relationships across two dimensions (rows
10	and columns). Don't use tables for layout.
11
12	- Use a table: comparing features across products, showing schedules,
13	displaying data with consistent categories
14	- Don't use a table: laying out a form, arranging cards, creating
15	visual columns of unrelated content
16
17	## Core Requirements
18
19	### Every Table Needs Headers
20	- Column headers: use <th> with scope="col"
21	- Row headers: use <th> with scope="row"
22	- Screen readers announce headers before each cell, so users always
23	know which column and row they're in
24	- Without headers, a screen reader user hears a stream of disconnected
25	values with no context
26
27	### Every Table Needs a Caption or Label
28	- Use <caption> element for HTML tables
29	- Or use aria-labelledby pointing to a visible heading
30	- The caption describes what the table contains:
31	"Pricing comparison for Standard, Pro, and Enterprise plans"
32	- Not just "Table 1" or "Data"
33
34	### Simple Tables Over Complex Tables
35	- Prefer simple tables with one row of column headers
36	- Avoid merged cells (colspan, rowspan) wherever possible
37	- If merged cells are necessary, use proper headers/id/scope
38	associations
39	- If a table needs merged cells to make sense, consider whether
40	it should be split into multiple simpler tables
41
42	## Cognitive Accessibility for Tables
43
44	### Visual Design
45	- Zebra striping (alternating row colours) aids row tracking
46	- Adequate cell padding (at least 8px) prevents crowding
47	- Align numbers right, text left for readability
48	- Highlight the header row with stronger contrast
49
50	### Reduce Complexity
51	- Maximum 5–7 columns for comfortable scanning
52	- If more columns are needed, consider a different format
53	or allow users to show/hide columns
54	- Provide a summary or key takeaway above complex tables
55	- Don't require horizontal scrolling — make tables responsive
56
57	### Responsive Tables
58	- On small screens: convert to card/list view where each row
59	becomes a labelled card
60	- Or allow horizontal scroll with a sticky first column
61	- Never hide data on smaller screens without a way to access it
62	- Test: can a mobile user access every piece of data?
63
64	## Assessment Checklist
65
66	- [ ] All tables have column and/or row headers with proper scope
67	- [ ] All tables have a caption or accessible label
68	- [ ] No merged cells (or properly associated headers if unavoidable)
69	- [ ] Tables are responsive on small screens
70	- [ ] Tables are not used for visual layout
71	- [ ] Complex tables have a text summary of key findings
72	- [ ] Cell padding and spacing support readability

People who liked this also viewed

6 picks

Type