diff --git a/src/app/@theme/components/footer/footer.component.ts b/src/app/@theme/components/footer/footer.component.ts
index 85e3b7ac..0257bf4d 100644
--- a/src/app/@theme/components/footer/footer.component.ts
+++ b/src/app/@theme/components/footer/footer.component.ts
@@ -8,10 +8,10 @@ import { Component } from '@angular/core';
       Created with ♥ by <b><a href="https://akveo.page.link/8V2f" target="_blank">Akveo</a></b> 2019
     </span>
     <div class="socials">
-      <a href="#" target="_blank" class="ion ion-social-github"></a>
-      <a href="#" target="_blank" class="ion ion-social-facebook"></a>
-      <a href="#" target="_blank" class="ion ion-social-twitter"></a>
-      <a href="#" target="_blank" class="ion ion-social-linkedin"></a>
+      <a href="#" target="_blank" class="ion ion-social-github" aria-label="social github"></a>
+      <a href="#" target="_blank" class="ion ion-social-facebook" aria-label="social facebook"></a>
+      <a href="#" target="_blank" class="ion ion-social-twitter" aria-label="social twitter"></a>
+      <a href="#" target="_blank" class="ion ion-social-linkedin" aria-label="social linkedin"></a>
     </div>
   `,
 })
diff --git a/src/app/@theme/components/header/header.component.html b/src/app/@theme/components/header/header.component.html
index 93a2c1bd..b84589ee 100644
--- a/src/app/@theme/components/header/header.component.html
+++ b/src/app/@theme/components/header/header.component.html
@@ -1,6 +1,6 @@
 <div class="header-container">
   <div class="logo-container">
-    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle">
+    <a (click)="toggleSidebar()" href="#" class="sidebar-toggle" aria-label="Open menu">
       <nb-icon icon="menu-2-outline"></nb-icon>
     </a>
     <a class="logo" href="#" (click)="navigateHome()">ngx-<span>admin Y</span></a>
diff --git a/src/app/pages/extra-components/calendar/calendar.component.html b/src/app/pages/extra-components/calendar/calendar.component.html
index 6a75f62c..88945e23 100644
--- a/src/app/pages/extra-components/calendar/calendar.component.html
+++ b/src/app/pages/extra-components/calendar/calendar.component.html
@@ -3,19 +3,19 @@
     <span class="subtitle">
       Selected date: {{ date | date }}
     </span>
-    <nb-calendar [(date)]="date" [boundingMonth]="true" showWeekNumber></nb-calendar>
+    <nb-calendar ngxCalendarAriaLabel [(date)]="date" [boundingMonth]="true" showWeekNumber></nb-calendar>
   </div>
   <div class="calendar-container">
     <span class="subtitle">
       Selected range: {{ range.start | date }} - {{ range.end | date }}
     </span>
-    <nb-calendar-range [(range)]="range"></nb-calendar-range>
+    <nb-calendar-range ngxCalendarAriaLabel [(range)]="range"></nb-calendar-range>
   </div>
   <div class="calendar-container">
     <span class="subtitle">
       Selected date: {{ date2 | date }}
     </span>
-    <nb-calendar
+    <nb-calendar ngxCalendarAriaLabel
       [(date)]="date2"
       [dayCellComponent]="dayCellComponent"
     ></nb-calendar>
diff --git a/src/app/pages/extra-components/extra-components.module.ts b/src/app/pages/extra-components/extra-components.module.ts
index 31161874..7a8fded6 100644
--- a/src/app/pages/extra-components/extra-components.module.ts
+++ b/src/app/pages/extra-components/extra-components.module.ts
@@ -37,6 +37,7 @@ import { NebularFormInputsComponent } from './form-inputs/nebular-form-inputs.co
 import { NebularSelectComponent } from './form-inputs/nebular-select/nebular-select.component';
 import { CalendarKitFullCalendarShowcaseComponent } from './calendar-kit/calendar-kit.component';
 import { CalendarKitMonthCellComponent } from './calendar-kit/month-cell/month-cell.component';
+import {CalendarAriaLabelDirective} from './calendar/calendar-aria-label.directive';
 
 const COMPONENTS = [
   ExtraComponentsComponent,
@@ -55,6 +56,7 @@ const COMPONENTS = [
   NebularSelectComponent,
   CalendarKitFullCalendarShowcaseComponent,
   CalendarKitMonthCellComponent,
+  CalendarAriaLabelDirective,
 ];
 
 const MODULES = [