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.

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

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)byMaud McRae

2 places left

Attend

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)byCassandra Barnave

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)byJacqueline Carnet

17 places left

Attend

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)bySergej Leontiev

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)byJake Ziegler

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)

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)