docs(cb-a11y): Content - Form controls

Author: AlmeroSteyn

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

@@ -52,7 +52,7 @@ include ../_util-fns
 
     The makers of the browsers have spent a lot of time thinking about the very same issue that has brought
     you to this page today and have provided you with a lot of functionality out-of-the-box when you make use of
-    standard `HTML` elements in your component templates.
+    standard `HTML` elements.
 
     We would like to suggest the following rule of thumb when building your applications:
 
@@ -77,26 +77,26 @@ include ../_util-fns
     But, we know this is not always possible, so this guide will also show you what you can do to make your own
     components as accessible as possible.
 
-    So without further ado, let us see how easy it is to get big accessibility gains in our applications!
-
-
+    So without further ado, let us see how easy it is to get big `a11y` wins in our applications!
 
 .l-main-section
 :marked
     ## Important note on styling in this chapter
 
+.callout.is-important
+    header Angular Pages Do Not Require A Style Library
+    :marked
+        Angular makes no use of the `container`, `row`, `col-xs-12`, `checkbox`, `radio`, `form-group`, `form-control`,
+        and `btn` classes or the styles of any external library. Angular apps can use any CSS library
+        ... or none at all.
+:marked
     The `container`, `row`, `col-xs-12`, `checkbox`, `radio`, `form-group`, `form-control`, and `btn` classes
     come from [Twitter Boostrap](http://getbootstrap.com/css/). This is a purely cosmetic addition to prettify
-    the examples and to also show how in `a11y`, the content of our `HTML` is as important as the final presentation.
+    the examples so that they are as visually appealing as they are accessible.
 
-    Just because something looks good, does not mean it is accessible. But here we strive to achieve both!
+    But always remember, just because something looks good, it does not mean that it is accessible.
 
-.callout.is-important
-    header Angular Pages Do Not Require A Style Library
-    :marked
-     Angular makes no use of the `container`, `row`, `col-xs-12`, `checkbox`, `radio`, `form-group`, `form-control`,
-     and `btn` classes or the styles of any external library. Angular apps can use any CSS library
-     ... or none at all.
+    The good news is, here we strive to achieve both!
 
 .l-main-section
 <a id="toc"></a>
@@ -118,22 +118,25 @@ include ../_util-fns
 :marked
     ## Accessible form control labels
 
-    Whether using already existing `HTML` elements or creating your own rich custom form components, it is crucial to
+    Whether you are using already existing `HTML` elements or creating your own rich custom form components, it is crucial to
     label them. Imagine coming face-to-face with a customer details page on your favourite online store, only to
     be faced with screen filled with unlabelled input fields!
 
-    Impossible right?
+    A nightmare right? Users will leave so fast the bouncerate counter will be able to power a small town it will be
+    spinning *THAT* fast.
 
-    We can solve this by simply adding a label for each field. But users of our website may not always be able to see
-    or recognise these labels without assistance.
+    We can avoid this from ever happening by simply adding a label for each field. Generaly this is not out problem,
+    however the users of our website may not always be able to see or recognise these labels without assistance.
 
     For this reason it is not only important to visually mark any form component, or as they are sometimes called,
     `form controls`, but to do so in a way that also exposes it to assistive technologies.
 
     We will discuss a number of ways to do this.
 
-    **NOTE**: You will see `ng-content` make its appearance a lot in the examples. We are making use of `Content Projection`
-    to load content into the templates of our components.
+.l-sub-section
+    :marked
+        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