Accessible inline error message associated with fieldset and radio buttons

Github Page

Methods

The following methods have been used to programmatically associated the error message with the radio buttons within a <fieldset>:

• Method 1: no programmatic association
• Method 2: aria-describedby attribute applied to the <fieldset> element
• Method 3: aria-describedby attribute applied to the <legend> element
• Method 4: aria-describedby attribute applied to all <input> elements

---

Tests

The following tests are to determine if the error message is programmatically associated with the radio buttons within a <fieldset>:

• Test 1: The error message is announced with first unchecked radio button when it receives focus (when travelling forward through the form)
• Test 2: The error message is announced with last unchecked radio button label when it receives focus (when travelling backwards through the form)
• Test 3: The error message is announced with a checked radio button when it receives focus (when travelling forward through the form)
• Test 4: The error message is announced with a checked radio button when it receives focus (when travelling backwards through the form)

A PASS equals passing all four tests above.

---

Results

Combination	Method 1	Method 2	Method 3	Method 4
VoiceOver & Chrome	Fail	Fail	Fail	Pass
VoiceOver & Firefox	Fail	Fail	Fail	Fail
VoiceOver & Safari	Fail	Pass	Fail	Pass
NVDA & Chrome	Fail	Pass	Fail	Pass
NVDA & FireFox	Fail	Pass	Fail	Pass
NVDA & Edge	Fail	Fail	Fail	Fail
JAWS & Chrome	Fail	Pass	Fail	Pass
JAWS & FireFox	Fail	Pass	Fail	Pass
JAWS & Edge	Fail	Fail	Fail	Pass

Github Page