diff --git a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
index e22cb11f49..a322796e74 100644
--- a/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/reactive-forms/e2e/src/app.e2e-spec.ts
@@ -54,7 +54,7 @@ describe('Reactive forms', () => {
   describe('Profile Editor', () => {
     const firstNameInput = getInput('firstName');
     const streetInput = getInput('street');
-    const addAliasButton = element(by.buttonText('Add Alias'));
+    const addAliasButton = element(by.buttonText('+ Add another alias'));
     const updateButton = profileEditor.element(by.buttonText('Update Profile'));
     const profile: Record<string, string | number> = {
       firstName: 'John',
@@ -121,8 +121,7 @@ describe('Reactive forms', () => {
           )
       );
 
-      const aliasInputs = profileEditor.all(by.cssContainingText('label', 'Alias'));
-      const aliasInput = aliasInputs.get(0).element(by.css('input'));
+      const aliasInput = profileEditor.all(by.css('#alias-0'));
       await aliasInput.sendKeys(aliasText);
       const formValueElement = profileEditor.all(by.cssContainingText('p', 'Form Value:'));
       const formValue = await formValueElement.getText();
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.css b/aio/content/examples/reactive-forms/src/app/app.component.css
index e69de29bb2..0befc361b9 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.css
+++ b/aio/content/examples/reactive-forms/src/app/app.component.css
@@ -0,0 +1,3 @@
+nav a {
+  padding: 1rem;
+}
diff --git a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css
index c89ab4cc0b..49ae7164a2 100644
--- a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css
+++ b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.css
@@ -1,19 +1,10 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  padding-top: 24px;
-}
-
 label {
-  display: block;
-  width: 6em;
-  margin: .5em 0;
-  color: #607D8B;
   font-weight: bold;
+  padding-bottom: .5rem;
+  padding-top: 1rem;
+  display: inline-block;
 }
 
-input {
-  height: 2em;
-  font-size: 1em;
-  padding-left: .4em;
-}
\ No newline at end of file
+button {
+  max-width: 300px;
+}
diff --git a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html
index 95f1948ffa..e64837ef92 100644
--- a/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html
+++ b/aio/content/examples/reactive-forms/src/app/name-editor/name-editor.component.html
@@ -1,21 +1,12 @@
 <!-- #docregion control-binding -->
-<label>
-  Name:
-  <input type="text" [formControl]="name">
-</label>
-
+<label for="name">Name: </label>
+<input id="name" type="text" [formControl]="name">
 <!-- #enddocregion control-binding -->
 
 <!-- #docregion display-value -->
-
-<p>
-  Value: {{ name.value }}
-</p>
+<p>Value: {{ name.value }}</p>
 <!-- #enddocregion display-value -->
 
 <!-- #docregion update-value -->
-
-<p>
-  <button (click)="updateName()">Update Name</button>
-</p>
+<button (click)="updateName()">Update Name</button>
 <!-- #enddocregion update-value -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
index 489bdc0781..f125ab7a8a 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.1.html
@@ -1,65 +1,48 @@
 <!-- #docplaster -->
 <!-- #docregion formgroup -->
 <form [formGroup]="profileForm">
-  
-  <label>
-    First Name:
-    <input type="text" formControlName="firstName">
-  </label>
 
-  <label>
-    Last Name:
-    <input type="text" formControlName="lastName">
-  </label>
+  <label for="first-name">First Name: </label>
+  <input id="first-name" type="text" formControlName="firstName">
+
+  <label for="last-name">Last Name: </label>
+  <input id="last-name" type="text" formControlName="lastName">
 
 <!-- #enddocregion formgroup -->
   <!-- #docregion formgroupname -->
   <div formGroupName="address">
-    <h3>Address</h3>
+    <h2>Address</h2>
 
-    <label>
-      Street:
-      <input type="text" formControlName="street">
-    </label>
+    <label for="street">Street: </label>
+    <input id="street" type="text" formControlName="street">
 
-    <label>
-      City:
-      <input type="text" formControlName="city">
-    </label>
-    
-    <label>
-      State:
-      <input type="text" formControlName="state">
-    </label>
+    <label for="city">City: </label>
+    <input id="city" type="text" formControlName="city">
 
-    <label>
-      Zip Code:
-      <input type="text" formControlName="zip">
-    </label>
+    <label for="state">State: </label>
+    <input id="state" type="text" formControlName="state">
+
+    <label for="zip">Zip Code: </label>
+    <input id="zip" type="text" formControlName="zip">
   </div>
   <!-- #enddocregion formgroupname -->
 
   <div formArrayName="aliases">
-    <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
+    <h2>Aliases</h2>
+    <button (click)="addAlias()">+ Add another alias</button>
 
     <div *ngFor="let address of aliases.controls; let i=index">
       <!-- The repeated alias template -->
-      <label>
-        Alias:
-        <input type="text" [formControlName]="i">
-      </label>
+      <label for="alias-{{ i }}">Alias: </label>
+      <input id="alias-{{ i }}" type="text" [formControlName]="i">
     </div>
   </div>
-<!-- #docregion formgroup -->  
+<!-- #docregion formgroup -->
 </form>
 <!-- #enddocregion formgroup -->
 
-<p>
-  Form Value: {{ profileForm.value | json }}
-</p>
+<p>Form Value: {{ profileForm.value | json }}</p>
 
 <!-- #docregion patch-value -->
-<p>
-  <button (click)="updateProfile()">Update Profile</button>
-</p>
-<!-- #enddocregion patch-value -->
\ No newline at end of file
+<button (click)="updateProfile()">Update Profile</button>
+<!-- #enddocregion patch-value -->
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
index 310e787cfe..95f895dd1e 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
@@ -1,39 +1,11 @@
 /* ProfileEditorComponent's private CSS styles */
-:host {
-  display: flex;
-  flex-direction: column;
-  padding-top: 24px;
+
+form {
+  padding-top: 1rem;
 }
 
 label {
   display: block;
-  width: 6em;
   margin: .5em 0;
-  color: #607D8B;
   font-weight: bold;
 }
-
-input {
-  height: 2em;
-  font-size: 1em;
-  padding-left: .4em;
-}
-
-button {
-  font-family: Arial, sans-serif;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: #cfd8dc;
-}
-
-button:disabled {
-  background-color: #eee;
-  color: #ccc;
-  cursor: auto;
-}
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
index 20688484e3..c07b49ee3d 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.html
@@ -2,72 +2,54 @@
 <!-- #docregion ng-submit -->
 <form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
 <!-- #enddocregion ng-submit -->
-  <label>
-    First Name:
-    <input type="text" formControlName="firstName" required>
-  </label>
+  <label for="first-name">First Name: </label>
+  <input id="first-name" type="text" formControlName="firstName" required>
 
-  <label>
-    Last Name:
-    <input type="text" formControlName="lastName">
-  </label>
+  <label for="last-name">Last Name: </label>
+  <input id="last-name" type="text" formControlName="lastName">
 
   <div formGroupName="address">
-    <h3>Address</h3>
+    <h2>Address</h2>
 
-    <label>
-      Street:
-      <input type="text" formControlName="street">
-    </label>
+    <label for="street">Street: </label>
+    <input id="street" type="text" formControlName="street">
 
-    <label>
-      City:
-      <input type="text" formControlName="city">
-    </label>
-    
-    <label>
-      State:
-      <input type="text" formControlName="state">
-    </label>
+    <label for="city">City: </label>
+    <input id="city" type="text" formControlName="city">
 
-    <label>
-      Zip Code:
-      <input type="text" formControlName="zip">
-    </label>
+    <label for="state">State: </label>
+    <input id="state" type="text" formControlName="state">
+
+    <label for="zip">Zip Code: </label>
+    <input id="zip"type="text" formControlName="zip">
   </div>
 
   <!-- #docregion formarrayname -->
   <div formArrayName="aliases">
-    <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button>
+    <h2>Aliases</h2>
+    <button (click)="addAlias()">+ Add another alias</button>
 
     <div *ngFor="let alias of aliases.controls; let i=index">
       <!-- The repeated alias template -->
-      <label>
-        Alias:
-        <input type="text" [formControlName]="i">
-      </label>
+      <label for="alias-{{ i }}">Alias:</label>
+      <input id="alias-{{ i }}" type="text" [formControlName]="i">
     </div>
   </div>
   <!-- #enddocregion formarrayname -->
 
+
   <!-- #docregion submit-button -->
+  <p>Complete the form to enable button.</p>
   <button type="submit" [disabled]="!profileForm.valid">Submit</button>
   <!-- #enddocregion submit-button -->
 </form>
 
 <hr>
 
-<p>
-  Form Value: {{ profileForm.value | json }}
-</p>
+<p>Form Value: {{ profileForm.value | json }}</p>
 
 <!-- #docregion display-status -->
-
-<p>
-  Form Status: {{ profileForm.status }}
-</p>
+<p>Form Status: {{ profileForm.status }}</p>
 <!-- #enddocregion display-status -->
 
-<p>
-  <button (click)="updateProfile()">Update Profile</button>
-</p>
+<button (click)="updateProfile()">Update Profile</button>
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index 56633c39bf..7d7e53897f 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -13,7 +13,7 @@ Try this <live-example title="Reactive Forms in Stackblitz">Reactive Forms live-
 Before going further into reactive forms, you should have a basic understanding of the following:
 
 * [TypeScript](https://www.typescriptlang.org/ "The TypeScript language") programming.
-* Angular app-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
+* Angular application-design fundamentals, as described in [Angular Concepts](guide/architecture "Introduction to Angular concepts.").
 * The form-design concepts that are presented in [Introduction to Forms](guide/forms-overview "Overview of Angular forms.").
 
 {@a intro}
@@ -85,7 +85,7 @@ The form control assigned to `name` is displayed when the component is added to
 <code-example path="reactive-forms/src/app/app.component.1.html" region="app-name-editor" header="src/app/app.component.html (name editor)"></code-example>
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/name-editor-1.png" alt="Name Editor">
+  <img src="generated/images/guide/reactive-forms/name-editor-1.png" alt="Name Editor, which has a name label and an input so the user can enter a name">
 </div>
 
 {@a display-value}
@@ -126,7 +126,7 @@ Update the template with a button to simulate a name update. When you click the
 The form model is the source of truth for the control, so when you click the button, the value of the input is changed within the component class, overriding its current value.
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/name-editor-2.png" alt="Name Editor Update">
+  <img src="generated/images/guide/reactive-forms/name-editor-2.gif" alt="Name Editor Update with a name label, the name Nancy in the input, text specifying that the value of the input is Nancy and an Update Name button">
 </div>
 
 <div class="alert is-helpful">
@@ -217,7 +217,7 @@ To display the `ProfileEditor` component that contains the form, add it to a com
 `ProfileEditor` allows you to manage the form control instances for the `firstName` and `lastName` controls within the form group instance.
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/profile-editor-1.png" alt="Profile Editor">
+  <img src="generated/images/guide/reactive-forms/profile-editor-1.gif" alt="Profile Editor with labels and inputs for first and last name as well as a submit button">
 </div>
 
 {@a nested-groups}
@@ -254,7 +254,7 @@ Add the `address` form group containing the `street`, `city`, `state`, and `zip`
 The `ProfileEditor` form is displayed as one group, but the model is broken down further to represent the logical grouping areas.
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/profile-editor-2.png" alt="Profile Editor Update">
+  <img src="generated/images/guide/reactive-forms/profile-editor-2.png" alt="Profile editor update adding address inputs, instructive text for filling out the form to enable the submit button, and a disabled submit button">
 </div>
 
 <div class="alert is-helpful">
@@ -388,7 +388,7 @@ Display the current status of `profileForm` using interpolation.
 <code-example path="reactive-forms/src/app/profile-editor/profile-editor.component.html" region="display-status" header="src/app/profile-editor/profile-editor.component.html (display status)"></code-example>
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/profile-editor-3.png" alt="Profile Editor Validation">
+  <img src="generated/images/guide/reactive-forms/profile-editor-3.png" alt="Profile Editor with validation status of invalid">
 </div>
 
 The **Submit** button is disabled because `profileForm` is invalid due to the required `firstName` form control. After you fill out the `firstName` input, the form becomes valid and the **Submit** button is enabled.
@@ -466,7 +466,7 @@ Add the template HTML below after the `<div>` closing the `formGroupName` elemen
 The `*ngFor` directive iterates over each form control instance provided by the aliases form array instance. Because form array elements are unnamed, you assign the index to the `i` variable and pass it to each control to bind it to the `formControlName` input.
 
 <div class="lightbox">
-  <img src="generated/images/guide/reactive-forms/profile-editor-4.png" alt="Profile Editor Aliases">
+  <img src="generated/images/guide/reactive-forms/profile-editor-4.png" alt="Profile Editor with aliases section, which includes an alias label, input, and button for adding another alias text input">
 </div>
 
 Each time a new alias instance is added, the new form array instance is provided its control based on the index. This allows you to track each individual control when calculating the status and value of the root control.
diff --git a/aio/content/images/guide/reactive-forms/name-editor-1.png b/aio/content/images/guide/reactive-forms/name-editor-1.png
index 9806d5441a..93148353ef 100644
Binary files a/aio/content/images/guide/reactive-forms/name-editor-1.png and b/aio/content/images/guide/reactive-forms/name-editor-1.png differ
diff --git a/aio/content/images/guide/reactive-forms/name-editor-2.gif b/aio/content/images/guide/reactive-forms/name-editor-2.gif
new file mode 100644
index 0000000000..574aa88b54
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/name-editor-2.gif differ
diff --git a/aio/content/images/guide/reactive-forms/name-editor-2.png b/aio/content/images/guide/reactive-forms/name-editor-2.png
deleted file mode 100644
index 4a2b1de1b6..0000000000
Binary files a/aio/content/images/guide/reactive-forms/name-editor-2.png and /dev/null differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-1.gif b/aio/content/images/guide/reactive-forms/profile-editor-1.gif
new file mode 100644
index 0000000000..cead724306
Binary files /dev/null and b/aio/content/images/guide/reactive-forms/profile-editor-1.gif differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-1.png b/aio/content/images/guide/reactive-forms/profile-editor-1.png
deleted file mode 100644
index e2740c36c3..0000000000
Binary files a/aio/content/images/guide/reactive-forms/profile-editor-1.png and /dev/null differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-2.png b/aio/content/images/guide/reactive-forms/profile-editor-2.png
index e47e0934f9..fa764f62ed 100644
Binary files a/aio/content/images/guide/reactive-forms/profile-editor-2.png and b/aio/content/images/guide/reactive-forms/profile-editor-2.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-3.png b/aio/content/images/guide/reactive-forms/profile-editor-3.png
index 5e202d3e10..bce861e40e 100644
Binary files a/aio/content/images/guide/reactive-forms/profile-editor-3.png and b/aio/content/images/guide/reactive-forms/profile-editor-3.png differ
diff --git a/aio/content/images/guide/reactive-forms/profile-editor-4.png b/aio/content/images/guide/reactive-forms/profile-editor-4.png
index 39a79e37b1..4ff04a84ce 100644
Binary files a/aio/content/images/guide/reactive-forms/profile-editor-4.png and b/aio/content/images/guide/reactive-forms/profile-editor-4.png differ