Front End Event Registration Form - Drop Down Select List Labels not accessible
On front end registration forms, when using screen reader software (JAWS etc) When tabbing from a text field into a drop down select list field, the screen reader reads the selected data, not the field label, the way it does with other field types. This is broken. It should read the field label for drop down lists like it does with other field types. The user knows what is selected when they click it and it's read.
To fix this issue, change the aria-labelledby attribute of the s2id_autogen1 id'd input html element from select2-chosen-1 to s2id_autogen1
Code Example for the credit card form at https://demo.circle-interactive.co.uk/civicrm/event/register?id=1&reset=1:
<label for="s2id_autogen1" class="select2-offscreen">Country</label> <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-1" id="s2id_autogen1">
aria-labelledby="select2-chosen-1"
needs to be changed to
<label for="s2id_autogen1" class="select2-offscreen">Country</label> <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="s2id_autogen1" id="s2id_autogen1">
aria-labelledby="s2id_autogen1"
This change can be extrapolated to state list drop downs (indeed any drop-downs)
For blind users this causes confusion because they don't know what field they're on if they're in a state/province named after the country and it works differently than the rest of the field types.
Changing this in the html source using developer tools of firefox or chrome fixes issue until page is refreshed.
I tried to figure out where this is happening but the javascript spaghetti is very confusing. If anyone can point me to the right file I'll patch it.
thx, Neil P Davis
Developer
National Federation of the Blind