Problem/Motivation

Each form field in the preview page of a webform has an orphaned label. The page renders each label element without setting the "for" attribute. This violates WCAG 1.3.1.

Steps to reproduce

1. Install Drupal core and enable webform module
2. Make a webform or use existing contact form
3. In form settings, under the form tab, set the "enable preview page" field to required
4. Test form and advance to the preview page - each field's label has no "for" attribute set

Proposed resolution

This issue came up on an accessibility audit of one our site's webforms. I've consulted Claude Code for help and the issue seems to come from around line 443 in "webform.theme.template.inc". This seems to set the id on the wrapper div element instead of the labelled element directly, so leaving the "for" attribute blank makes sense. However, this could be made more accessible by adding an "aria-labelledby" attribute to the field.

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork webform-3594925

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

ewilborn created an issue. See original summary.

liam morland’s picture

Issue tags: +Accessibility

drupal.ninja03 made their first commit to this issue’s fork.

drupal.ninja03’s picture

Status: Active » Needs review

Created an MR with a proposed fix for the orphaned form label issue on the Webform preview/review display.

The current implementation builds the preview item as a Form API `#type => item` with `#title`, which can render form label markup even though the preview output is display-only and has no associated form control.

The MR changes the preview/display item wrapper from a form item to a container and renders the element title as non-form-label markup using `div.webform-element-label`.

I do not currently have a local browser setup to manually verify the rendered preview page with axe, so this needs manual review/testing.

Setting to Needs review.

divya.sejekan’s picture

Verified with the MR!888 , The orphaned label is removed in the Fix.
Verified for contact form and wizard form
Looks resolved . RTBC++

ewilborn’s picture

Based on screenshots above, the issue is resolved with the changes made in MR!888 but some styling is lost. I'm not sure if this is something that needs to be included, but the label elements in the original changes were bolded so the preview is a little easier to read.