Adding some accessibility features:

1. Wrapped the toolbar in a <header /> element to allow the proper classification of the toolbar.
2. wrapped the <router-outlet /> element with a <main /> element instead of a <div /> element
3. Added a role="navigation" to the sidenav for screenreaders
4. Added an aria-label="menu" tag to the mat-icon-button because screen readers couldn't identify text to read inside the element.
5. Bumped up the font-weight on the .title element to fulfill color contrast requirements.

There is still a color contrast problem within the side menu. The current color is #e91e63, but it should be #E4165C to fulfill color contrast requirements.

Author: Jennifer Luker

src/app/app.component.html

@@ -1,24 +1,26 @@
 <div class="app-fullpage">
-  <mat-toolbar color="accent" class="mat-elevation-z6">
-    <button mat-icon-button (click)="sidenav.toggle()">
-    <mat-icon>
-      menu
-    </mat-icon>
-  </button>
-    <span class="title"> RxJS Docs </span>
-  </mat-toolbar>
+  <header>
+    <mat-toolbar color="accent" class="mat-elevation-z6">
+      <button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
+        <mat-icon>
+          menu
+        </mat-icon>
+      </button>
+      <span class="title"> RxJS Docs </span>
+    </mat-toolbar>
+  </header>
   <mat-sidenav-container>
-    <mat-sidenav #sidenav>
+    <mat-sidenav #sidenav role="navigation">
       <mat-nav-list (click)="sidenav.toggle()">
-        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
-          [routerLinkActiveOptions]="menu.options"
+        <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" 
+          [routerLinkActiveOptions]="menu.options" 
           [routerLink]="menu.link">
-         {{menu.title}}
+          {{menu.title}}
         </a>
       </mat-nav-list>
     </mat-sidenav>
-    <div class="body-margin">
+    <main class="body-margin">
       <router-outlet></router-outlet>
-    </div>
+    </main>
   </mat-sidenav-container>
 </div>

src/app/app.component.scss

@@ -1,3 +1,4 @@
 .title {
   padding: 0 16px;
+  font-weight: 600;
 }