Skip to content

Instantly share code, notes, and snippets.

@ryelle
Created February 26, 2020 18:44
Show Gist options
  • Save ryelle/14108a0750bcad92bd2c2162055b09fd to your computer and use it in GitHub Desktop.
Save ryelle/14108a0750bcad92bd2c2162055b09fd to your computer and use it in GitHub Desktop.
CampTix accessibility changes

Ticket Selection

 <tr class="tix-ticket-1664">
-	<td class="tix-column-description">
-		<strong class="tix-ticket-title">Test Ticket</strong><br>
+	<th class="tix-column-description" scope="row">
+		<label for="tix-qty-1664" class="tix-ticket-title">Test Ticket</label><br>
 		<span class="tix-ticket-excerpt">This ticket will be used to test Notify features.</span>
-	</td>
+	</th>
 	<td class="tix-column-price">Free</td>
 	<td class="tix-column-remaining">99</td>
 	<td class="tix-column-quantity">
-		<select name="tix_tickets_selected[1664]">...</select>
+		<select id="tix-qty-1664" name="tix_tickets_selected[1664]">...</select>
 	</td>
 </tr>

Questions

 <td class="tix-required tix-left">
-	First Name <span class="tix-required-star">*</span>
+	<label for="tix_attendee_info-1-first_name">
+		First Name <span aria-hidden="true" class="tix-required-star">*</span>
+	</label>
 </td>

Answers

 <td class="tix-right">
-	<label><input name="tix_attendee_questions[1][566][omnivore]" type="checkbox" value="Omnivore"> Omnivore</label><br>
-	<label><input name="tix_attendee_questions[1][566][vegetarian]" type="checkbox" value="Vegetarian"> Vegetarian</label><br>
+	<fieldset class="tix-screen-reader-fieldset" aria-label="Meal Preferences">
+		<label><input name="tix_attendee_questions[1][566][omnivore]" type="checkbox" value="Omnivore"> Omnivore</label><br>
+		<label><input name="tix_attendee_questions[1][566][vegetarian]" type="checkbox" value="Vegetarian"> Vegetarian</label><br>
+	</fieldset>
 </td>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment