From 28f13f1ed282b0fb68679817fdea9da8cbdd27a6 Mon Sep 17 00:00:00 2001 From: brewerj Date: Thu, 22 Jun 2017 22:05:43 -0400 Subject: [PATCH] Update tips.html.erb.md --- source/tables/tips.html.erb.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/source/tables/tips.html.erb.md b/source/tables/tips.html.erb.md index 0f01f0348..095f40201 100644 --- a/source/tables/tips.html.erb.md +++ b/source/tables/tips.html.erb.md @@ -14,6 +14,8 @@ support: Developed with support from the W - **Keep it simple:** Complex tables are more work for content creators as well as being harder to interpret for users. It’s usually better to [break up complex tables into simple individual tables](multi-level.html#split-up-multi-level-tables), each containing the data for one sub-topic. +- **Responsive design:** On smaller screens, responsive tables often change format. Ensure that the structural relationship is available in all formats. + - **Table separation:** If several tables follow one another, don’t use a single table and put in an additional row of `` cells. Screen readers may read aloud all `` cells in a column, resulting in confusion. [Start a new `` when the topic changes.](multi-level.html#split-up-multi-level-tables) - **Data separation:** @@ -28,6 +30,8 @@ support: Developed with support from the W - **Alignment:** Align text to the left and numeric data to the right (in left-to-right languages), so that people using larger text sizes or smaller screens will be able to find it. This is especially useful if a cell spans more than one column. It’s helpful to give column headers the same alignment as the data in the cells below. +- **Defining table headers:** If a table is rendered as multiple tables, ARIA should be used. If a table is rendered as a list, column and row headers should be available. + - **Styling header cells:** `
` elements are used for header cells, using `` elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate `` and `` cells visually. For example, on these tutorial pages, header cells have a dark gray background. - **Zebra tables:** Styling even and odd rows in a different way can be helpful to people who have reading difficulties or who enlarge text. It acts as a visual guide. Highlighting the cell (and row/column) on mouseover and keyboard focus to support people to see where they are. Make sure that the contrast ratio between the text and background is good for both headers and data cells. [Here is how to check the contrast ratio.](https://www.w3.org/WAI/eval/preliminary#contrast)