diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43f9..27747ad03 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
+<h1 class="sr-only">{{ pageHeading | translate }}</h1>
 <router-outlet></router-outlet>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 2453e2916..70b2f597a 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,15 @@
 :host {
   display: flex;
   flex: 1;
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+  }
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 758378406..71a3bd2b4 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -59,6 +59,7 @@ import { INITIAL_APP_STATE } from './store/initial-state';
 })
 export class AppComponent implements OnInit, OnDestroy {
   onDestroy$: Subject<boolean> = new Subject<boolean>();
+  pageHeading = '';
 
   constructor(
     private route: ActivatedRoute,
@@ -111,6 +112,7 @@ export class AppComponent implements OnInit, OnDestroy {
         const snapshot: any = event.snapshot || {};
         const data: any = snapshot.data || {};
 
+        this.pageHeading = data.title || '';
         pageTitle.setTitle(data.title || '');
         this.store.dispatch(new SetCurrentUrlAction(router.url));
       });