Using aria-labelledby for simple table with text inputs

Detlev 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.

Example: simple table with text inputs marked up with 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"

Note on screen reader support for table navigation and reading the table linearized

@mixolydian sent the following additional information:

Navigating between cells (by column or row):

Reading the table linearized (arrowing down the page using the document reading cursor):

Neither JAWS 14 nor NVDA 2012.3.1 announce the aria-labelledby idrefs when arrowing down the page and a form field is encountered using IE 9.

Comparison example: simple table with text inputs without aria-labelledby


Taxpayer Spouse
W2 Gross
Dividends