Options not wrapped in fieldset [#2210313]

This relates to WCAG
Guideline 1.3: Ensure that information and structure can be separated from presentation
Success Criterion 1.3.1: Information and relationships conveyed through presentation can be programmatically determined, and notification of changes to these is available to user agents, including assistive technologies. (Level A)
Technique H71: Providing a description for groups of form controls using fieldset and legend elements

Basically when multiple form elements with the same "name" attribute are displayed one below the other, they should be wrapped in a <fieldset>, with a <legend>. Attached image shows the problem detected by Wave toolbar.

Comment	File	Size	Author
#1	wrap_in_fieldset-2210313-1.patch	820 bytes	MiroslavBanov
#1
	options-no-fieldset-problem.png	57.98 KB	MiroslavBanov

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

MiroslavBanov CreditAttribution: MiroslavBanov commented 4 March 2014 at 14:19

Issue summary:	View changes
Status:	Active	» Needs review
Issue tags:		+wcag2

File	Size
wrap_in_fieldset-2210313-1.patch	820 bytes

Updated issue description. Added links to WCAG 2 requirements.

Attached a patch that is my first attempt at solving the problem. The patch wraps the checkboxes/options in an extra fieldset, also removes the <label> element, instead adds the a <legend> to the <fieldset>. This also solves the problem with Orphaned form label - Label pointing to non-existing form element.

Comment #2

4 March 2014 at 14:22

Status:

Needs review

» Needs work

The last submitted patch, 1: wrap_in_fieldset-2210313-1.patch, failed testing.

Comment #3

MiroslavBanov CreditAttribution: MiroslavBanov commented 4 March 2014 at 14:31

I guess the tests would need to be heavily rewritten to make this pass with the changed render array structure. Other option is to have some theme wrapper that wraps the existing form element in a fieldset without actually adding a new render array element.

Comment #4

DanChadwick CreditAttribution: DanChadwick commented 4 March 2014 at 15:01

This would seem to be a rather large visual change. I'm wondering whether it is okay to "spring" this on existing users, even with some sort of notice.

It would be ugly, but the option to render within a fieldset could be exposed to the user, perhaps with false set for existing webforms (in an update routine) and true for new webforms (as the default).

Comment #5

mgifford

he/him

English

CreditAttribution: mgifford commented 13 March 2014 at 02:18

This looks like a good accessibility improvement!

This is how we've dealt with the visual side of this in D8 #2002336: Introduce a CSS class to hide borders of fieldset elements

Comment #6

DanChadwick CreditAttribution: DanChadwick commented 14 March 2014 at 10:53

Is it appropriate to address a system-wide issue of using invisible fieldsets to group radio/checkboxes in webforms? Maybe #2002336: Introduce a CSS class to hide borders of fieldset elements should be backported to drupal 7.x?

Comment #7

mgifford

he/him

English

CreditAttribution: mgifford commented 15 March 2014 at 03:39

Fieldsets are used inappropriately in D7 to provide collapsible elements of a page. This is broken out in D8 so that we are using HTML5 <details> to provide this role.

Backporting this would be difficult.

Although perhpas the CSS would be easier...

 /**
+ * Unboxed fieldsets for grouping form elements.
+ */
+.fieldgroup {
+  border-width: 0;
+  padding: 0;
+}

Comment #8

quicksketch

he/him

CreditAttribution: quicksketch commented 17 March 2014 at 18:42

Status:

Needs work

» Closed (duplicate)

This issue is a duplicate of #1147994: Wrap composite elements in a fieldset element. Could you reupload your patch and suggested changes over there? At this point, I think we'd only be able to make this change to 7.x-4.x, considering wrapping a new fieldset could break a significant amount of existing theming.

Comment #9

MiroslavBanov CreditAttribution: MiroslavBanov commented 17 March 2014 at 20:18

The duplicated issue is named "Accessibility Issue with Select Elements: Form Label Not Associated With Input". I think it should at least be renamed if this one is truly duplicate of it. It is very confusing to me at this point.

If anyone is interested in moving patches and information around or developing a solution for 7.x-4.x, you are very welcome. I won't be able to help in that for some time.

Comment #10

ddod CreditAttribution: ddod commented 3 July 2015 at 08:56

Patch #1 applies cleanly on 4.9.
The patch from the duplicate issue also fixes the problem and should be the one used.
https://www.drupal.org/node/1147994#comment-10072560