aria-labelledby for simple table with text inputsDetlev Fischer, (detlev [dot] fischer [ at ] testkreis [dot] de)
Twitter: @wcagtest
Last changed: 16 January 2013
This example shows the use of aria-labelledby on a simple table with text inputs. Instead of using the label element, the labels for the text inputs contained in the table are concatenated from the table headers.
Example courtesy of James Nurthen - originally an example by Jim Thatcher.
See note on table navigation and linear reading below, and comparison table without aria-labelledby.
aria-labelledby referencing table ths| Taxpayer | Spouse | |
|---|---|---|
| W2 Gross | ||
| Dividends |
aria-labelledby for simple table with text inputs: Results for screen reader tests| Win 7, IE 9, JAWS 13 | supported | When tabbing: "Taxpayer - W2 Gross - edit - type of text || Spouse - W2 Gross - edit - type of text || Taxpayer - Dividends - edit - type of text || Spouse - Dividents - edit - type of text" |
|---|---|---|
| Win 7, FF 13, JAWS 13 | supported (but see note) | Note: Jaws in FF reads changing rows and headers (both header and numbers) in addition to reading the headers referenced by aria-labelledby, which makes for a less than ideal output. When tabbing: "W2 Gross - Taxpayer column 2, row 2 - W2 Gross - edit - type of text || Spouse - Spouse - W2 Gross - edit - type of text || Dividends - Taxpayer - column 2, row 2 - Dividends - edit - type of text || Spouse - Spouse - Dividents - edit - type of text" |
| Win 7, FF 13, NVDA | supported | When tabbing: "row 2, column 2 - Taxpayer - W2 Gross - edit with autocomplete - blank || row 2, column 3 - Spouse - W2 Gross - edit with autocomplete - blank || row 3, column 2 - Taxpayer - Dividends - edit with autocomplete - blank || row 3, column 3 - Spouse - Dividends - edit with autocomplete - blank" |
| Win 7, IE 9, NVDA | not supported | When tabbing: Just reads column and row numbers, not the specified headers. "row 2, column 2 - edit - blank || row 2, column 3 - edit - blank || row 3, column 2 - edit - blank || row 3, column 3 - edit - blank" |
| Win XP, FF 15.0, NVDA 2011.3 | supported | When tabbing: "table - row 2, column 2 - Taxpayer - W2 Gross - edit - blank || row 2, column 3 - Spouse - W2 Gross - edit - blank || row 3, column 2 - Taxpayer - Dividends - edit - blank || row 3, column 3 - Spouse - Dividends - edit - blank" |
| Win XP, IE 8, NVDA 2011.3 | not supported | When tabbing: Does not read the row headers. This behaviour is not remedied when adding tabindex="-1" to the "W2 Gross" and "Dividends" headers. "table - row 2, column 2 - Taxpayer - edit - blank || row 2, column 3 - Spouse - edit - blank || row 3, column 2 - Taxpayer - edit - blank || row 3, column 3 - Spouse - edit - blank" |
| Mac OS 10.5.8, VoiceOver | supported | When tabbing, reads "Taxpayer - W2 Gross - edit text || Spouse - W2 Gross - edit text || Taxpayer - Dividends - edit text || Spouse - Dividents - edit text" |
@mixolydian sent the following additional information:
Navigating between cells (by column or row):
- There has been a change between how JAWS 13 and 14 handle announcement of
aria-labelledbywhen using table navigation commands in IE 9. If a cell contains a form field which is labeled usingaria-labelledby, JAWS 13 does not announce theidrefs ofaria-labelledby, whereas JAWS 14 does. Further testing should be done to determine for which input types this is true and if this is true on other elements.- NVDA 2012.3.1 does not announce the
idrefs for aria-labelledby in IE 9.Reading the table linearized (arrowing down the page using the document reading cursor):
Neither JAWS 14 nor NVDA 2012.3.1 announce the
aria-labelledbyidrefs when arrowing down the page and a form field is encountered using IE 9.
aria-labelledby| Taxpayer | Spouse | |
|---|---|---|
| W2 Gross | ||
| Dividends |