proudcity / wp-proudcity

The ProudCity WordPress platform
https://proudcity.com
Other
21 stars 9 forks source link

use a Legend/Fieldset to associate the title/question with the radio buttons #2509

Open lukefretwell opened 3 months ago

lukefretwell commented 3 months ago

Source

https://airtable.com/appRFUc45sF4yWFut/tbl51inE74gEWlB0x/viwG9G4vAjsjQEh4g/recKCyp3rszq5bXyf?blocks=hide

Describe the bug

A clear and concise description of what the bug is.

For all forms with radio button selections that have a question/title that provides context for the choices, use a Legend/Fieldset to associate the title/question with the radio buttons. This is important for screen reader users. Without this, the options are read aloud without reference to the category information. With a fieldset/legend when a user lands on the first option, they will also hear the group name.

https://www.adapacific.org/ask-us/

Recommendations

See working example on another page of the site (image in screenshots) - https://www.adapacific.org/events/

Other References: See the RADIO BUTTONS section of this page for an example: https://webaim.org/techniques/forms/controls

See also: https://www.accessibility-developer-guide.com/examples/forms/grouping-with-fieldset-legend/#:~:text=Groups%20of%20radio%20buttons%20are%20used%20as%20possible,question%20and%20each%20control%27s%20%3Clabel%3E%20contains%20an%20answer.

Screenshots

If applicable, add screenshots to help explain your problem.

example of fieldset fieldset required