diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.html b/src/app/shared/view-mode-switch/view-mode-switch.component.html
index 5f70bc699c..45d219eb91 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.html
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.html
@@ -1,5 +1,5 @@
 <div class="btn-group" data-toggle="buttons">
-    <a *ngIf="isToShow(viewModeEnum.ListElement)"
+    <button *ngIf="isToShow(viewModeEnum.ListElement)"
        routerLink="."
        [queryParams]="{view: 'list'}"
        queryParamsHandling="merge"
@@ -8,9 +8,9 @@
        [class.active]="currentMode === viewModeEnum.ListElement"
        class="btn btn-secondary"
        [attr.data-test]="'list-view' | dsBrowserOnly">
-          <i class="fas fa-list" title="{{'search.view-switch.show-list' | translate}}"></i>
-    </a>
-    <a *ngIf="isToShow(viewModeEnum.GridElement)"
+       <span class="fas fa-list"></span><span class="sr-only">{{'search.view-switch.show-list' | translate}}</span>
+    </button>
+    <button *ngIf="isToShow(viewModeEnum.GridElement)"
        routerLink="."
        [queryParams]="{view: 'grid'}"
        queryParamsHandling="merge"
@@ -19,9 +19,9 @@
        [class.active]="currentMode === viewModeEnum.GridElement"
        class="btn btn-secondary"
        [attr.data-test]="'grid-view' | dsBrowserOnly">
-          <i class="fas fa-th-large" title="{{'search.view-switch.show-grid' | translate}}"></i>
-    </a>
-    <a *ngIf="isToShow(viewModeEnum.DetailedListElement)"
+       <span class="fas fa-th-large"></span><span class="sr-only">{{'search.view-switch.show-grid' | translate}}</span>
+    </button>
+    <button *ngIf="isToShow(viewModeEnum.DetailedListElement)"
        routerLink="."
        [queryParams]="{view: 'detailed'}"
        queryParamsHandling="merge"
@@ -30,6 +30,6 @@
        [class.active]="currentMode === viewModeEnum.DetailedListElement"
        class="btn btn-secondary"
        [attr.data-test]="'detail-view' | dsBrowserOnly">
-      <i class="far fa-square" title="{{'search.view-switch.show-detail' | translate}}"></i>
-    </a>
+      <span class="far fa-square"></span><span class="sr-only">{{'search.view-switch.show-detail' | translate}}</span>
+    </button>
 </div>
diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts b/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
index 5780ea5cf3..248a843316 100644
--- a/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
+++ b/src/app/shared/view-mode-switch/view-mode-switch.component.spec.ts
@@ -61,7 +61,7 @@ describe('ViewModeSwitchComponent', () => {
       searchService.setViewMode(ViewMode.ListElement);
       tick();
       fixture.detectChanges();
-      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      const debugElements = fixture.debugElement.queryAll(By.css('button'));
       listButton = debugElements[0].nativeElement;
       gridButton = debugElements[1].nativeElement;
     }));
@@ -96,7 +96,7 @@ describe('ViewModeSwitchComponent', () => {
       searchService.setViewMode(ViewMode.ListElement);
       tick();
       fixture.detectChanges();
-      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      const debugElements = fixture.debugElement.queryAll(By.css('button'));
       listButton = debugElements[0].nativeElement;
       detailButton = debugElements[1].nativeElement;
     }));