- From: WCAG 2.0 Techniques Submission Form <nobody@w3.org>
- Date: Thu, 30 May 2013 21:05:16 +0000
- To: public-wcag2-techs@w3.org
Submitter's Name: Sailesh Panchang Submitter's Email: sailesh.panchang@deque.com Technique ID: UNKNOWN Short Name: H63: Using the scope attribute to associate header cells and data cells in data tables - re-written Technique Category: HTML and XHTML Techniques Success Criterion Reference: UNKNOWN Applicability: HTML data tables UA Issues: The scope=”row” and scope=”col” are supported more reliably by JAWS and NVDA. Description: The objective of this technique is to illustrate how the scope attribute may be used to expose a cell in a table as a header cell. The scope attribute may be used on cells marked up as TH or TD. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively. Due to enhancements in JAWS (since V12) and NVDA (since V2012), it is now necessary to include a scope attribute even on cells marked up as TH to clearly indicate the scope of the header cell. E.g. row header cells in the first column of a table that are marked up as TH. Its usage for cells marked up as TD is recommended at least in two situations: - data cells marked up with td that also function as row header or column header; - header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th. Example 1 Head: Table 1: Contact Information Example 1 Description: In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column have been assigned scope="row" to expose them as row headers. The cells in the first row too are marked up with td and use scope="col". <table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">Fax#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>412-212-5400</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-1420</td> <td>410-306-5400</td> <td>Baltimore</td> </tr><tr> <td>3.</td> <td scope="row">Gordon Greenidge</td> <td>281-564-6720</td> <td>281-511-6600</td> <td>Houston</td> </tr> </table> Example 2 Head: Income Statement Example 2 Description: In the following table, the row header cells in the first column are marked up as TH and have a scope attribute. http://mars.dequecloud.com/demo/Table-multi-col.htm Resource 1 Title: Retain the same 3 resources Related Techniques: H43 Additional Notes: Note to WCAG-WG: This continues to be a sufficient technique for SC 1.3.1 In the current example for H63, the code does not match the 2-line description above the table. This example is the Contact Info table and not Sample Schedule. The Contact Info table is really example #9 on the 3rd resource link. Example #1 and #9 on that resource page are marked up by me. There were two examples in an earlier version of H63, now there is only one. Also, a good part of the description for the H63 as it now stands was drafted by me. This needs to be revised. The three existing resource links may be retained as is. Thanks, Sailesh No guidelines reference was submitted! No resource 1 URI submitted! No resource 2 title submitted! No resource 2 URI submitted! No test procedure was submitted! No expected result was submitted! No test file 1 was submitted! No test file 1 pass/fail was submitted! No test file 2 was submitted! No test file 2 pass/fail was submitted! ------------------------------------------------ <technique id="UNKNOWN"> <short-name>H63: Using the scope attribute to associate header cells and data cells in data tables - re-written</short-name> <applies-to> <guideline idref="" /> <success-criterion idref="UNKNOWN" /> </applies-to> <applicability> HTML data tables </applicability> <ua_issues> The scope=”row” and scope=”col” are supported more reliably by JAWS and NVDA. </ua_issues> <description> The objective of this technique is to illustrate how the scope attribute may be used to expose a cell in a table as a header cell. The scope attribute may be used on cells marked up as TH or TD. The scope identifies whether the cell is a header for a row, column, or group of rows or columns. The values row, col, rowgroup, and colgroup identify these possible scopes respectively. Due to enhancements in JAWS (since V12) and NVDA (since V2012), it is now necessary to include a scope attribute even on cells marked up as TH to clearly indicate the scope of the header cell. E.g. row header cells in the first column of a table that are marked up as TH. Its usage for cells marked up as TD is recommended at least in two situations: - data cells marked up with td that also function as row header or column header; - header cells marked up with td instead of th. Sometimes, authors use this to avoid the display characteristics associated with th and also do not choose to use CSS to control the display for th. </description> <examples> <ex_head_1> Table 1: Contact Information </ex_head_1> <ex_desc_1> In the following example, column #1 contains serial numbers for rows in the table and the second column contains the key value for the row. The cells in the second column have been assigned scope="row" to expose them as row headers. The cells in the first row too are marked up with td and use scope="col". <table border="1"> <caption>Contact Information</caption> <tr> <td></td> <td scope="col">Name</td> <td scope="col">Phone#</td> <td scope="col">Fax#</td> <td scope="col">City</td> </tr><tr> <td>1.</td> <td scope="row">Joel Garner</td> <td>412-212-5421</td> <td>412-212-5400</td> <td>Pittsburgh</td> </tr><tr> <td>2.</td> <td scope="row">Clive Lloyd</td> <td>410-306-1420</td> <td>410-306-5400</td> <td>Baltimore</td> </tr><tr> <td>3.</td> <td scope="row">Gordon Greenidge</td> <td>281-564-6720</td> <td>281-511-6600</td> <td>Houston</td> </tr> </table> </ex_desc_1> <ex_head_2> Income Statement </ex_head_2> <ex_desc_2> In the following table, the row header cells in the first column are marked up as TH and have a scope attribute. http://mars.dequecloud.com/demo/Table-multi-col.htm </ex_desc_2> </examples> <resources> <resources_title1> Retain the same 3 resources </resources_title1> <resource_uri1> </resource_uri1> <resources_title2> </resources_title2> <resource_uri2> </resource_uri2> </resources> <related_techniques> <related_technique> H43 </related_technique> </related_techniques> <tests> <procedure> </procedure> <expected_result> </expected_result> <test_file_1> </test_file_1> <pass_fail_1> </pass_fail_1> <test_file_2> </test_file_2> <pass_fail_2> </pass_fail_2> </tests> </technique> Additional Notes: Note to WCAG-WG: This continues to be a sufficient technique for SC 1.3.1 In the current example for H63, the code does not match the 2-line description above the table. This example is the Contact Info table and not Sample Schedule. The Contact Info table is really example #9 on the 3rd resource link. Example #1 and #9 on that resource page are marked up by me. There were two examples in an earlier version of H63, now there is only one. Also, a good part of the description for the H63 as it now stands was drafted by me. This needs to be revised. The three existing resource links may be retained as is. Thanks, Sailesh
Received on Thursday, 30 May 2013 21:05:27 UTC