Design guidelines: Form and form control

packages/documentation-site/patternfly-docs/content/components/checkbox/checkbox.md

@@ -10,13 +10,13 @@ import '../components.css';
 Checkboxes allow users to choose **1 or more items** from a list of options.
 
 <div class="ws-docs-content-img">
-![Example of a form question with mutliple checkbox options stacked vertically.](./img/CB-usage-multi.svg)
+![Example of a form question with mutliple checkbox options stacked vertically.](./img/checkbox-usage-multi.svg)
 </div>
 
 You can also use a single checkbox to allow a user to enable or disable a feature or setting, along with a save button. 
 
 <div class="ws-docs-content-img">
-![Example of a single checkbox.](./img/CB-usage-single.svg)
+![Example of a single checkbox for a common "Remember me" option.](./img/checkbox-usage-single.svg)
 </div>
 
 ### When to use
@@ -29,16 +29,16 @@ You can also use a single checkbox to allow a user to enable or disable a featur
 
 Checkbox labels fall to the right of the checkbox control. If placed vertically, all checkbox controls should be aligned with the left edge of other controls or input fields, in the form or on the page. 
 
-You can use headings to label a group of checkboxes. The placement of headings will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines).
+You should provide a visible label to a group of checkboxes. The placement of the label will depend on the layout of other content in the form or on the page you’re designing. For more information on how to arrange checkboxes, see our [forms documentation](/components/forms/form/design-guidelines).
 
 <div class="ws-docs-content-img">
-![Example of a group of checkboxes.](./img/CB-alignment.svg)
+![Example of a group of checkboxes with a label for the group.](./img/checkbox-alignment.svg)
 </div>
 
-You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be enabled or disabled when the user selects or deselects a checkbox.
+You also have the option to use progressive disclosure by nesting other controls underneath a checkbox. The nested options would be shown or hidden when the user selects or deselects a checkbox.
 
 <div class="ws-docs-content-img">
-![Example of nested control checkboxes.](./img/CB-nested.svg)
+![Example of nested control checkboxes.](./img/checkbox-nested.svg)
 </div>
 
 ### When to use switches vs. checkboxes
@@ -47,20 +47,20 @@ The main difference between a switch and a checkbox is that a switch changes an
 * Use checkboxes when the options do not save automatically and require the user to perform an additional action to save changes (in this case, pressing the “Save changes” button).
 
     <div class="ws-docs-content-img">
-    ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-1.svg)
+    ![Example 1 of do's and don'ts for using a checkbox or a switch.](./img/checkbox-vs-switch-1.svg)
     </div>
 
 
 * Use a switch for situations where you are turning a series of one or more independent options on or off.
 
     <div class="ws-docs-content-img">
-    ![Example 2 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-2.svg)
+    ![Example 2 of do's and don'ts for using a checkbox or a switch. On the left is the "do" example, a group of switches that correspond to various toggleable options like "Airplane mode", "Bluetooth", "Wi-fi", and "Cellular". On the right is the "don't" example, a group of checkboxes with the same options.](./img/checkbox-vs-switch-2.svg)
     </div>
 
 * Use checkboxes when you may have an indeterminate state where you can select all, none, or some actions.
 
     <div class="ws-docs-content-img">
-    ![Example 3 of do's and don'ts for using a checkbox or a switch.](./img/CB-vs-switch-3.svg)
+    ![Example 3 of do's and don'ts for using a checkbox or a switch. On the left is the "do" example, a group of nested checkboxes where the parent checkbox can have a "mixed" state where some of its children are checked and some unchecked. On the right is the "don't" example, a group of switches with the same nested behavior.](./img/checkbox-vs-switch-3.svg)
     </div>
 
 ## Accessibility