Accessibility Alert: Fieldset missing legend

  • maestraweb

    (@maestraweb)


    9 months, 3 weeks ago

    I am working on making a cluster of websites WCAG compliant. I am using the WAVE tool (https://wave.webaim.org/) to scan all the pages and make adjustments. I get the following alert on all Contact Form 7 forms:

    Fieldset missing legend

    Next to the following code:

    <fieldset class="hidden-fields-container"><input type="hidden" name="_wpcf7" value="653"><input type="hidden" name="_wpcf7_version" value="6.1"><input type="hidden" name="_wpcf7_locale" value="en_CA"><input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f653-p444-o1"><input type="hidden" name="_wpcf7_container_post" value="444"><input type="hidden" name="_wpcf7_posted_data_hash" value=""></fieldset>

    Detail:

    Fieldset missing legend

    What It Means

    A fieldset does not have a legend.

    Why It Matters

    A fieldset legend presents a description of the form elements within a fieldset and is especially useful to screen reader users. A legend should be provided when a higher level description is necessary for groups of check boxes, radio buttons, or other form controls.How to Fix It

    If a higher level description is necessary for the user to understand the function or purpose of the controls within the fieldset, provide this description within the <legend>. If this description or grouping is not necessary, the fieldset should probably be removed. Note that the legend is repeated to screen reader users for each form control within the fieldset.The Algorithm… in English

    A fieldset does not have a legend or the legend is empty.

    ==

    Is there a way to add a Legend to this fieldset?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    9 months, 3 weeks ago

    The alert says:

    A legend should be provided when a higher level description is necessary for groups of check boxes, radio buttons, or other form controls.

    The <fieldset class="hidden-fields-container">...</fieldset> is not the case; a higher level description is not necessary there.

    mattwcraft

    (@mattwcraft)

    9 months, 3 weeks ago

    Did you find a work around for this?

    I am also using WAVE to help create a WCAG compliant site and am getting the “Fieldset missing legend” alert.

    I agree a higher level description is not necessary but is a fieldset needed?

    Wave suggest removing the fieldset if grouping is not necessary “How to Fix It

    If a higher level description is necessary for the user to understand the function or purpose of the controls within the fieldset, provide this description within the <legend>. If this description or grouping is not necessary, the fieldset should probably be removed. Note that the legend is repeated to screen reader users for each form control within the fieldset.”

    pavlobondarchuk

    (@bonddesign)

    9 months, 1 week ago

    This issue can be addressed either via JavaScript or PHP, depending on your preference and setup:

    • JavaScript: You can dynamically insert a <legend> element into each <fieldset> using a script after the DOM has loaded. This is useful when you don’t want to modify the form markup directly or need to support multiple forms.
    • PHP: Using the wpcf7_form_elements filter hook provided by Contact Form 7, you can modify the form’s HTML before it is rendered. This allows you to inject a <legend> server-side into any <fieldset> with a specific class (e.g., .hidden-fields-container), ensuring it’s part of the initial output.

    Both approaches are valid, but PHP is generally more robust for accessibility and SEO, while JavaScript offers flexibility if server-side changes aren’t practical.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Accessibility Alert: Fieldset missing legend’ is closed to new replies.