CampTix Ticket shortcode form field accessibility

[GaryJ]

The shortcode that outputs the tickets details (like ​https://2016.london.wordcamp.org/tickets/) needs updating. As things currently stand, screen readers have little idea what the fields relate to, since no labels are associated with them.

Suggestion - the ticket name changes from e.g.:

<strong class="tix-ticket-title">Whitechapel Road</strong>

to something like:

<label for="tix_tickets_selected[1556]" class="tix-ticket-title">Whitechapel Road<span class="screen-reader-text"> tickets</span></label>

and the corresponding quantity select opening tag becomes:

<select name="tix_tickets_selected[1556]" id="tix_tickets_selected[1556]">

Instead of now just saying "zero" for each field (amongst identifying it as being a pop-up, in a table etc.), it will now be more likely to say "Whitechapel Road tickets, 0", "Regent Street tickets, 2" etc.

[iandunn]

Would an ​aria-label attribute be a better fit in this context, since most of the table cells aren't form inputs?

[iandunn]

It might also help to add a <caption> inside the <table>, and change the ticket name <td> to a <th scope="row">, and then add scope="col" to the <thead> children.

Since ​we're working on Gutenberg blocks for WordCamp.org shortcodes, we should make sure that the new blocks implement this in a good way.

Fixing some of those things for the shortcode might not be worth it, since we'd have to setup a feature flag to avoid breaking back-compat. Most of the things would be easy to add on to the shortcode without issue, though.

[GaryJ]

Would an ​aria-label attribute be a better fit in this context, since most of the table cells aren't form inputs?

No. ARIA attributes should always be the last resort.

The important bit here, is the relationship between the ticket title, and the form field element. HTML already handles this with the label element and it's for attribute, and an id attribute on the form field element. Assistive technologies understand this "native" connection already, so there's no need for ARIA attributes. General user-agents also understand it hence clicking on the label move the focus to the form field - everyone benefits, which doesn't happen when using ARIA attributes.

The fact that the label and form field elements are contained within a table, doesn't make any difference here.

It might also help to add a <caption> inside the <table>, and change the ticket name <td> to a <th scope="row">, and then add scope="col" to the <thead> children.

Agreed to all three suggestions.

[ryelle]

This was fixed (along with other ticket form accessibility issues) in ​https://github.com/WordPress/wordcamp.org/pull/361.