When you configure a form label to be hidden via the webform component UI, the label tag is hidden. However, no "title" attribute exists on the form field itself making it difficult for users using screen readers to determine what the field is actually for.

The WCAG 2.0 guidelines at http://www.w3.org/TR/2010/NOTE-WCAG20-TECHS-20101014/H65.html recommends the use of the "title" attribute to label form controls when the visual design cannot accommodate the label.

Attached patch fixes this issue for Drupal 6.

I'll provide a patch for Drupal 7 version later today hopefully.

CommentFileSizeAuthor
#23 1287382-webform-invisible-label-7.x-3.x-23.patch1.43 KBSpokje
#21 webform-invisible-label-7.x-3.x-1287382-21.patch1.72 KBtlyngej
#13 webform-invisible-label-7.x-3.x-1287382-13.patch1.71 KBandrewmacpherson
#8 Screen Shot 2013-04-05 at 12.43.39 PM.png207.79 KBmgifford
#7 webform_1287382_labels.patch1.4 KBLiam Morland
#1 1287382_d7.patch1.51 KBstella
webform_label_accessibility_d6.patch526 bytesstella
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

stella’s picture

stella CreditAttribution: stella commented
Version: 6.x-3.x-dev » 7.x-3.x-dev
FileSize
1287382_d7.patch1.51 KB

Here's a D7 version too. This one can one step further and still print the label tag but with the new D7 "element-invisible" class.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented
Status: Needs review » Needs work

Thanks stella, I haven't had time to look at this patch so it got buried in the Webform queue. The D6 patch looks pretty good.

In the D7 patch, this doesn't seem to make any sense, why would you run check_plain() on a property that doesn't exist? Even if the logic is inverted, what's this providing?

+  if (empty($component['extra']['attributes']['title'])) {
+    $component['extra']['attributes']['title'] = check_plain($component['name']);
+  }

It'd probably be better to move this bit of code up above the setting of the $element variable.

+  // If #title_display is none, set it to invisible instead - none only used if
+  // we have no title at all to use.
+  if ($element['#title_display'] == 'none') {
+    $variables['element']['#title_display'] = 'invisible';
+    $element['#title_display'] = 'invisible';
+  }
stella’s picture

stella CreditAttribution: stella commented 
In the D7 patch, this doesn't seem to make any sense, why would you run check_plain() on a property that doesn't exist? Even if the logic is inverted, what's this providing?

+  if (empty($component['extra']['attributes']['title'])) {
+    $component['extra']['attributes']['title'] = check_plain($component['name']);
+  }

Now I'm confused. Does $component['name'] not exist here?

The code is essentially the same as the D6 version, which says if there is no value set for $component['extra']['attributes']['title'], then use the sanitized $component['name'].

Maybe I'm missing something here, but I don't see how it differs from the D6 patch you approved.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

Oh, for some reason I thought the code was this, just setting the property to itself:

+ if (empty($component['extra']['attributes']['title'])) {
+ $component['extra']['attributes']['title'] = check_plain($component['extra']['attributes']['title']);
+ }

I'm just being crazy apparently. I'll take another look at this.

stella’s picture

stella CreditAttribution: stella commented
Status: Needs work » Needs review

Hi Nate, did you have a chance to review this again? Fixing status.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Issue tags: +Accessibility

The title attribute is certainly a good way to do this. In D7 you can also just add '#title_display' => 'invisible', when defining the form element and it will be hidden to the display, but also accessible to screen readers. It doesn't use the title attribute, but it still meets WCAG 2.0 AA guidelines.

Liam Morland’s picture

Liam Morland
Primary language English
Location Ontario, CA 🇨🇦
CreditAttribution: Liam Morland commented
Version: 7.x-3.x-dev » 7.x-4.x-dev
FileSize
webform_1287382_labels.patch1.4 KB

Reroll.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented
Status: Needs review » Reviewed & tested by the community
FileSize
Screen Shot 2013-04-05 at 12.43.39 PM.png207.79 KB

That works well. I spun up an instance with SimplyTest.me and grabbed this screenshot:
Screen Shot of patch #7 with the label hidden.

Thanks for pushing this ahead Liam.

Liam Morland’s picture

Liam Morland
Primary language English
Location Ontario, CA 🇨🇦
CreditAttribution: Liam Morland commented
Title: webform field label accessibility » Use invisible instead of non-existent field labels for accessibility
carwin’s picture

carwin CreditAttribution: carwin commented
Status: Reviewed & tested by the community » Closed (fixed)

Thanks Liam and stella, this is committed to the 7.x-4.x branch.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

Thanks!

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

This patch introduced a Notice error when creating components: #2020705: Notice: Undefined index: name in webform_component_defaults().

andrewmacpherson’s picture

andrewmacpherson CreditAttribution: andrewmacpherson commented
Version: 7.x-4.x-dev » 7.x-3.x-dev
Status: Closed (fixed) » Needs review
FileSize
webform-invisible-label-7.x-3.x-1287382-13.patch1.71 KB

Re-rolling for people still using 7.x-3.x (the patches above no longer apply).

Are backports to 7.x-3.x still being considered?

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented

Sure @andrewmacpherson, I think this would be valid for backporting. Thanks for the reroll. I'm not updating the 7.x-3.x as frequently as the 7.x-4.x branch, but I'll make sure this gets in next time I'm reviewing patches.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

Did this get in 7.x-4.0-beta1?

Liam Morland’s picture

Liam Morland
Primary language English
Location Ontario, CA 🇨🇦
CreditAttribution: Liam Morland commented

Yes.

quicksketch’s picture

quicksketch
he/him
CreditAttribution: quicksketch commented
Issue summary: View changes
Status: Needs review » Needs work

The 4.x patch was causing PHP notices apparently. This patch was revised in #2020705: Notice: Undefined index: name in webform_component_defaults() to work in a more graceful manner. The 3.x backport no longer applies and should use the same approach used in that fix. Really I'd prefer to just say, "use 4.x", but if this patch is rerolled for 3.x it'll get in eventually.

mgifford’s picture

mgifford
he/him
Primary language English
CreditAttribution: mgifford commented

At this rate, it looks like the 4.x branch is going to be out before we get a patch for this issue into 3.x.

That's fine with me. Thanks for fixing the PHP notices.

rreiss’s picture

rreiss CreditAttribution: rreiss commented

#13 Works for me. Thanks!

DanChadwick’s picture

DanChadwick CreditAttribution: DanChadwick commented
Status: Needs work » Closed (won't fix)

7.x-3.x is receiving critical fixes only.

tlyngej’s picture

tlyngej CreditAttribution: tlyngej commented
FileSize
webform-invisible-label-7.x-3.x-1287382-21.patch1.72 KB

For those in need, here is a reroll of the patch that applies to 3.23

Liam Morland’s picture

Liam Morland
Primary language English
Location Ontario, CA 🇨🇦
CreditAttribution: Liam Morland commented
Version: 7.x-3.x-dev » 7.x-4.x-dev
Status: Closed (won't fix) » Closed (fixed)

This is fixed in 7.x-4.x.

Spokje’s picture

Spokje
Primary language Dutch
CreditAttribution: Spokje at Annertech commented
FileSize
1287382-webform-invisible-label-7.x-3.x-23.patch1.43 KB

Reroll of patch in #21 against the latest HEAD of the 7.x-3.x branch.