WordPress.org

Making WordPress.org

Opened 3 years ago

Last modified 7 months ago

#1591 assigned defect

CampTix Ticket shortcode form field accessibility

Reported by: GaryJ Owned by:
Milestone: Priority: normal
Component: WordCamp Site & Plugins Keywords: needs-patch good-first-bug accessibility
Cc:

Description

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.

Change History (7)

This ticket was mentioned in Slack in #accessibility by garyj. View the logs.


3 years ago

#2 @iandunn
3 years ago

  • Keywords good-first-bug added
  • Owner set to iandunn
  • Status changed from new to accepted

#3 @iandunn
20 months ago

  • Owner iandunn deleted
  • Status changed from accepted to assigned

#4 @iandunn
20 months ago

  • Keywords accessibility added

#5 follow-up: @iandunn
8 months ago

  • Keywords changed from needs-patch, good-first-bug, accessibility to needs-patch good-first-bug accessibility

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

#6 @iandunn
8 months ago

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.

#7 in reply to: ↑ 5 @GaryJ
7 months ago

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.

Note: See TracTickets for help on using tickets.