Missing grouping for related form fields
forms/group-missing
- WCAG success criterion
- 1.3.1 (level A)
- Outcome class
- Hint only. An automated check that by design reports review hints only: its findings are marked for manual review, never as confirmed violations.
- Area
- Accessibility, Structure & Semantics
- Default severity
- medium
- axe-core rule
form-field-group
Why we flag this
Screen reader users cannot tell that several fields belong to one question/group.
Radio buttons/checkboxes without an enclosing <fieldset> with <legend>.
What the rule checks
Scope. Radio buttons (native or role=radio) and checkboxes sharing a name within one form.
Expectation. Needs review for each radio button and each checkbox of a same-name set of two or more that is not inside a fieldset, details, role=group or role=radiogroup: the question the set answers is not tied to it. fieldset is a technique, not a requirement, so never a confirmed violation. A single checkbox ("I accept the terms") is no set; grouped options are not reported.
Source. WCAG 2.2 SC 1.3.1 Info and Relationships; techniques H71, ARIA17
Detection: shared; needs dom.
Failing example
The check flags this for review. Corpus case form_heuristics_flagged. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form heuristics: true positives (#643)</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><style>
/* #783: page shell, so the case only reports what it is about */
.skip, nav a { display: inline-block; padding: 12px; min-height: 44px; min-width: 44px; box-sizing: border-box; }
button, input, select, textarea { min-height: 44px; min-width: 44px; box-sizing: border-box; }
input[type="checkbox"], input[type="radio"] { width: 44px; height: 44px; }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header><p>Example Shop</p><nav aria-label="Main"><a href="/" aria-current="page">Home</a> <a href="/help">Help</a></nav></header>
<main id="main">
<h1>Registration form</h1>
<form>
<!-- Date field without any instruction: still reported, but as
needs review (the format requirement is guessed from the
label), never as a confirmed violation -->
<label for="dob">Date of birth</label>
<input type="text" id="dob" name="dob">
<!-- Two related checkboxes (same name) without fieldset/legend -->
<p>Interests</p>
<label><input type="checkbox" name="interests" value="news"> News</label>
<label><input type="checkbox" name="interests" value="events"> Events</label>
<button type="submit">Register</button>
</form>
</main>
<footer><p>Example Shop, 2026</p></footer>
</body>
</html>Passing example
The check passes here and reports nothing. Corpus case form_heuristics_clean. The page may contain further findings for other rules.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Form heuristics: true negatives (#643)</title>
<meta name="viewport" content="width=device-width, initial-scale=1"><style>
/* #783: page shell, so the case only reports what it is about */
.skip, nav a { display: inline-block; padding: 12px; min-height: 44px; min-width: 44px; box-sizing: border-box; }
button, input, select, textarea { min-height: 44px; min-width: 44px; box-sizing: border-box; }
input[type="checkbox"], input[type="radio"] { width: 44px; height: 44px; }
</style>
</head>
<body>
<a class="skip" href="#main">Skip to main content</a>
<header><p>Example Shop</p><nav aria-label="Main"><a href="/" aria-current="page">Home</a> <a href="/help">Help</a></nav></header>
<main id="main">
<h1>Booking form</h1>
<form>
<!-- Mode switch: radios correctly grouped -->
<fieldset>
<legend>Mode</legend>
<label><input type="radio" name="mode" value="broken" checked> Broken</label>
<label><input type="radio" name="mode" value="fixed"> Fixed</label>
</fieldset>
<!-- Date field with instructions via aria-describedby: the
description counts as the format instruction -->
<label for="booking-date">Date</label>
<input type="text" id="booking-date" name="date" inputmode="numeric" aria-describedby="booking-date-hint">
<p id="booking-date-hint">Day of travel</p>
<!-- "passiert" contains "pass" but is no passport field -->
<label for="report-what">Was ist passiert?</label>
<textarea id="report-what" name="what" rows="4" aria-describedby="report-what-hint"></textarea>
<span id="report-what-hint">Was Sie erwartet haben und was stattdessen passiert ist</span>
<!-- A single checkbox, and a second one with a different name:
neither is a group -->
<label><input type="checkbox" class="bill-sr"> Screen reader view</label>
<label><input type="checkbox" name="newsletter"> Send me the newsletter</label>
<button type="submit">Search</button>
</form>
</main>
<footer><p>Example Shop, 2026</p></footer>
</body>
</html>This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.