Warning:
This wiki has been archived and is now read-only.

ComplexTables

From HTML WG Wiki
Jump to: navigation, search

Complex Tables

NOTE: This page is around the issue of complex tables and mechanisms such as @scope, @axis and @headers that may be used to solve this issue. For consideration of backwards compatibility issues for @headers see the page: IssueTableHeaders: Maintaining table data/header association in a backwards compatible way with existing Aural browsers. Also related [[DroppedAttributeHeaders: DroppedAttributeHeaders]] page.

Issue

Sometimes presenting relations within tables may involve more complex associations between various data cells and their header cells. Similarly, authors may need to add axes to tables beyond that provided by a tables two dimensions. These additional axes may be presented through styling such as background colors or foreground text color or other such visual cues. Axes, may also be presented aurally and tactilely in various ways. However, currently HTML5 tables do not allow authors to present such complex relations in table. Without these capabilities, authors may be forced to present the relationships across multiple tables or without tables at all which could make it more difficult for users to comprehend the data.

Research

Examples

Comparison Examples

Single Examples

Use Cases

  • Oracle's web-based solutions "all use the headers= attribute and have since roughly 2001/2002. In fact that has been one of our requirements for making our software section 508 compliant."
  • XStandard "arguably the most standards compliant WYSIWYG editor, automatically inserts the headers attribute to associate headers with data cells. Personally, I would rather it didn't, as it unnecessarily bloats the markup for simple data tables, but they've made the decision based on the fact that assistive technology traditionally has very poor support for the scope attribute, and very good support for the headers attribute. I'm also aware of a few companies that have style guides that insists that data cells are associated with their headers using the headers attribute for the same reason. - Gez Lemon
  • Yahoo table widget implements headers
  • Fidelity Investments depends heavily on complex tables for displaying product and customer account information. Portions of the web site have been using complex table markup for years to improve accessibility. Unfortunately, most of the examples I am familiar with are behind the customer password. For those with personal Fidelity accounts, look in the Accounts and Trade section...Id/headers are used in dynamic tables for grouping rows and/or columns (e.g. Large Cap Funds, International Funds, etc). Id headers are used on dynamic tables with irregular shapes, where the table provides a "total" row in a larger, more prominent font that will not fit in the regular cell. Cells are then merged in that row, breaking the standard connection to the TH for that column..." - Jeanne Spellman. (Jeanne is in the process of getting permission for us to see samples.)

Solutions

Create an algorithm for DOM methods related to compelex tables

This approach would call for the use of an algorithm that matched data cells with header cells based on the structure of the table and the position of header cells. TH elements appearing on the four sides of a TBODY element could automatically be associated with DE elements that intersected the TH element's axis. Multiple consecutive TH elements could all provide the headings/labels for the remaining data cells in the row or column (for a TH element at the top/bottom or left/right side of a table body respectively). This is similar to the HTML 4.01 basic algorithm (though the HTML 4.01 algorithm did not include bottom-side or right-side TH elements).

Advantages:

  • Simple for authors to implement through sound table structures
  • Reflects the conventional visual association in a simple table

Disadvantages:

  • Unable to deal with corner TH elements, where the header cell is blocked both vertically and horizontally by other TH element (when not left blank by an author these cells typically participate with with either the remaining row TH elements or the remaining column TH elements)
  • Limits table complexity, requiring authors to turn to more complex multi-table presentations of complex relations
  • May fail to reflect the authors intent
  • May fail to reflect the natural visual association of headers with data cells
  • Does not allow authors to indicate data cells should be used as headings for other data cells

Provide a @scope attribute and an @axis attribute on TH and TD elements

For corner header cells (and other complexities), adding a @scope attribute can help provide additional information about a the application of a header cell to data cells. With the @scope attribute, the problem of an ambiguous corner header cell can be solved by indicating whether the heading cell applies to adjacent column heading cells or the adjacent row heading cells (or even the entire rowgroup or colgroup if that's the same set of data cells).

Advantages:

  • Allows for an additional level of complexity by reducing the scope of a header cell
  • Allows corner header cells to be properly scoped
  • Allows authors to indicate data cells should be used as headings for other data cells (if permitted on TD elements too)

Disadvantages:

  • Limits table complexity to heading cell association that can be expressed with just a keyword, requiring authors to turn to more complex multi-table presentations of complex relations
  • May fail to reflect the authors intent
  • May fail to reflect the natural visual association of headers with data cells
  • Does not allow authors to indicate data cells should be used as headings for other data cells

Provide a @headers attribute on TH and TD elements

WCAG 2 explains the id/headers technique this way:

"This technique is used when data cells are associated with more than one row and/or one column header. This allows screen readers to speak the headers associated with each data cell when the relationships are too complex to be identified using the th element alone or the th element with the scope attribute."

Advantages:

  • Allows for an additional level of complexity by reducing the scope of a header cell
  • Allows corner header cells to be properly scoped
  • Allows authors to indicate data cells should be used as headings for other data cells (if permitted on TD elements too)
  • Familiar to HTML4 authors.
  • Works in some browsers already.

Disadvantages:

  • May be more cumbersome to create and maintain tables
  • For some situations — when combined with other solutions — @headers can make tables simpler or even possible.
  • Since HTML 4.01 has been relied on too much by authors and implementations to convey associations to disabled users (suggesting that relying on only this solution should be deprecated).
  • May be misused by explicitly associating TD elements with TH elements that have no visual association in the table (conformance checkers must indicate errors when the IDREF is not to a TD or TH element and may also issue suggestions or warnings when the association heuristically suggests an authoring mistake)

Provide an @axis attribute on TH and TD elements

The @axis attribute permits more complex tables by extending the tables axes beyond the standard two-dimensions. Authors may define named axes within the namespace of the table. All data and header cells sharing the same name are on the same axis.

Advantages:

  • Allows for a common technique of diagonal axes.
  • Already available to authors in HTML 4.01

Disadvantages:

  • May be misused
  • Currently lacks a complete styling mechanism (entire axis cannot be selected as a pseudo-class; only individual member cells in the axis)

Liaison with CSS WG

Liaison with CSS WG to add pseudo-element selectors for AXES including axes created through standard vertical and horizontal TH and TD element associations

Advantages:

  • Would provide greater ability for authors to present these complex relations

Disadvantages:

  • beyond scope of HTML WG

Advice From Accessibility Authorities

  • WAI and the PFWG (Summary): "The genuine requirement that html4:td.headers addresses is broader than just for table cells; a re-engineered solution could deliver both superior usability and authorability. But we are not starting from scratch. There is a disability constituency that currently uses and depends on this feature: anyone offering to remove it should be expected to demonstrate that the replacement works better and is in service. So from an accessibility perspective, dropping 'headers' because 'scope' could afford the same semantics in 'most of the cases' is a wrong decision; now or, taken in isolation, for the future. But 'scope vs. headers' is not the right frame of reference for the future. As the requirement isn't limited to tables, we look forward to a better solution, gracefully migrated to, once the requirements get looked at in the right breadth of view. And if we can together set up the sampling capability, we'd be glad to work on alternative strategies in terms of how one would recode current 'live' examples."
  • User Agent Working Group comments: "The 'headers' attribute is supported by the major screen readers used in the world (JAWS, WindowEyes, ??HAL/SuperNova-still waiting for a reply). WindowEyes uses the headers and id attribute combination. WindowEyes does *not* use the scope attribute. JAWS has support for headers/id, row and column span, and the 'axis' attribute. Assistive technologies, browser extensions, and tools that use DOM access also support the headers attribute and expose that information through their accessibility APIs and to their end users with disabilities and to developers. Examples of this include Firefox extensions like FireVox and the University of Illinois Firefox accessibility extension, and developer tools like Parasoft's WebKing and IBM's RAVEN tool. In addition, platform accessibility APIs such as IAccessible2 on Windows, ATK/AT-SPI on Linux, and the Java accessibility API all have functions for getting the row and column headers. The headers attribute, scope attrte, and TH all provided explicit, engineered ways for browsers to get row and column headers and expose that information to assistive technologies through the accessibility APIs. Without these, the browsers and assistive technologies are forced to resort to heuristics such as font styling and location (topmost and leftmost cells), which is insufficient for complex tables with spanned and multiple row/column headers." - Jim Allan.
  • Headers attribute - "It may be true that it is possible to restructure many complex data tables by adding rowgroup or colgroup elements to the table and by altering the spans of cells in such a way that the scope attribute can specify the header cells for all data cells. I am not convinced but it is true for some of the "classic" examples. That process is complicated and cumbersome. It basically requires rewriting the table. Compare that with the headers/id approach. ANY Table with ANY relationship between heading cells and data cells can be defined directly by adding id attributes and headers attributes to the cells - not touching the structure of the table. ANY table ANY relationship. That is part of the reason why you see many examples of simple tables marked up with headers/id when they are not necessary and simple scope would work. The simple and algorithmic aspects of headers/id is why the screen reader vendors all now support it and none support rowgroup and colgroup. The algorithm the AT vendors would have to implement for the scope/group approach is much more complex to the point that I think it unlikely they would ever support it AND it would not catch everything." - Jim Thatcher

Related Blog Posts

Related E-mail: May 2007

Rationale for removing the summary and headers attributes from tables?

Re: (was Support Existing Content)

Retrieved from "https://www.w3.org/html/wg/wiki/index.php?title=ComplexTables&oldid=4711"