diff --git a/aria-practices.html b/aria-practices.html index d1c5713b3f..ff52a9fb58 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -2322,14 +2322,65 @@

WAI-ARIA Roles, States, and Properties

Table

- Work on drafting this section is tracked by - issue 90. + Please provide feedback on this section in + issue 526.

- This is a place holder for a to-be-written section about data tables. - The grid pattern includes text describing how to choose between using grid and table, and it links to this section. - This section does not necessarily have to be part of the design pattern section. + Like an HTML table element, a WAI-ARIA table is a static tabular structure containing one or more rows that each contain one or more cells; it is not an interactive widget. + Thus, its cells are not focusable or selectable. + The grid pattern is used to make an interactive widget that has a tabular structure.

+

+ However, tables are often used to present a combination of information and interactive widgets. + Since a table is not a widget, Each widget contained in a table is a separate stop in the page tab sequence. + If the number of widgets is large, replacing the table with a grid can dramatically reduce the length of the page tab sequence because a grid is a composite widget that can contain other widgets. +

+

+ As with other WAI-ARIA roles that have a native host language equivalent, + authors are strongly encouraged to use a native HTML table element whenever possible. + This is especially important with role table because it is a new feature of WAI-ARIA 1.1. + It is thus advisable to test implementations thoroughly with each browser and assistive technology combination that could be used by the target audience. +

+
+

Examples

+

Table Example: ARIA table made using HTML div and span elements.

+
+
+

Keyboard Interaction

+

Not applicable.

+
+
+

WAI-ARIA Roles, States, and Properties

+ +

+ If rows or cells are included in a table via aria-owns, + they will be presented to assistive technologies after the DOM descendants of the table element unless the DOM descendants are also included in the aria-owns attribute. +

+
diff --git a/examples/table/css/table.css b/examples/table/css/table.css new file mode 100644 index 0000000000..85c190566f --- /dev/null +++ b/examples/table/css/table.css @@ -0,0 +1,4 @@ +.annotate{ + font-style: italic; + color: #366ED4; +} diff --git a/examples/table/table.html b/examples/table/table.html new file mode 100644 index 0000000000..807639d9f7 --- /dev/null +++ b/examples/table/table.html @@ -0,0 +1,170 @@ + + + + +Table Example | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + + +

Table Example

+

+ NOTE: This example page is not complete and is not yet ready for review. + Work on this page is tracked in + issue 242. +

+

+ The below example illustrates an implementation of the WAI-ARIA + table design pattern. + Note that when possible, using a native HTML table element is recommended. +

+

Similar examples include:

+ + +
+

Example

+ +
+
+
Students currently enrolled in WAI-ARIA 101 for the coming semester
+
+
+ First Name + Last Name + Company + Address +
+
+
+
+ Fred + Jackson + Acme, Inc. + 123 Broad St. +
+
+ Sara + James + Acme, Inc. + 123 Broad St. +
+
+
+
+ +
+ +
+

Keyboard Support

+

Not Applicable

+
+ +
+

Role, Property, State, and Tabindex Attributes

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RoleAttributeElementUsage
tabledivIdentifies the element containing the table structure.
+ aria-label="Students" + divProvides an accessible name for the table.
+ aria-describedby="IDREF" + divRefers to the element that serves as the caption for the table.
rowgroupdiv +
    +
  • Identifies the elements that serve as containers for the table header and table body rows.
    • +
  • Unlike HTML, WAI-ARIA does not include separate roles for the table header and table body row sets.
    • +
+
rowdivIdentifies each element that contains the cells for a row.
columnheaderspanIdentifies elements that serve as a cell containing a column label.
cellspanIdentifies elements containing content for a single cell.
+
+ +
+

Javascript and CSS Source Code

+ + +
+ +
+

HTML Source Code

+ +
+ + +
+ + + +