From 8a71738c6e2b60dc17299733598eae5c7d75c691 Mon Sep 17 00:00:00 2001 From: Mark Caron Date: Thu, 23 May 2024 11:04:31 -0400 Subject: [PATCH] docs(table): updated accessibility guidelines (#1498) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updating table accessibility guidelines Co-authored-by: Benny Powers - עם ישראל חי! --- docs/accessibility/content.md | 2 ++ elements/rh-table/docs/40-accessibility.md | 10 +++++----- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/docs/accessibility/content.md b/docs/accessibility/content.md index 7e72541d66..2e0ff1aeb8 100644 --- a/docs/accessibility/content.md +++ b/docs/accessibility/content.md @@ -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. diff --git a/elements/rh-table/docs/40-accessibility.md b/elements/rh-table/docs/40-accessibility.md index c603e81764..4021d772a0 100644 --- a/elements/rh-table/docs/40-accessibility.md +++ b/elements/rh-table/docs/40-accessibility.md @@ -6,13 +6,13 @@ Since tables are inherently complex HTML structures, they can create barriers fo ### Minimum requirements -- Column titles (or headers) must use `` elements with `scope="col"` attributes -- Row titles (or headers) must use `` elements with `scope="row"` attributes -- Use `id` and `headers` attributes to associate data cells with their table headers -- Add a `` element to title a table and help users identify its purpose +- Column titles (or headers) must use `` elements with `scope="col"` attributes ([WCAG technique H63](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)) +- Row titles (or headers) must use `` elements with `scope="row"` attributes ([WCAG technique H63](https://www.w3.org/WAI/WCAG21/Techniques/html/H63)) +- Add a `` 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 `` and `` (and optionally `` for larger tables) ### Example markup @@ -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