There are currently three methods to group checkboxes that allow web visitors to know that the options are all a part of one form field.
Utilize a fieldset and legend element
Utilize ARIA groups role="group" and aria-label or aria-labelledby
Utilize aria-labelledby attribute that points to the same element for every checkbox in the group
Examples of all three approaches are below. Option 1 is the most utilized. The additional options may allow for more customizable styling.
Option 1: fieldset and legend
<fieldset>
<legend>Select one or more departments</legend>
<input type="checkbox" name="dept1" id="business" value="business"> <label for="dept1">Business</label>
<input type="checkbox" name="dept2" id="computing" value="computing"> <label for="dept2">Computing</label>
<input type="checkbox" name="dept3" id="design" value="design"> <label for="dept3">Design</label>
</fieldset>
Option 2: ARIA groups
<div role="group" aria-label="Select one or more departments">
<div>Select one or more departments</div>
<input type="checkbox" name="dept1" id="business" value="business"> <label for="dept1">Business</label>
<input type="checkbox" name="dept2" id="computing" value="computing"> <label for="dept2">Computing</label>
<input type="checkbox" name="dept3" id="design" value="design"> <label for="dept3">Design</label>
</div>
Option 3: aria-labelledby attribute
<div id="dept-field">Select one or more departments</div>
<input type="checkbox" aria-labelledby="dept-field dept1" name="dept1" id="business" value="business"> <label id="dept1" for="dept1">Business</label>
<input type="checkbox" aria-labelledby="dept-field dept2" name="dept2" id="computing" value="computing"> <label id="dept2" for="dept2">Computing</label>
<input type="checkbox" aria-labelledby="dept-field dept3" name="dept3" id="design" value="design"> <label id="dept3" for="dept3">Design</label>