docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

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

@@ -138,43 +138,49 @@ include ../_util-fns
         You will see the `ng-content` tag making its appearance a lot in the examples. This is because we are making use
         of `Content Projection` to load content into the templates of our components.
 
-:marked
-    ### Implicit labelling
+.l-sub-section
+    :marked
+        It is very important to note that a `LABEL` element can describe one and only form input element. You cannot
+        label multiple form fields with one label. We will look at ways to do this with `ARIA` later.
 
-    Firstly we will look at the absolute easiest way to furnish your form controls with accessible labels, and that is
-    with a technique called `implicit labelling`.
+.l-sub-section
+    :marked
+        And finally the label text position matters. For `inputs`, `textareas` and `selects`, the label text precedes
+        the element. Whilst for `checkboxes` and `radionbuttons` the text should follow the element in the flow.
 
-    With this technique you get all the benefits of `a11y` for your controls by simply writing your `HTML` in a specific way.
+:marked
+    ### Implicit labelling
 
-    With this writing style you simply wrap the `HTML` element inside a label tag and you are done. There is no need to
-    generate or suppply field id's as you will see with the other methods.
+    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`.
 
-    Implicit labelling is done as follows:
+    `Implicit labelling` is done like this:
 
 code-example(language="html" escape="html").
     <label>label text
         <input>
     </label>
 
 :marked
-    Of course, here the `INPUT` element can be any native `HTML` form element.
+    Easy hey? Of course, here the `INPUT` element can be any native `HTML` form element.
 
-    Let us see how we would write the commonly used native `HTML` form elements in our Angular&nbsp;2 components.
+    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.
 
 :marked
     #### Inputs
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-input.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-input-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-input>
@@ -189,17 +195,17 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Textareas
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-textarea.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-textarea-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-textarea>
@@ -213,17 +219,17 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Checkboxes
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-checkboxes.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-checkboxes-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-checkboxes>
@@ -261,17 +267,17 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Radiobuttons
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-radiobuttons.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-radiobuttons-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-radiobuttons>
@@ -309,17 +315,17 @@ code-example(language="html" escape="html" format="linenums").
 :marked
     #### Select lists
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-select.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-select-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-select>
@@ -355,17 +361,17 @@ code-example(language="html" escape="html" format="linenums").
     **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.
 
-    Your component template:
+    Component template:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-input-explicit.component.html')
 
 :marked
-    Used as:
+    User writes:
 
 +makeExample('cb-a11y/ts/app/form-controls/a11y-form-controls.component.html','cb-a11y-form-controls-input-explicit-usage')
 
 :marked
-    Which is then rendered as:
+    Rendered out:
 
 code-example(language="html" escape="html" format="linenums").
     <a11y-input-explicit>