docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

public/docs/ts/latest/cookbook/a11y.jade

@@ -152,7 +152,7 @@ include ../_util-fns
     ### Implicit labelling
 
     Firstly we will look at the absolute easiest, quickest way to furnish our form controls with accessible labels,
-    and that is with a pattern called `implicit labelling`.
+    and that is with a syntax called `implicit labelling`.
 
     `Implicit labelling` is done like this:
 
@@ -162,7 +162,7 @@ code-example(language="html" escape="html").
     </label>
 
 :marked
-    Easy hey? Of course, here the `INPUT` element can be any native `HTML` form element.
+    Easy, isn't it? Of course, here the `INPUT` element can be any native `HTML` form element.
 
     Let us now explore how we can use `implicit labelling` to decorate the commonly used native `HTML` form elements
     in our Angular&nbsp;2 components.
@@ -219,6 +219,12 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Checkboxes
 
+.l-sub-section
+    :marked
+        Because of the many `input` fields making up a `checkbox group`, the usual rule applies for each input but the
+        entire group also needs labelled and this is done by using `fieldset` and `legend`.
+
+:marked
     Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html')
@@ -267,6 +273,11 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Radiobuttons
 
+.l-sub-section
+    :marked
+        As with the `checkbox group`, a `radiobutton group`, is also labelled using `fieldset` and `legend`.
+
+:marked
     Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.html')
@@ -347,20 +358,24 @@ code-example(language="html" escape="html" format="linenums").
     you need to write the input outside the lable for positioning or styling purposes. Or maybe your elements are
     already furnished with id's.
 
-    As alternative you can also use the `explicit labelling` syntax. For this syntax you are required to add an `id` to
-    the `HTML` form element to connect the label up via a `for / id` pairing [The `for` attribute of the label has to
-    contain the `id` of the input being labelled].
+    As an alternative, you can also use the `explicit labelling` syntax. For this syntax you are required to add an `id` to
+    the `HTML` form element. This is then connected up up via a `for / id` pairing *[The `for` attribute of the label has to
+    match the `id` of the element being labelled]* .
 
-    This is also the reason why `implicit labelling` could come in very useful with reusable Angular&nbsp;2 components.
-    Remember that an `id` should be unique on a page, and any component where `explicit labelling` is used, will need
-    a way to add unique id's to the elements, unless it is certain that the component will only be used once per page.
+    This is also the reason why `implicit labelling` could be more useful with reusable Angular&nbsp;2 components.
+    Remember that an `id` should be unique on a page. This means that any component with `explicit labelling` in its
+    template, will need a way ensure that its elements are uniquely labelled, unless it is certain that the component
+    will only be used once per page.
 
-    This time we will only look at adding an `explicit label` to an `INPUT`. The examples under the `implicit labelling`
-    section can then easily be adjusted to use this pattern.
+    As an example, we will only look at adding an `explicit label` to an `INPUT`. The examples under the `implicit labelling`
+    section can then easily be adjusted to use this syntax.
 
-    **NOTE:** In the example code we are generating `GUID's` for id's to ensure that they are unique. You can use your
-    own method to do this, as long as every page id is unique.
+.l-sub-section
+    :marked
+        In the example application code we are generating `GUID's` for id's to ensure that they are unique. You can use your
+        own method to do this, as long as every id on a page is unique.
 
+:marked
     Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-input-explicit.component.html')
@@ -382,15 +397,15 @@ code-example(language="html" escape="html" format="linenums").
             <input class="form-control"
                    id="c90c7f99-330e-4723-bfa8-9ab72a4bd435">
         </div>
-        </a11y-input-explicit>
+    </a11y-input-explicit>
 
 :marked
     ### Hidden labels
 
-    Sometimes, the design of your page makes more send without a visible label. Think about `search` fields. Do you have
+    Sometimes, the design of your page makes more sense without a visible label. Think about `search` fields. Do you have
     to provide a visual label for each one?
 
-    The answer is no. But does that mean we get away with not labelling the field at all?
+    The answer is no. But does that mean we get away with not labelling those fields at all?
 
     Once again the answer is no.
 
@@ -399,12 +414,16 @@ code-example(language="html" escape="html" format="linenums").
     We can either use an `explicitly labelled` input and hide the label with style, or we can use the `aria-label`, which
     is an `ARIA Property`.
 
-    **NOTE:**: We cannot hide the label using the `display` css property. Hidden fields are also hidden to assistive
-    technologies so we have to use some css magic to either position the label outside of the visible page or
-    shrinking it right down to be absolutely minute. We wont see it but screen readers will still find it and read it while
-    still linking it to the correct input via the `for / id' linkup.
+.l-sub-section
+    :marked
+        We cannot hide the label using the `display` css property. Hidden fields are also hidden to assistive
+        technologies so we have to use some css magic to either position the label outside of the visible page or
+        shrinking it right down to be absolutely minute. We wont see it but screen readers will still find it and read it while
+        still linking it to the correct input via the `for / id` linkup. The following example contains such a
+        `visually hidden` style.
 
-    So why don't we create a component showing off both, and use the internal component styles to hide the label.
+:marked
+    Let us create a component showing off both, and use the internal component styles to hide the label.
 
 +makeTabs('cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.html, cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.ts, cb-a11y/ts/app/form-controls/a11y-hidden-labels.component.css', null, 'a11y-hidden-labels.component.html,a11y-hidden-labels.component.ts,a11y-hidden-labels.component.css')
 
@@ -420,6 +439,10 @@ code-example(language="html" escape="html" format="linenums").
 code-example(language="html" escape="html" format="linenums").
                 <input aria-label="Filter:">
 
+:marked
+    This `aria-label` attribute serves the same purpose as our `LABEL` tags above and will tell screen readers what
+    the field is called.
+
 .l-main-section
 <a id="keyboard-shortcuts"></a>
 :marked