Skip to main content

Updated checkbox for improved accessibility

What components does this change affect?

This change affects all implementations of the checkbox component.

HTML structure changes:

  • Changed container element from <div> to <fieldset>
  • Changed group label element from <label> to <legend>

Before

<div class="form-group form-single-checkbox ">
    <label class="control-label">Group Label</label>
    <!-- checkbox -->
</div>

After

<fieldset class="form-group form-single-checkbox>
    <legend class="control-label">Group Label</legend>
    <!-- checkboxes -->
</fieldset>

Why this change was made

This change improves the accessibility and semantic structure of the checkbox component.

Benefits include:

  • Better accessibility – screen readers can better identify and announce a checkbox
  • Supports WCAG 2.2 guidance – improves semantic grouping and accessibility best practice
  • Semantic HTML – uses elements according to their intended meaning rather than generic containers, improving structure and clarity

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing checkboxes in your application to confirm everything behaves as expected.

Areas worth checking:

  • checkboxes display correctly
  • spacing and layout remain consistent
  • validation messages display as expected
  • screen reader behaviour meets your application requirements

Applications not using the NuGet package tag helpers should review any manually maintained checkbox markup and align it with the updated structure shown above and on the checkbox page in the form components section.

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

For peace of mind, you may wish to perform a quick check in consuming applications to confirm checkbox values continue to submit and save as expected.

Summary

This change is not expected to introduce functional issues. A quick review in consuming applications is recommended to confirm the updated markup works as expected in your implementation.

Internal reference

Design System internal reference: 95629

Was this page helpful?