Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(table): updated accessibility guidelines #1498

Merged
merged 2 commits into from
May 23, 2024
Merged

docs(table): updated accessibility guidelines #1498

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7f570ec
Updating table accessibility guidelines
markcaron Mar 13, 2024
9ea9e83
Merge branch 'main' into docs/table-accessibility
bennypowers May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/accessibility/content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,8 @@ Instead, a list would be simpler, easier to understand, and easier to code:

In other words, if it doesn’t *need* to be a table, then it probably shouldn’t be a table.

For more information on developing accessible tables, please read our [Table element accessibility guidance](/elements/table/accessibility/).

### Captions and headings

The purpose of, and data relationships within, tables should be made apparent to all users: visual and non-visual, and both with and without assistive tech. To ensure tables are understandable by all, we need to pay special attention to their captions and row/column headings.
Expand Down
10 changes: 5 additions & 5 deletions elements/rh-table/docs/40-accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ Since tables are inherently complex HTML structures, they can create barriers fo

### Minimum requirements

- Column titles (or headers) must use `<th>` elements with `scope="col"` attributes
- Row titles (or headers) must use `<th>` elements with `scope="row"` attributes
- Use `id` and `headers` attributes to associate data cells with their table headers
- Add a `<caption>` element to title a table and help users identify its purpose
- Column titles (or headers) must use `<th>` elements with `scope="col"` attributes ([WCAG technique H63](https://www.w3.org/WAI/WCAG21/Techniques/html/H63))
- Row titles (or headers) must use `<th>` elements with `scope="row"` attributes ([WCAG technique H63](https://www.w3.org/WAI/WCAG21/Techniques/html/H63))
- Add a `<caption>` element to title a table and help users identify its purpose ([WCAG technique H39](https://www.w3.org/WAI/WCAG21/Techniques/html/H39))

### Further guidance

- Use `id` and `headers` attributes to associate data cells with their table headers in complex tables ([WCAG technique H43](https://www.w3.org/WAI/WCAG21/Techniques/html/H43))
- Define sections with `<thead>` and `<tbody>` (and optionally `<tfoot>` for larger tables)

### Example markup
Expand Down Expand Up @@ -135,7 +135,7 @@ Each cell includes enough spacing for selecting interactive elements.

## Additional guidelines

- No column title cells should be blank
- No column title (or header) cells should be blank
- Each cell should only have one piece of data
- Avoid merged cells. When possible consider breaking a complex table into a series of simpler tables
- Do not place multiple inactive elements in a single cell
Expand Down
Loading