Skip to content

Commit

Permalink
docs(table): updated accessibility guidelines (#1498)
Browse files Browse the repository at this point in the history
Updating table accessibility guidelines

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
  • Loading branch information
markcaron and bennypowers authored May 23, 2024
1 parent 69e2cd9 commit 8a71738
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 5 deletions.
2 changes: 2 additions & 0 deletions docs/accessibility/content.md
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
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

0 comments on commit 8a71738

Please sign in to comment.