CampTix Ticket form accessibility improvements, changes to HTML structure


There are changes coming to the ticket selection table, order summary, registration form, and edit form to improve the accessibility of registering for a WordCamp. The changes will deploy tomorrow, March 3rd, around 16:00 UTC.

Right now, most form fields didn’t have an “accessible name”, instead the form relies on the table layout to show which question corresponds to each input. This only works for sighted users— for anyone using a screen reader, the form fields are functionally unlabelled.

After this change, all inputs will have labels attached, so screen readers and other assistive tech will be able to connect the questions (for example, First Name) to the text input for the answer. This also changes some of the markup, which might affect your WordCamp’s style, if you have any custom CSS.

  • All ticket questions are now wrapped in a label element
  • All inputs have a unique ID (but this should not be used for styling)
  • Questions with multiple answers (radio buttons or checkboxes) now have their answers wrapped in a fieldset

The ticket selection table has also been updated so navigating through selecting a ticket is easier.

  • The quantity dropdown now uses the ticket name as the label
  • The ticket name is now wrapped in a label, instead of strong, and that table cell is now a th instead of td.

This fixes meta ticket #1591, you can see the full changes on the GitHub PR. Please check your tickets page, especially if you’ve done any custom styling to it, and let us know in #meta-wordcamp on slack (or here in the comments) if you see anything unexpected.

#camptix