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

Jump to bottom

Table tips: Add table headers tips for mobile #526

Closed
wants to merge 1 commit into from
Closed

Table tips: Add table headers tips for mobile #526

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions source/tables/tips.html.erb.md
View file
Open in desktop
Expand Up @@ -14,6 +14,8 @@ support: Developed with support from the <a href="https://www.w3.org/WAI/ACT/">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 `<th>` cells. Screen readers may read aloud all `<th>` cells in a column, resulting in confusion. [Start a new `<table>` when the topic changes.](multi-level.html#split-up-multi-level-tables)

- **Data separation:**
Expand All @@ -28,6 +30,8 @@ support: Developed with support from the <a href="https://www.w3.org/WAI/ACT/">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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I personally think this is a bit too vague. What about:

Defining table headers: If a table is must be rendered with multiple <table> elements, use aria-describedby to assign headers. If a table is rendered as a list, column and row headers should be available as text in the list’s outline.

(I am unsure how to glue together two tables using ARIA, it seems to be an awful solution. How does one ensure keyboard and screen reader compatibility? Can we link to some documentation on how to do that?)

Copy link

@lakeen lakeen Jun 26, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was also confused by "If a table is rendered as multiple tables, ARIA should be used. " Is this related to the above tip about using distinct <table> and not separating tables within a table?

I was also wondering if these tips are really edits to the text above the shareable code examples. It wasn't clear as to how they would get implemented.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we're talking about nested tables when saying "If a table is rendered as multiple tables..." then I feel like we should explicitly say that. So, perhaps a slight edit on @yatil's wording would work (if nesting tables is the issue we're describing here) such as:

Defining table headers: If a table must be rendered with multiple, nested <table> elements, use aria-describedby to assign headers. If a table is rendered as a list, column and row headers should be available as text in the list’s outline.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I hope we are not talking about nested tables because nested tables are bad, especially in the mobile context. I was thinking that the use case is ”I got a table with 6 (content) columns but only two columns fit the screen, so I break the table up in three tables with 2 columns each.”

I guess we need clarification on the use case here.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

”I got a table with 6 (content) columns but only two columns fit the screen, so I break the table up in three tables with 2 columns each.”

Aren't there other techniques for tables on small screens than artificially creating a table out of smaller tables?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There certainly are. https://www.w3.org/WAI/Policy/ reformats the table to make sense (using CSS grid layout):

(Simulated) Smaller iPhone:

A grid with 2 by 4 cells, country and date share the top row, the legislation name spans the second row. The other data is filling up the four other cells.

(Simulated) Bigger iPhone:

Reformatted to four columns with three columns combined at the top as a header section:

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

+1 to the Responsive Design addition.

However, there seems to be a lack of agreement on the extent and clarity of the content on Table Headers that needs discussion. Perhaps add to the agenda?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree with adding to the agenda to clarify what is meant by "If a table is rendered as multiple tables." I think if we can agree on the actual meaning then we can clarify the language in the tip sentence and maybe give some sort of example use in parenthesis.


- **Styling header cells:** `<th>` elements are used for header cells, using `<td>` elements with different styling will make tables less accessible if not inaccessible. It is also helpful to differentiate `<th>` and `<td>` 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)
Expand Down