Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
A
Accessibility
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge Requests 0
    • Merge Requests 0
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Analytics
    • Analytics
    • CI / CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Development
  • Accessibility
  • Issues
  • #12

Closed
Open
Opened Jan 21, 2020 by ndavis@ndavis

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

Edited Jan 21, 2020 by ndavis
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
Reference: dev/accessibility#12