Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

Commit 6b7459d

Browse files
author
Jennifer Luker
committed
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.
1 parent 8830979 commit 6b7459d

File tree

2 files changed

+17
-14
lines changed

2 files changed

+17
-14
lines changed

src/app/app.component.html

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
<div class="app-fullpage">
2-
<mat-toolbar color="accent" class="mat-elevation-z6">
3-
<button mat-icon-button (click)="sidenav.toggle()">
4-
<mat-icon>
5-
menu
6-
</mat-icon>
7-
</button>
8-
<span class="title"> RxJS Docs </span>
9-
</mat-toolbar>
2+
<header>
3+
<mat-toolbar color="accent" class="mat-elevation-z6">
4+
<button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
5+
<mat-icon>
6+
menu
7+
</mat-icon>
8+
</button>
9+
<span class="title"> RxJS Docs </span>
10+
</mat-toolbar>
11+
</header>
1012
<mat-sidenav-container>
11-
<mat-sidenav #sidenav>
13+
<mat-sidenav #sidenav role="navigation">
1214
<mat-nav-list (click)="sidenav.toggle()">
13-
<a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
14-
[routerLinkActiveOptions]="menu.options"
15+
<a *ngFor="let menu of menus" mat-list-item routerLinkActive="active"
16+
[routerLinkActiveOptions]="menu.options"
1517
[routerLink]="menu.link">
16-
{{menu.title}}
18+
{{menu.title}}
1719
</a>
1820
</mat-nav-list>
1921
</mat-sidenav>
20-
<div class="body-margin">
22+
<main class="body-margin">
2123
<router-outlet></router-outlet>
22-
</div>
24+
</main>
2325
</mat-sidenav-container>
2426
</div>

src/app/app.component.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
.title {
22
padding: 0 16px;
3+
font-weight: 600;
34
}

0 commit comments

Comments
 (0)