diff --git a/aio/content/examples/.eslintrc.json b/aio/content/examples/.eslintrc.json
index b1b25254dc0..e77999f90ac 100644
--- a/aio/content/examples/.eslintrc.json
+++ b/aio/content/examples/.eslintrc.json
@@ -13,12 +13,12 @@
         "plugin:@angular-eslint/template/recommended"
       ],
       "rules": {
-        "@angular-eslint/template/accessibility-alt-text": "off", // TODO: Fix the code violating this rule and enable it.
-        "@angular-eslint/template/accessibility-elements-content": "off", // TODO: Fix the code violating this rule and enable it.
-        "@angular-eslint/template/accessibility-label-has-associated-control": "off", // TODO: Fix the code violating this rule and enable it.
+        "@angular-eslint/template/accessibility-alt-text": "error",
+        "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/accessibility-label-has-associated-control": "error",
         "@angular-eslint/template/accessibility-table-scope": "error",
         "@angular-eslint/template/accessibility-valid-aria": "error",
-        "@angular-eslint/template/click-events-have-key-events": "off", // TODO: Fix the code violating this rule and enable it.
+        "@angular-eslint/template/click-events-have-key-events": "error",
         "@angular-eslint/template/eqeqeq": "off",
         "@angular-eslint/template/mouse-events-have-key-events": "error",
         "@angular-eslint/template/no-autofocus": "error",
diff --git a/aio/content/examples/ajs-quick-reference/src/app/app.component.html b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
index 82eaf9339b2..25f5c72ecf2 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/app.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/app.component.html
@@ -51,7 +51,7 @@
 <p></p>
 <div *ngIf="showImage">
   <!-- #docregion src -->
-  <img [src]="movie.imageurl">
+  <img [src]="movie.imageurl" [alt]="movie.title">
   <!-- #enddocregion src -->
 </div>
 
diff --git a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
index e1ee6d62c5a..e7d736eba0c 100644
--- a/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
+++ b/aio/content/examples/ajs-quick-reference/src/app/movie-list.component.html
@@ -61,6 +61,7 @@
                 [style.height.px]="50"
                 [style.margin.px]="2"
                 [src]="movie.imageurl"
+                [alt]="movie.title"
                 [title]="movie.title">
         </td>
         <td>{{movie.title}}</td>
diff --git a/aio/content/examples/animations/src/app/hero-list-auto.component.html b/aio/content/examples/animations/src/app/hero-list-auto.component.html
index bb99794f0c0..72624e54858 100644
--- a/aio/content/examples/animations/src/app/hero-list-auto.component.html
+++ b/aio/content/examples/animations/src/app/hero-list-auto.component.html
@@ -1,9 +1,9 @@
 <ul class="heroes">
   <li *ngFor="let hero of heroes"
-      [@shrinkOut]="'in'" (click)="removeHero(hero.id)">
-      <div class="inner">
+      [@shrinkOut]="'in'">
+      <button class="inner" (click)="removeHero(hero.id)">
         <span class="badge">{{ hero.id }}</span>
-        <span>{{ hero.name }}</span>
-      </div>
+        <span class="name">{{ hero.name }}</span>
+      </button>
   </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
index 769bb6db303..a867c5edb90 100644
--- a/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-enter-leave.component.ts
@@ -19,11 +19,11 @@ import { Hero } from './hero';
   template: `
     <ul class="heroes">
       <li *ngFor="let hero of heroes"
-          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
-          <div class="inner">
+          [@flyInOut]="'in'">
+          <button class="inner" (click)="removeHero(hero.id)">
             <span class="badge">{{ hero.id }}</span>
-            <span>{{ hero.name }}</span>
-          </div>
+            <span class="name">{{ hero.name }}</span>
+          </button>
       </li>
     </ul>
   `,
diff --git a/aio/content/examples/animations/src/app/hero-list-groups.component.ts b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
index a07cd813208..f08e2fa7da5 100644
--- a/aio/content/examples/animations/src/app/hero-list-groups.component.ts
+++ b/aio/content/examples/animations/src/app/hero-list-groups.component.ts
@@ -19,12 +19,11 @@ import { Hero } from './hero';
   selector: 'app-hero-list-groups',
   template: `
     <ul class="heroes">
-      <li *ngFor="let hero of heroes"
-          [@flyInOut]="'in'" (click)="removeHero(hero.id)">
-          <div class="inner">
+      <li *ngFor="let hero of heroes" [@flyInOut]="'in'">
+          <button class="inner" (click)="removeHero(hero.id)">
             <span class="badge">{{ hero.id }}</span>
-            <span>{{ hero.name }}</span>
-          </div>
+            <span class="name">{{ hero.name }}</span>
+          </button>
       </li>
     </ul>
   `,
@@ -33,7 +32,7 @@ import { Hero } from './hero';
   animations: [
     trigger('flyInOut', [
       state('in', style({
-        width: 120,
+        width: '*',
         transform: 'translateX(0)', opacity: 1
       })),
       transition(':enter', [
@@ -41,7 +40,7 @@ import { Hero } from './hero';
         group([
           animate('0.3s 0.1s ease', style({
             transform: 'translateX(0)',
-            width: 120
+            width: '*'
           })),
           animate('0.3s ease', style({
             opacity: 1
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.css b/aio/content/examples/animations/src/app/hero-list-page.component.css
index 3a3e603cbce..d06d58bf148 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.css
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.css
@@ -1,25 +1,56 @@
 .heroes {
+  margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
+  width: 15em;
 }
 
 .heroes li {
-  overflow:hidden;
-  margin: .5em 0;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  overflow: hidden;
 }
 
-.heroes li > .inner {
-  cursor: pointer;
+.heroes .inner {
+  flex: 1;
   background-color: #EEE;
-  padding: .3rem 0;
-  height: 1.6rem;
+  margin: .5em;
+  padding: 0;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
 }
 
-.heroes li:hover > .inner {
-  color: black;
-  background-color: #DDD;
-  transform: translateX(.1em);
+.heroes button.inner {
+  cursor: pointer;
+  font-size: inherit;
+}
+
+.heroes button.inner:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes button.inner:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.inner.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.inner.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.inner.selected:active {
+  background-color: black;
+  color: white;
 }
 
 .heroes .badge {
@@ -27,17 +58,17 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #3d5157;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
-  min-width: 16px;
-  text-align: right;
+  background-color: #405061;
+  line-height: 1em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
+.heroes .name {
+  min-width: max-content;
+  padding: 0.5rem 0;
+}
+
 label {
   display: block;
   padding-bottom: .5rem;
diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.html b/aio/content/examples/animations/src/app/hero-list-page.component.html
index d8b718e597e..b6b2af8e426 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.html
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.html
@@ -11,7 +11,7 @@
   <li *ngFor="let hero of heroes" class="hero">
     <div class="inner">
       <span class="badge">{{ hero.id }}</span>
-      <span>{{ hero.name }}</span>
+      <span class="name">{{ hero.name }}</span>
     </div>
   </li>
 </ul>
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.1.html b/aio/content/examples/architecture/src/app/hero-list.component.1.html
index 9533a287bc7..dd62ae56cdb 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.1.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.1.html
@@ -1,7 +1,8 @@
 <!--#docregion binding  -->
-<li>{{hero.name}}</li>
 <app-hero-detail [hero]="selectedHero"></app-hero-detail>
-<li (click)="selectHero(hero)"></li>
+<button (click)="selectHero(hero)">
+  {{hero.name}}
+</button>
 <!--#enddocregion binding -->
 
 <!--#docregion structural  -->
diff --git a/aio/content/examples/architecture/src/app/hero-list.component.html b/aio/content/examples/architecture/src/app/hero-list.component.html
index a14717ca7f6..e673ba18a8b 100644
--- a/aio/content/examples/architecture/src/app/hero-list.component.html
+++ b/aio/content/examples/architecture/src/app/hero-list.component.html
@@ -3,8 +3,10 @@
 
 <p><em>Select a hero from the list to see details.</em></p>
 <ul>
-  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
-    {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button (click)="selectHero(hero)">
+      {{hero.name}}
+    </button>
   </li>
 </ul>
 
diff --git a/aio/content/examples/architecture/src/assets/architecture.css b/aio/content/examples/architecture/src/assets/architecture.css
index 8fd83cfd935..9e8651ad075 100644
--- a/aio/content/examples/architecture/src/assets/architecture.css
+++ b/aio/content/examples/architecture/src/assets/architecture.css
@@ -4,13 +4,21 @@ ul {
 
 li {
   list-style-type: none;
-  padding: 1rem;
-  background-color: aliceblue;
   border: 1px solid #444;
   margin-bottom: .5rem;
+  display: flex;
 }
 
-li:hover {
+li button {
+  background-color: aliceblue;
+  flex: 1;
+  padding: 1rem;
+  margin: 0;
+  text-align: left;
+  border-radius: 0;
+}
+
+li button:hover, li button:active {
   background-color: #444;
   color: white;
   cursor: pointer;
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.css b/aio/content/examples/docs-style-guide/src/app/app.component.css
index cc999f8458a..64a67e026fa 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.css
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.css
@@ -7,45 +7,68 @@
 }
 /* #enddocregion heroes */
 
+.heroes {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
-  color: white;
-}
-.heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
-.heroes .text {
-  position: relative;
-  top: -3px;
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
 }
+
+.heroes button.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
-.selected {
-  background-color: #CFD8DC !important;
-  color: white;
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/docs-style-guide/src/app/app.component.html b/aio/content/examples/docs-style-guide/src/app/app.component.html
index 9a96640214c..c0ca206e5cd 100644
--- a/aio/content/examples/docs-style-guide/src/app/app.component.html
+++ b/aio/content/examples/docs-style-guide/src/app/app.component.html
@@ -1,17 +1,19 @@
 <h1>{{title}}</h1>
 <h2>My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 <div *ngIf="selectedHero">
   <h2>{{selectedHero.name}} details!</h2>
-  <div><label>id: </label>{{selectedHero.id}}</div>
+  <div>id: {{selectedHero.id}}</div>
   <div>
-    <label>name: </label>
-    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+    <label>
+      name: <input [(ngModel)]="selectedHero.name" placeholder="name"/>
+    </label>
   </div>
 </div>
diff --git a/aio/content/examples/event-binding/src/app/app.component.html b/aio/content/examples/event-binding/src/app/app.component.html
index f5387f6f2ab..c9b4f6a9235 100644
--- a/aio/content/examples/event-binding/src/app/app.component.html
+++ b/aio/content/examples/event-binding/src/app/app.component.html
@@ -34,6 +34,9 @@
 
 
   <h4>Click to see event target class:</h4>
+
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
+
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me (parent)
   <div class="child-div">Click me too! (child) </div>
 </div>
@@ -47,3 +50,5 @@
 <div (click)="onSave()" clickable>
   <button (click)="onSave()">Save with propagation</button>
 </div>
+
+<!-- eslint-enable @angular-eslint/template/click-events-have-key-events -->
diff --git a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
index 0cd2c197207..314d4a902c0 100644
--- a/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
+++ b/aio/content/examples/event-binding/src/app/item-detail/item-detail.component.html
@@ -1,7 +1,7 @@
 <div class="detail">
   <p>This is the ItemDetailComponent</p>
   <!-- #docregion line-through -->
-  <img src="{{itemImageUrl}}" [style.display]="displayNone">
+  <img src="{{itemImageUrl}}" alt="{{item.name}}" [style.display]="displayNone">
   <span [style.text-decoration]="lineThrough">{{ item.name }}
   </span>
   <button (click)="delete()">Delete</button>
diff --git a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
index 438adeb81b7..ccf31b92f7d 100644
--- a/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/e2e/src/app.e2e-spec.ts
@@ -10,7 +10,7 @@ describe('Hierarchical dependency injection', () => {
       income: '',
 
       // queries
-      heroEl: element.all(by.css('app-heroes-list li')).get(0), // first hero
+      heroEl: element.all(by.css('app-heroes-list li button')).get(0), // first hero
       heroCardEl: element(by.css('app-heroes-list app-hero-tax-return')), // first hero tax-return
       taxReturnNameEl: element.all(by.css('app-heroes-list app-hero-tax-return #name')).get(0),
       incomeInputEl: element.all(by.css('app-heroes-list app-hero-tax-return input')).get(0),
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
index ebf2dcbaaa7..50bbff9ab46 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/hero-tax-return.component.html
@@ -2,7 +2,7 @@
   <div class="msg" [class.canceled]="message==='Canceled'">{{message}}</div>
   <fieldset>
     <span  id=name>{{taxReturn.name}}</span>
-    <label id=tid>TID: {{taxReturn.tid}}</label>
+    <span id=tid>TID: {{taxReturn.tid}}</span>
   </fieldset>
   <fieldset>
     <label>
@@ -10,7 +10,7 @@
     </label>
   </fieldset>
   <fieldset>
-    <label>Tax: {{taxReturn.tax}}</label>
+    <span>Tax: {{taxReturn.tax}}</span>
   </fieldset>
   <fieldset>
     <button (click)="onSaved()">Save</button>
diff --git a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
index 093e8a0dac7..1a0f852b9a3 100644
--- a/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
+++ b/aio/content/examples/hierarchical-dependency-injection/src/app/heroes-list.component.ts
@@ -11,8 +11,8 @@ import { HeroesService } from './heroes.service';
     <div>
       <h3>Hero Tax Returns</h3>
       <ul>
-        <li *ngFor="let hero of heroes | async"
-            (click)="showTaxReturn(hero)">{{hero.name}}
+        <li *ngFor="let hero of heroes | async">
+          <button (click)="showTaxReturn(hero)">{{hero.name}}</button>
         </li>
       </ul>
       <app-hero-tax-return
@@ -22,7 +22,13 @@ import { HeroesService } from './heroes.service';
       </app-hero-tax-return>
     </div>
     `,
-  styles: [ 'li {cursor: pointer;}' ]
+  styles: [`
+    li button {
+      font-size: inherit;
+      margin: 0.3rem;
+      padding: 0.5rem;
+    }
+  `]
 })
 export class HeroesListComponent {
   heroes: Observable<Hero[]>;
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.css b/aio/content/examples/http/src/app/heroes/heroes.component.css
index a728e26746f..d5a402a0397 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.css
@@ -9,21 +9,20 @@
 }
 
 .heroes li {
-  position: relative;
+  display: flex;
+  width: 100%;
 }
 
 .heroes li:hover {
   left: .1em;
 }
 
-.heroes a {
+.heroes button.delete {
   color: black;
   display: block;
   font-size: 1.2rem;
   background-color: #eee;
-  margin: .5em 0;
-  padding: .5em 0;
-  border-radius: 4px;
+  border-radius: 0 4px 4px 0;
 }
 
 .heroes a:hover {
@@ -40,8 +39,18 @@
   border-radius: 4px 0 0 4px;
 }
 
+.heroes button.edit {
+  flex: 1;
+  text-align: left;
+  padding: 0;
+  margin-right: 0;
+  display: flex;
+  align-items: center;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
 button.delete {
-  position: absolute;
   right: -8px;
   top: 5px;
   background-color: gray;
@@ -53,6 +62,4 @@ button.delete {
 .heroes input {
   max-width: 12rem;
   padding: .25rem;
-  position: absolute;
-  top: 8px;
 }
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.html b/aio/content/examples/http/src/app/heroes/heroes.component.html
index bc470badae7..4d7d602e032 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.html
@@ -14,7 +14,7 @@
 
 <ul class="heroes">
   <li *ngFor="let hero of heroes">
-    <a (click)="edit(hero)">
+    <button class="edit" (click)="edit(hero)">
       <span class="badge">{{ hero.id || -1 }}</span>
       <span *ngIf="hero!==editHero">{{hero.name}}</span>
       <input type="text"
@@ -22,7 +22,7 @@
              [(ngModel)]="hero.name"
              (blur)="update()"
              (keyup.enter)="update()">
-    </a>
+    </button>
     <button class="delete" title="delete hero"
     (click)="delete(hero)">x</button>
   </li>
diff --git a/aio/content/examples/i18n/doc-files/app.component.html b/aio/content/examples/i18n/doc-files/app.component.html
index 5e7db6b4b26..1e5da1744cc 100644
--- a/aio/content/examples/i18n/doc-files/app.component.html
+++ b/aio/content/examples/i18n/doc-files/app.component.html
@@ -27,11 +27,11 @@
 <!--#enddocregion i18n-attribute-solo-id-->
 
 <!--#docregion i18n-title-->
-<img [src]="logo" title="Angular logo">
+<img [src]="logo" title="Angular logo" alt="Angular logo">
 <!--#enddocregion i18n-title-->
 
 <!--#docregion i18n-duplicate-custom-id-->
 <h3 i18n="@@myId">Hello</h3>
 <!-- ... -->
 <p i18n="@@myId">Good bye</p>
-<!--#enddocregion i18n-duplicate-custom-id-->
\ No newline at end of file
+<!--#enddocregion i18n-duplicate-custom-id-->
diff --git a/aio/content/examples/i18n/src/app/app.component.html b/aio/content/examples/i18n/src/app/app.component.html
index f7b68a9f761..4ccad73250f 100644
--- a/aio/content/examples/i18n/src/app/app.component.html
+++ b/aio/content/examples/i18n/src/app/app.component.html
@@ -10,7 +10,7 @@
 <br />
 
 <!--#docregion i18n-title-translate-->
-<img [src]="logo" i18n-title title="Angular logo" />
+<img [src]="logo" i18n-title title="Angular logo" alt="Angular logo"/>
 <!--#enddocregion i18n-title-translate-->
 <br>
 <button (click)="inc(1)">+</button> <button (click)="inc(-1)">-</button>
diff --git a/aio/content/examples/interpolation/src/app/app.component.html b/aio/content/examples/interpolation/src/app/app.component.html
index 4a0ed186f28..f9540c31d2a 100644
--- a/aio/content/examples/interpolation/src/app/app.component.html
+++ b/aio/content/examples/interpolation/src/app/app.component.html
@@ -11,7 +11,7 @@
 
     <!-- #docregion component-property -->
     <p>{{title}}</p>
-    <div><img src="{{itemImageUrl}}"></div>
+    <div><img alt="item" src="{{itemImageUrl}}"></div>
     <!-- #enddocregion component-property -->
 
     <h3>Evaluating template expressions </h3>
@@ -35,7 +35,7 @@
   <h3>Component context, properties of app.component.ts:</h3>
   <!-- #docregion component-context -->
   <h4>{{recommended}}</h4>
-  <img [src]="itemImageUrl2">
+  <img alt="item 2" [src]="itemImageUrl2">
   <!-- #enddocregion component-context -->
 </div>
 
diff --git a/aio/content/examples/lifecycle-hooks/src/app/app.component.html b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
index 93309da4fd9..c0fb2da8ffc 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/app.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/app.component.html
@@ -1,5 +1,4 @@
-<a id="top"></a>
-<h1>Lifecycle Hooks</h1>
+<h1 id="top">Lifecycle Hooks</h1>
 <a href="#hooks">Peek-a-boo: (most) lifecycle hooks</a>
 <a href="#spy">Spy: directive with OnInit & OnDestroy</a>
 <a href="#onchanges">OnChanges</a>
@@ -8,36 +7,29 @@
 <a href="#after-content">AfterContentInit & AfterContentChecked</a>
 <a href="#counter">Counter: OnChanges + Spy directive</a>
 
-<a id="hooks"></a>
-<peek-a-boo-parent></peek-a-boo-parent>
+<peek-a-boo-parent id="hooks"></peek-a-boo-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="spy"></a>
-<spy-parent></spy-parent>
+<spy-parent id="spy"></spy-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="onchanges"></a>
-<on-changes-parent></on-changes-parent>
+<on-changes-parent id="onchanges"></on-changes-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="docheck"></a>
-<do-check-parent></do-check-parent>
+<do-check-parent id="docheck"></do-check-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="after-view"></a>
-<after-view-parent></after-view-parent>
+<after-view-parent id="after-view"></after-view-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="after-content"></a>
-<after-content-parent></after-content-parent>
+<after-content-parent id="after-content"></after-content-parent>
 <a href="#top">back to top</a>
 <hr />
 
-<a id="counter"></a>
-<counter-parent></counter-parent>
+<counter-parent id="counter"></counter-parent>
 <a href="#top">back to top</a>
diff --git a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
index c29c6fb7a79..334c1f83dd8 100644
--- a/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
+++ b/aio/content/examples/lifecycle-hooks/src/app/do-check-parent.component.html
@@ -1,5 +1,5 @@
 <h2>{{title}}</h2>
-<label for="power-input"><label>Power: </label>
+<label for="power-input">Power: </label>
 <input type="text" id="power-input" [(ngModel)]="power">
 <label for="hero-name">Hero.name: </label>
 <input type="text" id="hero-name" [(ngModel)]="hero.name">
diff --git a/aio/content/examples/observables-in-angular/src/main.ts b/aio/content/examples/observables-in-angular/src/main.ts
index fecd968f17f..97f8a8ecfcf 100644
--- a/aio/content/examples/observables-in-angular/src/main.ts
+++ b/aio/content/examples/observables-in-angular/src/main.ts
@@ -11,7 +11,7 @@ import { Observable } from 'rxjs';
   selector: 'app-zippy',
   template: `
     <div class="zippy">
-      <div (click)="toggle()">Toggle</div>
+      <button (click)="toggle()">Toggle</button>
       <div [hidden]="!visible">
         <ng-content></ng-content>
       </div>
diff --git a/aio/content/examples/pipes/src/app/app.component.html b/aio/content/examples/pipes/src/app/app.component.html
index 09212360761..fd88f9232b5 100644
--- a/aio/content/examples/pipes/src/app/app.component.html
+++ b/aio/content/examples/pipes/src/app/app.component.html
@@ -1,5 +1,4 @@
-<a id="toc"></a>
-<h1>Pipes</h1>
+<h1 id="toc">Pipes</h1>
 <a href="#happy-birthday1">Happy Birthday v1</a>
 <a href="#birthday-date-pipe">Birthday DatePipe</a>
 <a href="#happy-birthday2">Happy Birthday v2</a>
@@ -14,13 +13,11 @@
 
 
 <hr>
-<a id="happy-birthday1"></a>
-<h2>Hero Birthday v1</h2>
+<h2 id="happy-birthday1">Hero Birthday v1</h2>
 <app-hero-birthday></app-hero-birthday>
 
 <hr>
-<a id="birthday-date-pipe"></a>
-<h2>Birthday DatePipe</h2>
+<h2 id="birthday-date-pipe">Birthday DatePipe</h2>
 <!-- #docregion hero-birthday-template -->
 <p>The hero's birthday is {{ birthday | date }}</p>
 <!-- #enddocregion hero-birthday-template-->
@@ -30,13 +27,11 @@
 <!-- #enddocregion format-birthday-->
 
 <hr>
-<a id="happy-birthday2"></a>
-<h2>Hero Birthday v2</h2>
+<h2 id="happy-birthday2">Hero Birthday v2</h2>
 <app-hero-birthday2></app-hero-birthday2>
 
 <hr>
-<a id="birthday-pipe-chaining"></a>
-<h2>Birthday Pipe Chaining</h2>
+<h2 id="birthday-pipe-chaining">Birthday Pipe Chaining</h2>
 <p>
 <!-- #docregion chained-birthday -->
   The chained hero's birthday is
@@ -55,31 +50,24 @@
   {{ ( birthday | date:'fullDate' ) | uppercase}}
 </p>
 <hr>
-<a id="power-booster"></a>
-<app-power-booster></app-power-booster>
+<app-power-booster id="power-booster"></app-power-booster>
 
 <hr>
-<a id="power-boost-calc"></a>
-<app-power-boost-calculator>loading</app-power-boost-calculator>
+<app-power-boost-calculator id="power-boost-calc">loading</app-power-boost-calculator>
 
 <hr>
-<a id="flying-heroes"></a>
-<app-flying-heroes></app-flying-heroes>
+<app-flying-heroes id="flying-heroes"></app-flying-heroes>
 
 <hr>
-<a id="flying-heroes-impure"></a>
-<app-flying-heroes-impure></app-flying-heroes-impure>
+<app-flying-heroes-impure id="flying-heroes-impure"></app-flying-heroes-impure>
 
 <hr>
-<a id="hero-message"></a>
 <!-- async examples at the top so can see them in action -->
-<app-hero-async-message></app-hero-async-message>
+<app-hero-async-message id="hero-message"></app-hero-async-message>
 
 <hr>
-<a id="hero-list"></a>
-<app-hero-list></app-hero-list>
+<app-hero-list id="hero-list"></app-hero-list>
 
 <hr>
-<a id="pipe-precedence"></a>
-<app-precedence></app-precedence>
+<app-precedence id="pipe-precedence"></app-precedence>
 <hr>
diff --git a/aio/content/examples/property-binding/src/app/app.component.html b/aio/content/examples/property-binding/src/app/app.component.html
index e91b4ee6ee5..8b48e942e12 100644
--- a/aio/content/examples/property-binding/src/app/app.component.html
+++ b/aio/content/examples/property-binding/src/app/app.component.html
@@ -4,7 +4,7 @@
   <h1>Property Binding with Angular</h1>
   <h2>Binding the src property of an image:</h2>
   <!-- #docregion property-binding -->
-  <img [src]="itemImageUrl">
+  <img alt="item" [src]="itemImageUrl">
   <!-- #enddocregion property-binding -->
   <hr />
 
@@ -47,8 +47,8 @@
 
   <h2>Property binding and interpolation</h2>
   <!-- #docregion property-binding-interpolation -->
-  <p><img src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
-  <p><img [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
+  <p><img alt="Interpolated item" src="{{itemImageUrl}}"> is the <i>interpolated</i> image.</p>
+  <p><img alt="Property Bound item" [src]="itemImageUrl"> is the <i>property bound</i> image.</p>
 
   <p><span>"{{interpolationTitle}}" is the <i>interpolated</i> title.</span></p>
   <p>"<span [innerHTML]="propertyTitle"></span>" is the <i>property bound</i> title.</p>
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 cc0f4cfd0df..f4944a7115a 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
@@ -3,8 +3,8 @@ import { browser, element, by } from 'protractor';
 describe('Reactive forms', () => {
   const nameEditor = element(by.css('app-name-editor'));
   const profileEditor = element(by.css('app-profile-editor'));
-  const nameEditorLink = element(by.cssContainingText('app-root > nav > a', 'Name Editor'));
-  const profileEditorLink = element(by.cssContainingText('app-root > nav > a', 'Profile Editor'));
+  const nameEditorButton = element(by.cssContainingText('app-root > nav > button', 'Name Editor'));
+  const profileEditorButton = element(by.cssContainingText('app-root > nav > button', 'Profile Editor'));
 
   beforeAll(() => browser.get(''));
 
@@ -14,7 +14,7 @@ describe('Reactive forms', () => {
     const nameText = 'John Smith';
 
     beforeAll(async () => {
-      await nameEditorLink.click();
+      await nameEditorButton.click();
     });
 
     beforeEach(async () => {
@@ -66,12 +66,12 @@ describe('Reactive forms', () => {
     };
 
     beforeAll(async () => {
-      await profileEditorLink.click();
+      await profileEditorButton.click();
     });
 
     beforeEach(async () => {
       await browser.get('');
-      await profileEditorLink.click();
+      await profileEditorButton.click();
     });
 
     it('should be invalid by default', async () => {
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 0befc361b91..9336f8f4200 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.css
+++ b/aio/content/examples/reactive-forms/src/app/app.component.css
@@ -1,3 +1,4 @@
-nav a {
+nav button {
   padding: 1rem;
+  font-size: inherit;
 }
diff --git a/aio/content/examples/reactive-forms/src/app/app.component.html b/aio/content/examples/reactive-forms/src/app/app.component.html
index d3d69112bca..bc1d2fd7b14 100644
--- a/aio/content/examples/reactive-forms/src/app/app.component.html
+++ b/aio/content/examples/reactive-forms/src/app/app.component.html
@@ -1,8 +1,8 @@
 <h1>Reactive Forms</h1>
 
 <nav>
-  <a (click)="toggleEditor('name')">Name Editor</a>
-  <a (click)="toggleEditor('profile')">Profile Editor</a>
+  <button (click)="toggleEditor('name')">Name Editor</button>
+  <button (click)="toggleEditor('profile')">Profile Editor</button>
 </nav>
 
 <app-name-editor *ngIf="showNameEditor"></app-name-editor>
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html
deleted file mode 100644
index 70bcaeb1d30..00000000000
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.2.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<h3>Dashboard</h3>
-
-<p>Session ID: {{ sessionId | async }}</p>
-<a id="anchor"></a>
-<p>Token: {{ token | async }}</p>
diff --git a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
index 4ba685bc14c..04ff184a5f4 100644
--- a/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
+++ b/aio/content/examples/router/src/app/admin/admin-dashboard/admin-dashboard.component.html
@@ -1,7 +1,7 @@
 <h3>Dashboard</h3>
 
 <p>Session ID: {{ sessionId | async }}</p>
-<a id="anchor"></a>
+<div id="anchor"></div>
 <p>Token: {{ token | async }}</p>
 
 Preloaded Modules
diff --git a/aio/content/examples/set-document-title/src/app/app.component.ts b/aio/content/examples/set-document-title/src/app/app.component.ts
index e4d6671a477..e6e8e2fbc11 100644
--- a/aio/content/examples/set-document-title/src/app/app.component.ts
+++ b/aio/content/examples/set-document-title/src/app/app.component.ts
@@ -12,9 +12,9 @@ import { Title } from '@angular/platform-browser';
     </p>
 
     <ul>
-      <li><a (click)="setTitle('Good morning!')">Good morning</a>.</li>
-      <li><a (click)="setTitle('Good afternoon!')">Good afternoon</a>.</li>
-      <li><a (click)="setTitle('Good evening!')">Good evening</a>.</li>
+      <li><button (click)="setTitle('Good morning!')">Good morning</button></li>
+      <li><button (click)="setTitle('Good afternoon!')">Good afternoon</button></li>
+      <li><button (click)="setTitle('Good evening!')">Good evening</button></li>
     </ul>
   `,
 })
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
index f042cd85f73..6a85fc8cb2c 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.css
@@ -5,27 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
+  background-color: black;
+  color: white;
+}
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
index bab05ceb2b2..090451c6168 100644
--- a/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
+++ b/aio/content/examples/styleguide/src/05-04/app/heroes/heroes.component.html
@@ -2,8 +2,11 @@
 <div>
   <h2>My Heroes</h2>
   <ul class="heroes">
-    <li *ngFor="let hero of heroes | async" (click)="selectedHero=hero">
-      <span class="badge">{{hero.id}}</span> {{hero.name}}
+    <li *ngFor="let hero of heroes | async">
+      <button (click)="selectedHero=hero">
+        <span class="badge">{{hero.id}}</span>
+        <span class="name">{{hero.name}}</span>
+      </button>
     </li>
   </ul>
   <div *ngIf="selectedHero">
diff --git a/aio/content/examples/template-syntax/src/app/app.component.html b/aio/content/examples/template-syntax/src/app/app.component.html
index 5eb77f58836..0e8519ed1ea 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.html
+++ b/aio/content/examples/template-syntax/src/app/app.component.html
@@ -1,6 +1,5 @@
 <!-- #docplaster -->
-<a id="toc"></a>
-<h1>Template Syntax</h1>
+<h1 id="toc">Template Syntax</h1>
 <a href="#interpolation">Interpolation</a><br>
 <a href="#expression-context">Expression context</a><br>
 <a href="#statement-context">Statement context</a><br>
@@ -47,7 +46,7 @@
 
 <h3>
   {{title}}
-  <img src="{{heroImageUrl}}" style="height:30px">
+  <img alt="{{hero.name}}" src="{{heroImageUrl}}" style="height:30px">
 </h3>
 
 <!-- "The sum of 1 + 1 is 2" -->
@@ -120,7 +119,7 @@
 <!--<img src="https://wpclipart.com/cartoon/people/hero/hero_silhoutte_T.png">-->
 <!-- Public Domain terms of use: https://wpclipart.com/terms.html -->
 <div class="special">Mental Model</div>
-<img src="assets/images/hero.png">
+<img [alt]="hero.name" src="assets/images/hero.png">
 <button disabled>Save</button>
 <br><br>
 
@@ -140,7 +139,7 @@
 
 <div>
   <!-- #docregion property-binding-syntax-1 -->
-  <img [src]="heroImageUrl">
+  <img [alt]="hero.name" [src]="heroImageUrl">
   <app-hero-detail [hero]="currentHero"></app-hero-detail>
   <div [ngClass]="{'special': isSpecial}"></div>
   <!-- #enddocregion property-binding-syntax-1 -->
@@ -181,6 +180,7 @@ button</button>
 
 <a class="to-toc" href="#toc">top</a>
 
+<!-- eslint-disable @angular-eslint/template/accessibility-alt-text -->
 <!-- property vs. attribute -->
 <hr><h2 id="prop-vs-attrib">Property vs. Attribute (img examples)</h2>
 <!-- examine the following <img> tag in the browser tools -->
@@ -191,7 +191,7 @@ button</button>
 
 <img [src]="iconUrl"/>
 <img [attr.src]="villainImageUrl"/>
-
+<!-- eslint-enable @angular-eslint/template/accessibility-alt-text -->
 <a class="to-toc" href="#toc">top</a>
 
 <!-- buttons -->
@@ -211,7 +211,7 @@ button</button>
 <!-- property binding -->
 <hr><h2 id="property-binding">Property Binding</h2>
 
-<img [src]="heroImageUrl">
+<img [alt]="hero.name" [src]="heroImageUrl">
 <button [disabled]="isUnchanged">Cancel is disabled</button>
 <div [ngClass]="classes">[ngClass] binding to the classes property</div>
 <app-hero-detail [hero]="currentHero"></app-hero-detail>
@@ -221,8 +221,14 @@ button</button>
 
 <app-hero-detail prefix="You are my" [hero]="currentHero"></app-hero-detail>
 
-<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
-<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+<p>
+  <img src="{{heroImageUrl}}" alt="interpolated image of {{currentHero.name}}">
+  is the <i>interpolated</i> image.
+</p>
+<p>
+  <img [src]="heroImageUrl" [alt]="'property bounded image of ' + currentHero.name">
+  is the <i>property bound</i> image.
+</p>
 
 <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
 <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
@@ -320,6 +326,8 @@ button</button>
     [hero]="currentHero">
 </app-big-hero-detail>
 
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
+
 <div class="parent-div" (click)="onClickMe($event)" clickable>Click me
   <div class="child-div">Click me too!</div>
 </div>
@@ -334,6 +342,8 @@ button</button>
   <button (click)="onSave()">Save w/ propagation</button>
 </div>
 
+<!-- eslint-enable @angular-eslint/template/click-events-have-key-events -->
+
 <a class="to-toc" href="#toc">top</a>
 
 <hr><h2 id="two-way">Two-way Binding</h2>
@@ -577,7 +587,7 @@ without NgModel
 <!-- inputs and output -->
 <hr><h2 id="inputs-and-outputs">Inputs and Outputs</h2>
 
-<img [src]="iconUrl"/>
+<img alt="icon" [src]="iconUrl"/>
 <button (click)="onSave()">Save</button>
 
 <app-hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)">
@@ -608,7 +618,7 @@ without NgModel
 
 <div>
   <!-- pipe price to USD and display the $ symbol -->
-  <label>Price: </label>{{product.price | currency:'USD':'symbol'}}
+  <span>Price: </span>{{product.price | currency:'USD':'symbol'}}
 </div>
 
 <a class="to-toc" href="#toc">top</a>
diff --git a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
index f3c7139acd5..df6b936cb77 100644
--- a/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
+++ b/aio/content/examples/template-syntax/src/app/hero-detail.component.ts
@@ -10,7 +10,7 @@ import { Hero } from './hero';
   styles: ['button {margin-left: 8px} div {margin: 8px 0} img {height:24px}'],
   template: `
   <div>
-    <img src="{{heroImageUrl}}">
+    <img src="{{heroImageUrl}}" alt="{{hero.name}}">
     <span [style.text-decoration]="lineThrough">
       {{prefix}} {{hero.name}}
     </span>
@@ -38,7 +38,7 @@ export class HeroDetailComponent {
   selector: 'app-big-hero-detail',
   template: `
   <div class="detail">
-    <img src="{{heroImageUrl}}">
+    <img src="{{heroImageUrl}}" alt="{{hero.name}}">
     <div><b>{{hero.name}}</b></div>
     <div>Name: {{hero.name}}</div>
     <div>Emotion: {{hero.emotion}}</div>
diff --git a/aio/content/examples/template-syntax/src/app/sizer.component.ts b/aio/content/examples/template-syntax/src/app/sizer.component.ts
index c4443ede515..942ce094206 100644
--- a/aio/content/examples/template-syntax/src/app/sizer.component.ts
+++ b/aio/content/examples/template-syntax/src/app/sizer.component.ts
@@ -7,7 +7,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   <div>
     <button (click)="dec()" title="smaller">-</button>
     <button (click)="inc()" title="bigger">+</button>
-    <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+    <span [style.font-size.px]="size">FontSize: {{size}}px</span>
   </div>`
 })
 export class SizerComponent {
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
index eb54d181d82..d4046cd988e 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.css
@@ -4,6 +4,7 @@
 	text-align: center;
 	color: #eee;
 	max-height: 120px;
+	width: 100%;
 	min-width: 120px;
 	background-color: #607D8B;
 	border-radius: 2px;
diff --git a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
index 8c55735555c..faf9f17acb7 100644
--- a/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
+++ b/aio/content/examples/testing/src/app/dashboard/dashboard-hero.component.ts
@@ -7,9 +7,9 @@ import { Hero } from '../model/hero';
 @Component({
   selector: 'dashboard-hero',
   template: `
-    <div (click)="click()" class="hero">
+    <button (click)="click()" class="hero">
       {{hero.name | uppercase}}
-    </div>
+    </button>
   `,
   styleUrls: [ './dashboard-hero.component.css' ]
 })
diff --git a/aio/content/examples/testing/src/app/demo/demo.ts b/aio/content/examples/testing/src/app/demo/demo.ts
index 5e375e8e1b5..57107bc8caf 100644
--- a/aio/content/examples/testing/src/app/demo/demo.ts
+++ b/aio/content/examples/testing/src/app/demo/demo.ts
@@ -184,7 +184,7 @@ export class ParentComponent { }
 
 @Component({
   selector: 'io-comp',
-  template: '<div class="hero" (click)="click()">Original {{hero.name}}</div>'
+  template: '<button class="hero" (click)="click()">Original {{hero.name}}</button>'
 })
 export class IoComponent {
   @Input() hero!: Hero;
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.html b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
index 7e86a668f6a..aaa8eaae2ae 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.html
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.html
@@ -2,7 +2,7 @@
 <div *ngIf="hero">
   <h2><span>{{hero.name | titlecase}}</span> Details</h2>
   <div>
-    <label>id: </label>{{hero.id}}</div>
+    <span>id: </span>{{hero.id}}</div>
   <div>
     <label for="name">name: </label>
     <input id="name" [(ngModel)]="hero.name" placeholder="name" />
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index bb24cf0cd6f..ffd66ab8d6f 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -2,57 +2,70 @@
   background-color: #CFD8DC !important;
   color: white;
 }
+
 .heroes {
   margin: 0 0 2em 0;
   list-style-type: none;
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
-  color: #607D8B;
-  background-color: #DDD;
+
+.heroes button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected:hover {
-  background-color: #BBD8DC !important;
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
+  background-color: black;
   color: white;
 }
-.heroes .text {
-  position: relative;
-  top: -3px;
+
+.heroes button.selected:hover {
+  background-color: #505050;
+  color: white;
 }
+
+.heroes button.selected:active {
+  background-color: black;
+  color: white;
+}
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color: #607D8B;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
-button {
-  font-family: Arial, sans-serif;
-  background-color: #eee;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-button:hover {
-  background-color: #cfd8dc;
+
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.html b/aio/content/examples/testing/src/app/hero/hero-list.component.html
index cd37301fd6b..dda92c3609f 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.html
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.html
@@ -1,8 +1,9 @@
 <h2 highlight="gold">My Heroes</h2>
 <ul class="heroes">
-  <li *ngFor="let hero of heroes | async "
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes | async ">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
index 23d88cd9a79..38048773b55 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.spec.ts
@@ -56,11 +56,11 @@ describe('HeroListComponent', () => {
 
   it('should select hero on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
-       const li = page.heroRows[1];
+       const btn = page.heroRows[1].querySelector('button');
 
        // In older browsers, such as IE, you might need a CustomEvent instead. See
        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
-       li.dispatchEvent(new Event('click'));
+       btn!.dispatchEvent(new Event('click'));
        tick();
        // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService
        expect(comp.selectedHero).toEqual(expectedHero);
@@ -68,11 +68,11 @@ describe('HeroListComponent', () => {
 
   it('should navigate to selected hero detail on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
-       const li = page.heroRows[1];
+       const btn = page.heroRows[1].querySelector('button');
 
        // In older browsers, such as IE, you might need a CustomEvent instead. See
        // https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
-       li.dispatchEvent(new Event('click'));
+       btn!.dispatchEvent(new Event('click'));
        tick();
 
        // should have navigated
diff --git a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
index 9a25932f367..48571bd8af5 100644
--- a/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt2/e2e/src/app.e2e-spec.ts
@@ -66,7 +66,7 @@ function initialPageTests() {
 
 function selectHeroTests() {
   it(`selects ${targetHero.name} from hero list`, async () => {
-    const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    const hero = element(by.cssContainingText('button span.badge', targetHero.id.toString()));
     await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -101,7 +101,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString((await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -122,8 +122,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
index fe140484f54..3b77cd1689c 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.1.html
@@ -12,7 +12,8 @@
 <!-- #enddocregion li -->
 
 <!-- #docregion selectedHero-click -->
-<li *ngFor="let hero of heroes" (click)="onSelect(hero)">
+<li *ngFor="let hero of heroes">
+  <button (click)="onSelect(hero)">
 <!-- #enddocregion selectedHero-click -->
 
 <!-- #docregion class-selected -->
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
index 7a6a8dfd03f..8535c72e244 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.css
@@ -5,48 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected {
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
-input {
-  padding: .5rem;
+.heroes .name {
+  align-self: center;
 }
diff --git a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
index 4a00357290b..a87fcfc39bb 100644
--- a/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt2/src/app/heroes/heroes.component.html
@@ -2,10 +2,11 @@
 <h2>My Heroes</h2>
 <ul class="heroes">
   <!-- #docregion li -->
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
   <!-- #enddocregion li -->
 </ul>
@@ -15,7 +16,7 @@
 
   <!-- #docregion selectedHero-details -->
   <h2>{{selectedHero.name | uppercase}} Details</h2>
-  <div><span>id: </span>{{selectedHero.id}}</div>
+  <div>id: {{selectedHero.id}}</div>
   <div>
     <label for="hero-name">Hero name: </label>
     <input id="hero-name" [(ngModel)]="selectedHero.name" placeholder="name">
diff --git a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
index bcc7dee50d5..6a797b59674 100644
--- a/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt3/e2e/src/app.e2e-spec.ts
@@ -66,7 +66,7 @@ function initialPageTests() {
 
 function selectHeroTests() {
   it(`selects ${targetHero.name} from hero list`, async () => {
-    const hero = element(by.cssContainingText('li span.badge', targetHero.id.toString()));
+    const hero = element(by.cssContainingText('li button', targetHero.id.toString() + targetHero.name.toString()));
     await hero.click();
     // Nothing specific to expect other than lack of exceptions.
   });
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -101,7 +101,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString(await (await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -122,8 +122,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
index 9ace14f8261..34b52b089ee 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.css
@@ -6,43 +6,61 @@
   width: 15em;
 }
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li.selected {
+
+.heroes button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
+
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
index 2a78dbaa336..83207f7bea9 100644
--- a/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt3/src/app/heroes/heroes.component.html
@@ -1,10 +1,11 @@
 <h2>My Heroes</h2>
 
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 
diff --git a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
index eba88f27002..8c87c0d0e56 100644
--- a/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt4/e2e/src/app.e2e-spec.ts
@@ -74,7 +74,7 @@ function selectHeroTests() {
   it(`has selected ${targetHero.name}`, async () => {
     const page = getPageElts();
     const expectedText = `${targetHero.id} ${targetHero.name}`;
-    expect(await page.selected.getText()).toBe(expectedText);
+    expect((await page.selected.getText()).replace('\n', ' ')).toBe(expectedText);
   });
 
   it('shows selected hero details', async () => {
@@ -106,7 +106,7 @@ function updateHeroTests() {
 
   it(`shows updated hero name in list`, async () => {
     const page = getPageElts();
-    const hero = Hero.fromString(await page.selected.getText());
+    const hero = Hero.fromString((await page.selected.getText()).replace('\n', ' '));
     const newName = targetHero.name + nameSuffix;
     expect(hero.id).toEqual(targetHero.id);
     expect(hero.name).toEqual(newName);
@@ -127,8 +127,8 @@ async function expectHeading(hLevel: number, expectedText: string): Promise<void
 
 function getPageElts() {
   return {
-    heroes: element.all(by.css('app-root li')),
-    selected: element(by.css('app-root li.selected')),
+    heroes: element.all(by.css('app-root li button')),
+    selected: element(by.css('app-root li button.selected')),
     heroDetail: element(by.css('app-root > div, app-root > app-heroes > app-hero-detail > div'))
   };
 }
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
index 94f075e7eab..8535c72e244 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.css
@@ -5,49 +5,63 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
+  display: flex;
+}
+
+.heroes button {
+  flex: 1;
   cursor: pointer;
   position: relative;
   left: 0;
   background-color: #EEE;
   margin: .5em;
-  padding: .3em 0;
+  padding: 0;
   height: 1.6em;
   border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
 }
-.heroes li:hover {
+
+.heroes button:hover {
   color: #2c3a41;
   background-color: #e6e6e6;
   left: .1em;
 }
-.heroes li:active {
+
+.heroes button:active {
   background-color: #525252;
   color: #fafafa;
 }
-.heroes li.selected {
+
+.heroes button.selected {
   background-color: black;
   color: white;
 }
-.heroes li.selected:hover {
+
+.heroes button.selected:hover {
   background-color: #505050;
   color: white;
 }
-.heroes li.selected:active {
+
+.heroes button.selected:active {
   background-color: black;
   color: white;
 }
+
 .heroes .badge {
   display: inline-block;
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
-  position: relative;
-  left: -1px;
-  top: -4px;
-  height: 1.8em;
   margin-right: .8em;
   border-radius: 4px 0 0 4px;
 }
 
+.heroes .name {
+  align-self: center;
+}
diff --git a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
index a4676a9f2a1..70b8970eb0b 100644
--- a/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
+++ b/aio/content/examples/toh-pt4/src/app/heroes/heroes.component.html
@@ -1,10 +1,11 @@
 <h2>My Heroes</h2>
 <!-- #docregion list -->
 <ul class="heroes">
-  <li *ngFor="let hero of heroes"
-    [class.selected]="hero === selectedHero"
-    (click)="onSelect(hero)">
-    <span class="badge">{{hero.id}}</span> {{hero.name}}
+  <li *ngFor="let hero of heroes">
+    <button (click)="onSelect(hero)" [class.selected]="hero === selectedHero">
+      <span class="badge">{{hero.id}}</span>
+      <span class="name">{{hero.name}}</span>
+    </button>
   </li>
 </ul>
 <!-- #enddocregion list -->
diff --git a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
index d54f7a290c6..6dbba03504b 100644
--- a/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt5/src/app/heroes/heroes.component.css
@@ -41,7 +41,7 @@
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 62760d9fd1c..8dfcefb76ef 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -50,7 +50,7 @@ input {
   font-size: small;
   color: white;
   padding: 0.8em 0.7em 0 0.7em;
-  background-color:#405061;
+  background-color: #405061;
   line-height: 1em;
   position: relative;
   left: -1px;
@@ -80,6 +80,7 @@ button.delete {
   background-color: white;
   color:  #525252;
   font-size: 1.1rem;
+  margin: 0;
   padding: 1px 10px 3px 10px;
 }
 
diff --git a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
index c0a29c9b6a6..d24588b6416 100644
--- a/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/two-way-binding/e2e/src/app.e2e-spec.ts
@@ -20,17 +20,17 @@ describe('Two-way binding e2e tests', () => {
     expect(await plus2Button.getText()).toBe('+');
   });
 
-  it('should change font size labels', async () => {
+  it('should change font size texts', async () => {
     await minusButton.click();
-    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('span')).get(0).getText()).toEqual('FontSize: 15px');
     expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('15');
 
     await plusButton.click();
-    expect(await element.all(by.css('label')).get(0).getText()).toEqual('FontSize: 16px');
+    expect(await element.all(by.css('span')).get(0).getText()).toEqual('FontSize: 16px');
     expect(await element.all(by.css('input')).get(0).getAttribute('value')).toEqual('16');
 
     await minus2Button.click();
-    expect(await element.all(by.css('label')).get(2).getText()).toEqual('FontSize: 15px');
+    expect(await element.all(by.css('span')).get(1).getText()).toEqual('FontSize: 15px');
   });
 
   it('should display De-sugared two-way binding', async () => {
diff --git a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
index c635935aa03..c8fbcb78808 100644
--- a/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
+++ b/aio/content/examples/two-way-binding/src/app/sizer/sizer.component.html
@@ -1,5 +1,5 @@
 <div>
   <button (click)="dec()" title="smaller">-</button>
   <button (click)="inc()" title="bigger">+</button>
-  <label [style.font-size.px]="size">FontSize: {{size}}px</label>
+  <span [style.font-size.px]="size">FontSize: {{size}}px</span>
 </div>
diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
index d8c0a226e5c..e92d1ba637a 100644
--- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
@@ -176,8 +176,9 @@ describe('Universal', () => {
         expect(await button.getCssValue('padding')).toBe('5px 10px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
         // Styles defined in heroes.component.css
-        expect(await button.getCssValue('left')).toBe('194px');
-        expect(await button.getCssValue('top')).toBe('-32px');
+        expect(await button.getCssValue('right')).toBe('0px');
+        expect(await button.getCssValue('top')).toBe('0px');
+        expect(await button.getCssValue('bottom')).toBe('0px');
       }
 
       const addButton = element(by.buttonText('add'));
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.css b/aio/content/examples/universal/src/app/heroes/heroes.component.css
index a081f6ce78c..ccb1e57e352 100644
--- a/aio/content/examples/universal/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.css
@@ -5,6 +5,7 @@
   padding: 0;
   width: 15em;
 }
+
 .heroes li {
   position: relative;
   cursor: pointer;
@@ -64,10 +65,12 @@ button:hover {
 }
 
 button.delete {
-  position: relative;
-  left: 194px;
-  top: -32px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
   background-color: gray !important;
   color: white;
+  margin: 0;
 }
 
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
index f3fe755f312..a1e8b76392f 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-io/hero-detail.component.ts
@@ -6,7 +6,7 @@ import { Hero } from '../hero';
   selector: 'hero-detail',
   template: `
     <h2>{{hero.name}} details!</h2>
-    <div><label>id: </label>{{hero.id}}</div>
+    <div>id: {{hero.id}}</div>
     <button (click)="onDelete()">Delete</button>
   `
 })
diff --git a/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
index df4a705f37c..fae7b9d5dac 100644
--- a/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
+++ b/aio/content/examples/upgrade-module/src/app/downgrade-static/hero-detail.component.ts
@@ -5,7 +5,7 @@ import { Component } from '@angular/core';
   selector: 'hero-detail',
   template: `
     <h2>Windstorm details!</h2>
-    <div><label>id: </label>1</div>
+    <div>id: 1</div>
   `
 })
 export class HeroDetailComponent { }
diff --git a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
index f48657803cf..9495a46b366 100644
--- a/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-1-typescript/app/phone-detail/phone-detail.template.html
@@ -1,5 +1,5 @@
 <div class="phone-images">
-  <img ng-src="{{img}}" class="phone"
+  <img ng-src="{{img}}" class="phone" alt="Phone {{$ctrl.phone.name}} - thumbnail {{$index}}"
       ng-class="{selected: img === $ctrl.mainImageUrl}"
       ng-repeat="img in $ctrl.phone.images" />
 </div>
@@ -10,7 +10,7 @@
 
 <ul class="phone-thumbs">
   <li ng-repeat="img in $ctrl.phone.images">
-    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" alt="Phone {{$ctrl.phone.name}} - thumbnail {{$index}}"/>
   </li>
 </ul>
 
diff --git a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
index 4068532de99..1c2a8740655 100644
--- a/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-2-hybrid/app/phone-detail/phone-detail.template.html
@@ -1,9 +1,9 @@
 <!-- #docregion -->
 <div *ngIf="phone">
   <div class="phone-images">
-    <img [src]="img" class="phone"
+    <img [src]="img" class="phone" alt="Phone {{ phone.name }} - thumbnail {{ index }}"
         [ngClass]="{'selected': img === mainImageUrl}"
-        *ngFor="let img of phone.images" />
+        *ngFor="let img of phone.images; let index = index;" />
   </div>
 
   <h1>{{phone.name}}</h1>
@@ -11,8 +11,9 @@
   <p>{{phone.description}}</p>
 
   <ul class="phone-thumbs">
-    <li *ngFor="let img of phone.images">
-      <img [src]="img" (click)="setImage(img)" />
+    <li *ngFor="let img of phone.images; let index = index">
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+      <img [src]="img" (click)="setImage(img)" alt="Phone {{ phone.name }} - thumbnail {{ index }}"/>
     </li>
   </ul>
 
diff --git a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
index 4068532de99..1396dbc4714 100644
--- a/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
+++ b/aio/content/examples/upgrade-phonecat-3-final/app/phone-detail/phone-detail.template.html
@@ -1,9 +1,9 @@
 <!-- #docregion -->
 <div *ngIf="phone">
   <div class="phone-images">
-    <img [src]="img" class="phone"
+    <img [src]="img" class="phone" [alt]="'phone' + index"
         [ngClass]="{'selected': img === mainImageUrl}"
-        *ngFor="let img of phone.images" />
+        *ngFor="let img of phone.images; let index = index" />
   </div>
 
   <h1>{{phone.name}}</h1>
@@ -11,8 +11,9 @@
   <p>{{phone.description}}</p>
 
   <ul class="phone-thumbs">
-    <li *ngFor="let img of phone.images">
-      <img [src]="img" (click)="setImage(img)" />
+    <li *ngFor="let img of phone.images let index = index">
+      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -->
+      <img [src]="img" [alt]="'phone thumb' + index" (click)="setImage(img)" />
     </li>
   </ul>
 
diff --git a/aio/content/guide/architecture-components.md b/aio/content/guide/architecture-components.md
index c754c42e4d9..490a6fdd345 100644
--- a/aio/content/guide/architecture-components.md
+++ b/aio/content/guide/architecture-components.md
@@ -89,14 +89,14 @@ This example from the `HeroListComponent` template uses three of these forms.
 
 <code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (binding)" region="binding"></code-example>
 
-* The `{{hero.name}}` [*interpolation*](guide/interpolation)
-displays the component's `hero.name` property value within the `<li>` element.
-
 * The `[hero]` [*property binding*](guide/property-binding) passes the value of
 `selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
 
 * The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
 
+* The `{{hero.name}}` [*interpolation*](guide/interpolation)
+displays the component's `hero.name` property value within the `<button>` element.
+
 Two-way data binding (used mainly in [template-driven forms](guide/forms))
 combines property and event binding in a single notation.
 Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive.
diff --git a/aio/content/guide/binding-syntax.md b/aio/content/guide/binding-syntax.md
index 96addfec739..e7bb2e627db 100644
--- a/aio/content/guide/binding-syntax.md
+++ b/aio/content/guide/binding-syntax.md
@@ -237,7 +237,7 @@ The following table summarizes the targets for the different binding types.
       Directive&nbsp;property
     </td>
     <td>
-      <code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
+      <code>alt</code>, <code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
       <code-example path="template-syntax/src/app/app.component.html" region="property-binding-syntax-1"></code-example>
       <!-- For more information, see [Property Binding](guide/property-binding). -->
     </td>
diff --git a/aio/content/tutorial/toh-pt2.md b/aio/content/tutorial/toh-pt2.md
index 310e0da7220..ac060d3f85f 100644
--- a/aio/content/tutorial/toh-pt2.md
+++ b/aio/content/tutorial/toh-pt2.md
@@ -117,15 +117,26 @@ and update the hero detail.
 
 ### Add a click event binding
 
-Add a click event binding to the `<li>` like this:
+Add a `<button>` with a click event binding in the `<li>` like this:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="selectedHero-click" header="heroes.component.html (template excerpt)"></code-example>
 
 This is an example of Angular's [event binding](guide/event-binding) syntax.
 
-The parentheses around `click` tell Angular to listen for the `<li>` element's  `click` event.
-When the user clicks in the `<li>`, Angular executes the `onSelect(hero)` expression.
+The parentheses around `click` tell Angular to listen for the `<button>` element's `click` event.
+When the user clicks in the `<button>`, Angular executes the `onSelect(hero)` expression.
 
+<div class="callout is-helpful">
+
+  <header>Clickable elements</header>
+
+  Note that we added the click event binding on a new `<button>` element. While we could have added
+  the event binding on the `<li>` element directly, it is better for accessibility purposes to use
+  the native `<button>` element to handle clicks.
+
+  For more details on accessibility, see [Accessibility in Angular](guide/accessibility).
+
+</div>
 
 In the next section, define an `onSelect()` method in `HeroesComponent` to
 display the hero that was defined in the `*ngFor` expression.
@@ -207,7 +218,7 @@ To apply the `.selected` class to the `<li>` when the user clicks it, use class
 Angular's [class binding](guide/attribute-binding#class-binding) can add and remove a CSS class conditionally.
 Add `[class.some-css-class]="some-condition"` to the element you want to style.
 
-Add the following `[class.selected]` binding to the `<li>` in the `HeroesComponent` template:
+Add the following `[class.selected]` binding to the `<button>` in the `HeroesComponent` template:
 
 <code-example path="toh-pt2/src/app/heroes/heroes.component.1.html" region="class-selected" header="heroes.component.html (toggle the 'selected' CSS class)"></code-example>