Issue Summary

The group of form controls is not associated with its group label. The group-level label helps to completely convey the purpose of individual controls in the group.

Element Name: Select directory type group label.
Location of the element: Located inside the main content.

The problem it causes: Screen reader users are unable to determine the relationship between the form fields and their group label.

Steps to Reproduce

1. Open the home page.
2. Navigate to the "Directories" link and activate it.
3. Navigate to the "Add Directory" link and activate it.
4. Navigate to the mentioned form controls and observe the screen reader does not announce the group label.

Actual Results

The group label "Select directory type" is not provided using <legend> element inside the <fieldset> for grouping of "Internal", "Delegated authentication", and so on radio buttons. 

Expected Results

Fix Information
RULE :
Group labels "Select directory type" MUST be programmatically associated with the group if the individual labels for each element in the group are insufficient on their own.

HOW TO FIX:
Fix this issue by using ONE of the following techniques:
1. Use the fieldset/legend technique:
a. Enclose the group label in an <legend> element.
b. Enclose the <legend> element and all of the related form fields in an <fieldset> element.

Code snippet:

<fieldset class="group">
<legend>Select Directory Type</legend>
<div class="radio">
<input type="radio" checked="checked" name="directoryType" id="directoryType_0" value="INTERNAL" class="radio">
<label for="directoryType_0">Internal</label>
(...)
</div>    
(...)        
<div class="radio">
<input type="radio" name="directoryType" id="directoryType_1" value="DELEGATING" class="radio">
<label for="directoryType_1">Delegated authentication</label>
(...)
</div>    
(...)
</fieldset>   

REFERENCE:
Deque University: https://dequeuniversity.com/class/forms2/group-labels/semantic
W3C-WAI tutorial: https://www.w3.org/WAI/tutorials/forms/

BACKGROUND:
People who are blind cannot use the visual layout of a group of related form elements and their shared group label - such as a question with a set of radio button answers - to determine the relationship between the form fields and the group label. In order to understand the relationship between the form fields, their individual labels, and their group label, the relationships must be expressed semantically. When grouped form elements and their group label are expressed semantically, a screen reader user can put focus on a form element and the screen reader will read the form element label and element type as well as the group label.

Grouping controls are most important for related radio buttons and checkboxes.

Screenshot

Workaround

Not Available

Bug Ref: 359757