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
| Comment | File | Size | Author |
|---|---|---|---|
| #6 | Screenshot from 2026-06-29 13-48-21.png | 207.44 KB | divya.sejekan |
| #6 | Screenshot from 2026-06-29 13-50-26.png | 238.5 KB | divya.sejekan |
| WAVE_scanner_results_preview_page.png | 204.65 KB | ewilborn | |
| rendered_HTML_on_preview_page.png | 89.43 KB | ewilborn |
Issue fork webform-3594925
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
Comment #2
liam morlandComment #5
drupal.ninja03 commentedCreated 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.
Comment #6
divya.sejekan commentedVerified with the MR!888 , The orphaned label is removed in the Fix.
Verified for contact form and wizard form
Looks resolved . RTBC++
Comment #7
ewilborn commentedBased 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.