Opened 9 years ago
Closed 5 years ago
#1591 closed defect (bug) (fixed)
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 (9)
This ticket was mentioned in Slack in #accessibility by garyj. View the logs.
9 years ago
#2
@
9 years ago
- Keywords good-first-bug added
- Owner set to iandunn
- Status changed from new to accepted
#5
follow-up:
↓ 7
@
6 years ago
- Keywords changed from needs-patch, good-first-bug, accessibility to needs-patch good-first-bug accessibility
#6
@
6 years 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
@
6 years 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.
This ticket was mentioned in Slack in #meta-wordcamp by ryelle. View the logs.
5 years ago
#9
@
5 years ago
- Resolution set to fixed
- Status changed from assigned to closed
This was fixed (along with other ticket form accessibility issues) in https://github.com/WordPress/wordcamp.org/pull/361.
Would an aria-label attribute be a better fit in this context, since most of the table cells aren't form inputs?