Go to overview: WAI-ARIA techniques with code examples

Introduction to using aria-labelledby for workshop booking table

The aim of testing this workshop booking table below (unstyled stand-alone version) is to identify a broadly supported way of using aria-labelledby to concatenate labels for the "Attend" checkboxes out of the workshop titles and the string "Attend" that follows the checkbox.

Workshop titles are in h2 elements so that they will also be displayed in screen readers' headings listings, affording quick access. (What is still missing is a script managing the selection of parallel workshops; if a workshop in track 1 is selected, an already selected workshop in track 2 should be deselected or an alert be generated warning the user of the conflict.)

The input type="checkbox" element carries the aria-labelledby attribute that references both the element(s) containing the conference title (h2, label) AND the string "Attend" where present (except for Workshop 5 and 6 which use the native label element).

Workshops 3 and 4 are fully booked and therefore, the checkbox is replaced by a statement ("Sorry...") that is brought into the tab order with tabindex="0". The statement also references the workshop title with aria-labelledby - with limited success.

Depending on choice of browser and screen reader, and depending on the mark up in the cell, table headers belonging to the table cell may be read or not. For a design case like the one presented, this contributes to the complexity of identifying the best mark-up. The table should also work in browse (virtual cursor) mode, so removing table semantics with role="presentation" is probably not a good idea.

General information on constraints for using aria-labelledby has been provided by Steve Faulkner - see his HTML5 Accessibility Chops: notes on using ARIA, section aria-labelledby and aria-describedby.

This is work in progress. I am happy to have your views or comments or tests with different screen readers / settings that I can add to the results tables. Just let me know (mail df - at - 3needs.org or ping me on twitter: @wcagtest)

Conference workshops timetable Thursday, 14. & Friday, 15. March 2013

Thursday Friday
9 to 12 AM 2 to 5 PM 9 to 12 AM 2 to 5 PM
track 1

2 places left

Attend

2 places left

Sorry, workshop booked out!

Sorry, workshop booked out!

track 2

17 places left

2 places left

Attend

Workshop 7, Of mice and pen: the battle for smart input (no native label inside h2, id referenced by aria-labelledby on h2, "Attend" in p element with id also referenced by aria-labelledby) by Jake Ziegler

2 places left

Attend

19 places left

Attend

Results for Tests under Win7 with browsers IE9 and FF13 / Screen readers JAWS 13 and NVDA 2012.2.1, in forms mode (simple tabbing through table)

Legend

Results Workshop 1, Memoirs of a justified coder (label inside h2, with the id referenced by aria-labelledby on h2, "Attend" in p element, with an id also referenced by aria-labelledby)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 1, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X X X X X N.A.
FF13 / NVDA X - X X X X X N.A.
IE9 / JAWS - - - X X X X N.A.
IE9 / NVDA X - - - - (X) X N.A.

Results Workshop 2, Pride and Vendor Prefixes (label inside h2, this time with the id referenced by aria-labelledby on label, "Attend" in separate label element with another id also referenced by aria-labelledby)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 2, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X X X X X N.A.
FF13 / NVDA X - X X X X X N.A.
IE9 / JAWS - - - - - X X N.A.
IE9 / NVDA X - - - X X X N.A.

Results Workshop 3, Cutting corners with code: Crime and Punishment (label inside h2 without any referenced input, id referenced by aria-labelledby on label)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 3, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X - - N.A. N.A. X
FF13 / NVDA X X X - - N.A. N.A. X
IE9 / JAWS - - - - - N.A. N.A. X
IE9 / NVDA X - - - X N.A. N.A. -

Results Workshop 4 Dead souls: The perils of memory leaks (h2 without native label, id referenced by aria-labelledby on h2)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 4, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X - - N.A. N.A. X
FF13 / NVDA X X X - - N.A. N.A. X
IE9 / JAWS - - - - - N.A. N.A. X
IE9 / NVDA X - - - - N.A. N.A. -

Results Workshop 5, Carrots and Sticks: The impact of Mandate 376 (no use of aria-labelledby, native label inside h2, "Attend" in label element, both labels referencing the same input in their for attribute)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 5, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS X X X X - X X N.A.
FF13 / NVDA X - X X X (2.) X (1.) X N.A.
IE9 / JAWS - - - - - X X N.A.
IE9 / NVDA X - - - - X X N.A.

Results Workshop 6, Far from the madding Flash: native Video in HTML5 (no use of aria-labelledby, just native label inside h2 referencing input in for attribute, "Attend" in p element)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 6, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X - X - X N.A.
FF13 / NVDA X - X X X - X N.A.
IE9 / JAWS - - - - X - X N.A.
IE9 / NVDA X - - - X - X N.A.

Results Workshop 7, Of mice and pen: the battle for smart input (no native label inside h2, id referenced by aria-labelledby on h2, "Attend" in p element with id also referenced by aria-labelledby)

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 7, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X X X X X N.A.
FF13 / NVDA X X X X X X X N.A.
IE9 / JAWS - - - X X X X N.A.
IE9 / NVDA X - - - - - X N.A.

Results Workshop 8, A hitchhiker's guide to conformance (native label inside h2 and referencing input in for attribute, "Attend" in p element, aria-labelledby just referencing "Attend")

Browser / Screen reader Announces changing row/column header Top column th Nested column th Row th ("Track 1 / 2") "Workshop 8, (bla bla)" "Attend" Checkbox (checked / not checked) "Sorry...booked out"
FF13 / JAWS - X X - - X X N.A.
FF13 / NVDA X X X - - X X N.A.
IE9 / JAWS - - - - - X X N.A.
IE9 / NVDA X - - - - X X N.A.

Examples constructed and tested by Detlev Fischer (Twitter: @wcagtest), last update 28. June 2012