wcag/working-examples/aria-labelledby-workshop-booking-timetable/index.html at e338c8fd80cbe11f354c2adc3a7648e1827b439c · w3c/wcag · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dinosaur conference: WCAG 2</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
	body{
		background:#fff;
		color:#000;
		font:100% / 1.5 sans-serif;
	}

	table{
		border:1px solid hsl(0, 0%, 0%);
		border-collapse:collapse;
		margin-block-end:1rem;
	}
	th, td{
		border:1px solid;
	}

	input[type=submit]{
		font:inherit;
	}
</style>
</head>
<body>
<h1>Dinosaur conference workshops timetable Thursday, 14.  & Friday, 15. March 2013</h1>

<table>
<caption>
Dinosaur conference workshop booking table
</caption>
<tr>
	<th rowspan="2" scope="col">Track</th>
	<th colspan="2" scope="colgroup">Thursday</th>
	<th colspan="2" scope="colgroup">Friday</th>
</tr>

<tr>
	<th scope="col" id="am1">9 to 12 AM</th>
	<th scope="col" id="pm1">2 to 5 PM</th>
	<th scope="col" id="am2">9 to 12 AM</th>
	<th scope="col" id="pm2">2 to 5 PM</th>
</tr>

<tr>
	<th id="track1" scope="row">Track 1</th>
	<td>
		<h2 id="title-TM1">The Paleozoic era</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TM1" aria-labelledby="title-TM1 track1 am1 TM1-att">
			<label id="TM1-att" for="TM1">Attend</label></p>
	</td>

	<td>
		<h2 id="title-TA1">The Mesozoic era overview</h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="TA1" aria-labelledby="title-TA1 track1 am2 TA1-att">
                <label id="TA1-att" for="TA1">Attend</label></p>
	</td>

	<td>
		<h2 id="title-FM1">The Triassic period, rise of the dinosaurs</h2>
		<p>1 place left</p>
		<p><input type="checkbox" id="FM1" aria-labelledby="title-FM1 track1 pm1 FM1-att">
                <label id="FM1-att" for="FM1">Attend</label></p>

	</td>

	<td>
		<h2 id="title-FA1">The Jurassic period</h2>
		<p>11 places left</p>
		<p><input type="checkbox" id="FA1" aria-labelledby="title-FA1 track1 pm2 FA1-att">
                <label id="FA1-att" for="FA1">Attend</label></p>
	</td>
</tr>


<tr>
	<th id="track2" scope="row">Track 2</th>
	<td>
		<h2 id="title-TM2">The Cretaceous period</h2>
		<p>18 places left</p>
		<p><input type="checkbox" id="TM2" aria-labelledby="title-TM2 track2 am1 TM2-att">
                <label id="TM2-att" for="TM2">Attend</label></p>
	</td>

	<td>
		<h2 id="title-TA2">The end of the dinosaurs</h2>
		<p>2 places left</p>
		<p><input  type="checkbox" id="TA2" aria-labelledby="title-TA2 track2 am2 TA2-att">
                <label id="TA2-att" for="TA2">Attend</label></p>
	</td>

	<td>
		<h2 id="title-FM2">First discoveries of dinosaurs<em></em></h2>
		<p>2 places left</p>
		<p><input type="checkbox" id="FM2" aria-labelledby="title-FM2 track2 pm1 FM2-att">
                <label id="FM2-att" for="FM2">Attend</label></p>
	</td>

	<td>
		<h2 id="title-FA2">Emerging scholarship </h2>
		<p>19 places left</p>
		<p><input  type="checkbox" id="FA2" aria-labelledby="title-FA2 track2 pm2 FA2-att">
                <label id="FA2-att" for="FA2">Attend</label></p>
	</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="4">
<tr>
<td><label for="123">Maiden Name:</label></td>
<td>
<input type="text" maxlength="255" size="30" id="123" value="" name="maidenName" aria-describedby="986">
  <span id="986">(Only enter if different from last name) </span>
</td>
</table>
<input type="submit" value="Log in">
</body>
</html>