diff --git a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
index 8a58789da0..5dbbc8ad97 100644
--- a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
+++ b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
@@ -6,6 +6,8 @@
         [ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
         [ngStyle]="{ width: progressBarWidth | percent }"
         role="progressbar"
+        [attr.aria-label]="'Spent budget of cost center ' + costCenter.name"
+        [attr.aria-valuetext]="spentBudgetPercentage | percent"
       >
         <span class="progress-display">{{ spentBudgetPercentage | percent }}</span>
         <ng-template #BudgetPopover>
diff --git a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
index 52624cba82..d6b09f43b8 100644
--- a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
+++ b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
@@ -41,6 +41,7 @@ describe('Cost Center Budget Component', () => {
         currency: 'USD',
         type: 'Money',
       },
+      name: 'Oil Corp Headquarter',
     } as CostCenter;
 
     basketChange = {
@@ -62,7 +63,13 @@ describe('Cost Center Budget Component', () => {
       <div>
         <div placement="top" data-testing-id="cost-center-budget-popover" ng-reflect-placement="top">
           <div class="progress">
-            <div role="progressbar" class="progress-bar" style="width: 40%">
+            <div
+              role="progressbar"
+              class="progress-bar"
+              aria-label="Spent budget of cost center Oil Corp Headquarter"
+              aria-valuetext="40%"
+              style="width: 40%"
+            >
               <span class="progress-display">40%</span>
             </div>
           </div>
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.html b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
index b2417aea92..af403f29d6 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.html
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
@@ -25,6 +25,8 @@
           [ngClass]="{ 'bg-danger': usedBudgetPercentage * 100 > 90 }"
           [ngStyle]="{ width: usedBudgetPercentage | percent }"
           role="progressbar"
+          aria-label="Spent budget"
+          [attr.aria-valuetext]="usedBudgetPercentage | percent"
         >
           <span class="progress-display">{{ usedBudgetPercentage | percent }}</span>
           <ng-template #BudgetPopover>
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
index 9c89b7584c..574f1e41bb 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
@@ -77,7 +77,13 @@ describe('User Budget Component', () => {
         </dl>
         <div placement="top" data-testing-id="user-budget-popover" ng-reflect-placement="top">
           <div class="progress">
-            <div role="progressbar" class="progress-bar" style="width: 50%">
+            <div
+              role="progressbar"
+              aria-label="Spent budget"
+              class="progress-bar"
+              aria-valuetext="50%"
+              style="width: 50%"
+            >
               <span class="progress-display">50%</span>
             </div>
           </div>
diff --git a/projects/requisition-management/src/app/pages/approver/approver-page.component.html b/projects/requisition-management/src/app/pages/approver/approver-page.component.html
index a703064323..c48a59e911 100644
--- a/projects/requisition-management/src/app/pages/approver/approver-page.component.html
+++ b/projects/requisition-management/src/app/pages/approver/approver-page.component.html
@@ -3,17 +3,17 @@ <h1>{{ 'account.requisitions.approvals' | translate }}</h1>
 <p>{{ 'account.requisitions.approvals.text' | translate }}</p>
 
 <ul ngbNav class="nav-tabs" [(activeId)]="status">
-  <li ngbNavItem="PENDING">
+  <li ngbNavItem="PENDING" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'PENDING' }]" data-testing-id="tab-link-pending">{{
       'account.requisitions.approvals.navtab.waiting' | translate
     }}</a>
   </li>
-  <li ngbNavItem="APPROVED">
+  <li ngbNavItem="APPROVED" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'APPROVED' }]" data-testing-id="tab-link-approved">{{
       'account.requisitions.approvals.navtab.approved' | translate
     }}</a>
   </li>
-  <li ngbNavItem="REJECTED">
+  <li ngbNavItem="REJECTED" role="presentation">
     <a ngbNavLink [routerLink]="['../approver', { status: 'REJECTED' }]" data-testing-id="tab-link-rejected">{{
       'account.requisitions.approvals.navtab.rejected' | translate
     }}</a>
diff --git a/projects/requisition-management/src/app/pages/buyer/buyer-page.component.html b/projects/requisition-management/src/app/pages/buyer/buyer-page.component.html
index 9244627c67..bcdcdb21d6 100644
--- a/projects/requisition-management/src/app/pages/buyer/buyer-page.component.html
+++ b/projects/requisition-management/src/app/pages/buyer/buyer-page.component.html
@@ -3,17 +3,17 @@ <h1>{{ 'account.requisitions.requisitions' | translate }}</h1>
 <p>{{ 'account.requisitions.requisitions.text' | translate }}</p>
 
 <ul ngbNav class="nav-tabs" [(activeId)]="status">
-  <li ngbNavItem="PENDING">
+  <li ngbNavItem="PENDING" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'PENDING' }]" data-testing-id="tab-link-pending">{{
       'account.requisitions.requisitions.navtab.pending' | translate
     }}</a>
   </li>
-  <li ngbNavItem="APPROVED">
+  <li ngbNavItem="APPROVED" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'APPROVED' }]" data-testing-id="tab-link-approved">{{
       'account.requisitions.requisitions.navtab.approved' | translate
     }}</a>
   </li>
-  <li ngbNavItem="REJECTED">
+  <li ngbNavItem="REJECTED" role="presentation">
     <a ngbNavLink [routerLink]="['../buyer', { status: 'REJECTED' }]" data-testing-id="tab-link-rejected">{{
       'account.requisitions.requisitions.navtab.rejected' | translate
     }}</a>
diff --git a/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html b/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
index 82bd589076..4e112361cc 100644
--- a/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
+++ b/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
@@ -1,6 +1,11 @@
 <div class="d-flex" data-testing-id="order-template-product">
   <div class="col-1 col-md-2 list-item d-flex">
-    <input type="checkbox" data-testing-id="productCheckbox" [formControl]="checkBox" />
+    <input
+      type="checkbox"
+      data-testing-id="productCheckbox"
+      [formControl]="checkBox"
+      aria-label="Select item to add to cart"
+    />
     <div class="d-none d-md-inline">
       <ish-product-image imageType="S" [link]="true"></ish-product-image>
     </div>
diff --git a/src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html b/src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html
index 0232b05034..9209db7538 100644
--- a/src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html
+++ b/src/app/extensions/punchout/pages/account-punchout/account-punchout-header/account-punchout-header.component.html
@@ -10,7 +10,7 @@ <h1>{{ 'account.punchout.heading' | translate }}</h1>
 
 <div *ngIf="punchoutTypes?.length > 1">
   <ul ngbNav class="nav-tabs section" [(activeId)]="selectedType">
-    <li *ngFor="let type of punchoutTypes" [ngbNavItem]="type">
+    <li *ngFor="let type of punchoutTypes" [ngbNavItem]="type" role="presentation">
       <a ngbNavLink [routerLink]="['../punchout', { format: type }]">{{
         'account.punchout.type.text' | translate : { '0': type }
       }}</a>
diff --git a/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html b/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
index 50c064a543..28f875bbe8 100644
--- a/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
+++ b/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
@@ -12,6 +12,7 @@ <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
           class="form-control"
           accept=".csv"
           (change)="uploadListener($event.target)"
+          aria-label="Upload CSV File"
         />
         <div [ngSwitch]="status">
           <small *ngSwitchCase="'IncorrectInput'" class="has-error"
diff --git a/src/app/extensions/store-locator/shared/store-locator-footer/store-locator-footer.component.html b/src/app/extensions/store-locator/shared/store-locator-footer/store-locator-footer.component.html
index e273fa1899..bea23d46ec 100644
--- a/src/app/extensions/store-locator/shared/store-locator-footer/store-locator-footer.component.html
+++ b/src/app/extensions/store-locator/shared/store-locator-footer/store-locator-footer.component.html
@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-md-4 storefinder clearfix">
         <fa-icon [icon]="['fas', 'map-marker-alt']"></fa-icon>
-        <h4>{{ 'store_locator.link.title' | translate }}</h4>
+        <h3>{{ 'store_locator.link.title' | translate }}</h3>
         <a routerLink="/store-finder">{{ 'store_locator.link.subtitle' | translate }}</a>
       </div>
     </div>
diff --git a/src/app/pages/account/account-navigation/account-navigation.component.html b/src/app/pages/account/account-navigation/account-navigation.component.html
index 8c46181aa9..a35fe6cb5d 100644
--- a/src/app/pages/account/account-navigation/account-navigation.component.html
+++ b/src/app/pages/account/account-navigation/account-navigation.component.html
@@ -1,7 +1,7 @@
 <!-- account navigation with hierarchy -->
 <ng-container *ngIf="!(deviceType === 'mobile' || deviceType === 'tablet'); else mobileNavigation">
   <ul class="account-navigation list-unstyled">
-    <ish-account-user-info></ish-account-user-info>
+    <ish-account-user-info role="listitem"></ish-account-user-info>
     <ng-container *ngFor="let item of navItems">
       <ng-container *ishIsAuthorizedTo="item.permission || 'always'">
         <ng-container *ishHasNotRole="item.notRole">
diff --git a/src/app/pages/account/account-user-info/account-user-info.component.html b/src/app/pages/account/account-user-info/account-user-info.component.html
index e9f125e736..c09ce71cd7 100644
--- a/src/app/pages/account/account-user-info/account-user-info.component.html
+++ b/src/app/pages/account/account-user-info/account-user-info.component.html
@@ -1,4 +1,4 @@
-<li *ngIf="isBusinessUser$ | async" class="account-welcome">
+<li *ngIf="isBusinessUser$ | async" class="account-welcome" role="presentation">
   <ng-container *ngIf="user$ | async as user">
     <ng-container *ngIf="user.lastName && user.firstName; else email">
       <h4>{{ user.lastName }}, {{ user.firstName }}</h4>
diff --git a/src/app/pages/account/account-user-info/account-user-info.component.spec.ts b/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
index ce1aad945b..e0f14364fd 100644
--- a/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
+++ b/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
@@ -58,7 +58,7 @@ describe('Account User Info Component', () => {
     fixture.detectChanges();
 
     expect(element).toMatchInlineSnapshot(`
-      <li class="account-welcome">
+      <li role="presentation" class="account-welcome">
         <h4>Mustermann, Max</h4>
         <div>Foods Inc.</div>
         <div>Approver, Buyer</div>
@@ -74,7 +74,7 @@ describe('Account User Info Component', () => {
     fixture.detectChanges();
 
     expect(element).toMatchInlineSnapshot(`
-      <li class="account-welcome">
+      <li role="presentation" class="account-welcome">
         <h4 class="ellipsis">max.mustermann@test.intershop.de</h4>
         <div>Foods Inc.</div>
       </li>
diff --git a/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html b/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html
index b3bace41b6..bacc7cdb04 100644
--- a/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html
+++ b/src/app/pages/checkout-payment/checkout-payment/checkout-payment.component.html
@@ -21,7 +21,7 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
         <ul *ngIf="hasPaymentMethods" id="payment-accordion" class="payment-methods list-unstyled">
           <ng-container *ngFor="let paymentMethod of filteredPaymentMethods; index as i">
             <li class="panel">
-              <div [ngClass]="{ 'form-check': !paymentMethod.parameters }" role="tab">
+              <div [ngClass]="{ 'form-check': !paymentMethod.parameters }">
                 <strong>
                   {{ paymentMethod.displayName }}
                   <ng-container *ngIf="!paymentMethod.displayName">{{ paymentMethod.id }}</ng-container>
@@ -72,8 +72,8 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                 *ngIf="paymentMethod.parameters?.length"
                 [attr.data-testing-id]="'payment-parameter-form-' + paymentMethod.id"
               >
-                <li *ngFor="let paymentInstrument of paymentMethod.paymentInstruments" class="panel section">
-                  <div class="form-check col-10 col-md-6 col-lg-8 col-xl-6" role="tab">
+                <div *ngFor="let paymentInstrument of paymentMethod.paymentInstruments" class="panel section">
+                  <div class="form-check col-10 col-md-6 col-lg-8 col-xl-6">
                     <input
                       type="radio"
                       formControlName="name"
@@ -105,8 +105,8 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                     >
                     </ish-payment-concardis-creditcard-cvc-detail>
                   </div>
-                </li>
-                <li class="panel">
+                </div>
+                <div class="panel">
                   <a
                     *ngIf="!formIsOpen(i)"
                     [routerLink]="[]"
@@ -114,7 +114,7 @@ <h3>{{ 'checkout.payment.method.select.heading' | translate }}</h3>
                     data-testing-id="add-payment-link"
                     >{{ 'checkout.payment.addPayment.link' | translate }}
                   </a>
-                </li>
+                </div>
 
                 <div [ngbCollapse]="!formIsOpen(i)">
                   <p class="indicates-required">
diff --git a/src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts b/src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts
index 52bc8f742d..a705292f6f 100644
--- a/src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts
+++ b/src/app/pages/checkout-shipping/checkout-shipping/checkout-shipping.component.ts
@@ -47,7 +47,7 @@ export class CheckoutShippingComponent implements OnInit, OnDestroy {
           wrappers: ['shipping-radio-wrapper'],
           props: {
             description: method.description,
-            id: `shipping_method${method.id}`,
+            id: `shipping_method_${method.id}`,
             value: method.id,
           },
         }))
diff --git a/src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html b/src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html
index 8a46405827..83f4579f6f 100644
--- a/src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html
+++ b/src/app/pages/checkout-shipping/formly/shipping-radio-wrapper/shipping-radio-wrapper.component.html
@@ -1,6 +1,6 @@
 <div class="form-check" [class.has-error]="showError">
   <ng-template #fieldComponent></ng-template>
-  <label class="form-check-label" [for]="props.id" [ngClass]="props.labelClass">
+  <label class="form-check-label" [for]="id" [ngClass]="props.labelClass">
     <ish-shipping-info [shippingMethodId]="props.value"></ish-shipping-info>
     <a *ngIf="props.description" class="details-tooltip" [ngbPopover]="ShippingMethodDescription" placement="top">
       {{ 'checkout.detail.text' | translate }}
diff --git a/src/app/pages/product/product-detail-info/product-detail-info.component.html b/src/app/pages/product/product-detail-info/product-detail-info.component.html
index 6a76c15f1b..d70e85dbfa 100644
--- a/src/app/pages/product/product-detail-info/product-detail-info.component.html
+++ b/src/app/pages/product/product-detail-info/product-detail-info.component.html
@@ -1,20 +1,20 @@
 <div *ngIf="product$ | async as product" class="section">
   <ul ngbNav #nav="ngbNav" class="nav-tabs w-100" [(activeId)]="active">
-    <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab">
+    <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab" role="presentation">
       <a ngbNavLink>{{ 'product.description.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <div [ishServerHtml]="product.longDescription"></div>
       </ng-template>
     </li>
 
-    <li *ngIf="product.attributes?.length" [ngbNavItem]="'DETAILS'">
+    <li *ngIf="product.attributes?.length" [ngbNavItem]="'DETAILS'" role="presentation">
       <a ngbNavLink>{{ 'product.details.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <ish-product-attributes [product]="product"></ish-product-attributes>
       </ng-template>
     </li>
 
-    <li *ngIf="product.attachments?.length" [ngbNavItem]="'ATTACHMENTS'">
+    <li *ngIf="product.attachments?.length" [ngbNavItem]="'ATTACHMENTS'" role="presentation">
       <a ngbNavLink>{{ 'product.attachments.heading' | translate }}</a>
       <ng-template ngbNavContent>
         <ish-product-attachments></ish-product-attachments>
@@ -22,7 +22,7 @@
     </li>
 
     <ng-container *ngIf="(isVariationMaster$ | async) === false">
-      <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'">
+      <li *ishFeature="'rating'" [ngbNavItem]="'REVIEWS'" role="presentation">
         <a ngbNavLink>{{ 'product.reviews.heading' | translate }} ({{ product.numberOfReviews }})</a>
         <ng-template ngbNavContent>
           <ish-lazy-product-reviews></ish-lazy-product-reviews>
diff --git a/src/app/shared/cms/components/cms-video/cms-video.component.html b/src/app/shared/cms/components/cms-video/cms-video.component.html
index a386597a8c..0423eb1fe7 100644
--- a/src/app/shared/cms/components/cms-video/cms-video.component.html
+++ b/src/app/shared/cms/components/cms-video/cms-video.component.html
@@ -7,7 +7,13 @@
   <ng-container *ngIf="iframeVideoUrl; else nativeVideo">
     <div class="video-wrapper">
       <!-- spell-checker: words allowfullscreen -->
-      <iframe loading="lazy" [src]="iframeVideoUrl" frameborder="0" allowfullscreen></iframe>
+      <iframe
+        [title]="pagelet?.displayName"
+        loading="lazy"
+        [src]="iframeVideoUrl"
+        frameborder="0"
+        allowfullscreen
+      ></iframe>
     </div>
   </ng-container>
 
@@ -22,6 +28,7 @@
       [controls]="autoplay"
       [muted]="mute"
       [poster]="pagelet.stringParam('Image')"
+      [title]="pagelet?.displayName"
     ></video>
 
     <div *ngIf="!autoplay && !playing" class="video-text">
diff --git a/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html b/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
index d819a54191..87cc228607 100644
--- a/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
+++ b/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
@@ -1,7 +1,12 @@
 <div class="address-summary">
   <!-- Invoice Address -->
   <div class="clearfix">
-    <a class="float-right btn-tool" routerLink="/checkout/address">
+    <a
+      class="float-right btn-tool"
+      routerLink="/checkout/address"
+      title="{{ 'checkout.address.update.label' | translate }}"
+      aria-label="Edit invoice address"
+    >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
     <h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
@@ -15,7 +20,8 @@ <h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
     <a
       class="float-right btn-tool"
       routerLink="/checkout/address"
-      title="{{ 'checkout.address.update.label' | translate }} />"
+      title="{{ 'checkout.address.update.label' | translate }}"
+      aria-label="Edit shipping address"
     >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
diff --git a/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html b/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
index a32f5387ee..f547666eb5 100644
--- a/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
+++ b/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
@@ -35,14 +35,14 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
     class="btn btn-link"
     (click)="showAddressForm()"
     [attr.aria-expanded]="(collapseChange | async) === false"
-    aria-controls="collapseBasic"
+    aria-controls="invoice-address-panel"
   >
     {{ 'checkout.create_address.link' | translate }}
   </button>
 </div>
 
 <!-- invoice address form -->
-<div id="collapseBasic" [ngbCollapse]="collapseChange | async" data-testing-id="invoice-address-form">
+<div id="invoice-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="invoice-address-form">
   <ish-formly-customer-address-form
     [address]="editAddress"
     [resetForm]="collapseChange | async"
diff --git a/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html b/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
index a1a04a5f85..5671726549 100644
--- a/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
+++ b/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
@@ -70,14 +70,14 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
     class="btn btn-link"
     (click)="showAddressForm()"
     [attr.aria-expanded]="(collapseChange | async) === false"
-    aria-controls="collapseBasic"
+    aria-controls="shipping-address-panel"
   >
     {{ 'checkout.create_address.link' | translate }}
   </button>
 </div>
 
 <!-- shipping address form -->
-<div id="collapseBasic" [ngbCollapse]="collapseChange | async" data-testing-id="shipping-address-form">
+<div id="shipping-address-panel" [ngbCollapse]="collapseChange | async" data-testing-id="shipping-address-form">
   <ish-formly-customer-address-form
     [address]="editAddress"
     [resetForm]="collapseChange | async"
diff --git a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html
index 44aca0f2b9..d1be0662c7 100644
--- a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html
+++ b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html
@@ -4,7 +4,7 @@
     (keydown.enter)="toggle()"
     tabindex="0"
     [attr.aria-expanded]="!isCollapsed"
-    aria-controls="collapseFilter"
+    [attr.aria-controls]="'filter-list_' + title"
   >
     {{ title }}
     <fa-icon [icon]="['fas', isCollapsed ? 'angle-right' : 'angle-down']" class="float-right"></fa-icon>
diff --git a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts
index f0149ff736..3692c8ec68 100644
--- a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts
+++ b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts
@@ -19,6 +19,8 @@ describe('Filter Collapsible Component', () => {
     fixture = TestBed.createComponent(FilterCollapsibleComponent);
     component = fixture.componentInstance;
     element = fixture.nativeElement;
+
+    component.title = 'Price';
   });
 
   it('should be created', () => {
@@ -31,8 +33,8 @@ describe('Filter Collapsible Component', () => {
     fixture.detectChanges();
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group">
-        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="true">
-          <fa-icon class="float-right" ng-reflect-icon="fas,angle-down"></fa-icon>
+        <h3 tabindex="0" aria-expanded="true" aria-controls="filter-list_Price">
+          Price <fa-icon class="float-right" ng-reflect-icon="fas,angle-down"></fa-icon>
         </h3>
       </div>
     `);
@@ -43,8 +45,8 @@ describe('Filter Collapsible Component', () => {
 
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group collapsed">
-        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="false">
-          <fa-icon class="float-right" ng-reflect-icon="fas,angle-right"></fa-icon>
+        <h3 tabindex="0" aria-expanded="false" aria-controls="filter-list_Price">
+          Price <fa-icon class="float-right" ng-reflect-icon="fas,angle-right"></fa-icon>
         </h3>
       </div>
     `);
diff --git a/src/app/shared/components/filter/filter-swatch-images/__snapshots__/filter-swatch-images.component.spec.ts.snap b/src/app/shared/components/filter/filter-swatch-images/__snapshots__/filter-swatch-images.component.spec.ts.snap
index 5d3e6de6f9..4646bd507f 100644
--- a/src/app/shared/components/filter/filter-swatch-images/__snapshots__/filter-swatch-images.component.spec.ts.snap
+++ b/src/app/shared/components/filter/filter-swatch-images/__snapshots__/filter-swatch-images.component.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Filter Swatch Images Component should be created 1`] = `
-<ul class="filter-list clearfix">
+<ul class="filter-list clearfix" id="filter-list_Color">
   <li class="filter-item filter-color">
     <a
       class="filter-swatch"
diff --git a/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html b/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html
index 3462e23039..a1a6b93ba6 100644
--- a/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html
+++ b/src/app/shared/components/filter/filter-swatch-images/filter-swatch-images.component.html
@@ -1,4 +1,4 @@
-<ul class="filter-list clearfix">
+<ul class="filter-list clearfix" [id]="'filter-list_' + filterElement.name">
   <ng-container *ngFor="let facet of filterElement.facets">
     <li class="filter-item filter-color" [ngClass]="{ 'filter-selected': facet.selected }">
       <a
diff --git a/src/app/shared/components/filter/filter-text/filter-text.component.html b/src/app/shared/components/filter/filter-text/filter-text.component.html
index 0fdd2d531a..8aca0568a7 100644
--- a/src/app/shared/components/filter/filter-text/filter-text.component.html
+++ b/src/app/shared/components/filter/filter-text/filter-text.component.html
@@ -1,4 +1,4 @@
-<ul class="filter-list">
+<ul class="filter-list" [id]="'filter-list_' + filterElement.name">
   <ng-container *ngFor="let facet of getFacets()">
     <li class="filter-item filter-layer{{ facet.level }}" [ngClass]="{ 'filter-selected': facet.selected }">
       <!-- selected -->
diff --git a/src/app/shared/components/filter/filter-text/filter-text.component.spec.ts b/src/app/shared/components/filter/filter-text/filter-text.component.spec.ts
index 5d708e7192..043afc21bf 100644
--- a/src/app/shared/components/filter/filter-text/filter-text.component.spec.ts
+++ b/src/app/shared/components/filter/filter-text/filter-text.component.spec.ts
@@ -38,7 +38,7 @@ describe('Filter Text Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
-      <ul class="filter-list">
+      <ul class="filter-list" id="filter-list_Brands">
         <li class="filter-item filter-layer0">
           <a
             class="filter-item-name"
diff --git a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
index 9e628594e6..af8f683237 100644
--- a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
+++ b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
@@ -30,6 +30,8 @@
         class="list-view-link"
         [ngClass]="{ 'list-active': listView }"
         data-testing-id="list-view-link"
+        role="button"
+        aria-label="list view"
       >
         <fa-icon [icon]="['fas', 'list']"></fa-icon>
       </a>
@@ -42,6 +44,8 @@
         class="grid-view-link"
         [ngClass]="{ 'grid-active': gridView }"
         data-testing-id="grid-view-link"
+        role="button"
+        aria-label="grid view"
       >
         <fa-icon [icon]="['fas', 'th']"></fa-icon>
       </a>
diff --git a/src/app/shared/components/product/product-quantity/product-quantity.component.html b/src/app/shared/components/product/product-quantity/product-quantity.component.html
index 763e5f14f2..35f95de595 100644
--- a/src/app/shared/components/product/product-quantity/product-quantity.component.html
+++ b/src/app/shared/components/product/product-quantity/product-quantity.component.html
@@ -58,6 +58,7 @@
           [step]="step$ | async"
           (change)="change($event.target)"
           (keyup)="change($event.target)"
+          aria-label="quantity"
         />
       </div>
     </ng-template>
diff --git a/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts b/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
index 5c7745ae87..c00e83c8ed 100644
--- a/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
+++ b/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
@@ -60,6 +60,7 @@ describe('Product Quantity Component', () => {
         data-testing-id="quantity"
         type="number"
         pattern="[0-9]*"
+        aria-label="quantity"
         class="form-control text-center"
         id="ASDF"
         min="2"
diff --git a/src/app/shared/components/search/search-box/search-box.component.html b/src/app/shared/components/search/search-box/search-box.component.html
index e0864ae620..551316dade 100644
--- a/src/app/shared/components/search/search-box/search-box.component.html
+++ b/src/app/shared/components/search/search-box/search-box.component.html
@@ -1,9 +1,9 @@
-<div role="search" class="search clearfix">
+<div class="search clearfix">
   <input
     #searchInput
     [placeholder]="configuration?.placeholder || ''"
     autocomplete="off"
-    type="text"
+    type="search"
     class="form-control searchTerm"
     (input)="searchSuggest($event.target)"
     [value]="inputSearchTerms$ | async"
diff --git a/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap b/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
index daab702f36..1a720d4f0a 100644
--- a/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
+++ b/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
@@ -54,8 +54,8 @@ exports[`Header Default Component should render normal header adequately for des
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
@@ -117,8 +117,8 @@ exports[`Header Default Component should render normal header adequately for mob
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
@@ -181,8 +181,8 @@ exports[`Header Default Component should render normal header adequately for tab
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
@@ -236,8 +236,8 @@ exports[`Header Default Component should render sticky header adequately for des
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
@@ -291,8 +291,8 @@ exports[`Header Default Component should render sticky header adequately for mob
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
@@ -346,8 +346,8 @@ exports[`Header Default Component should render sticky header adequately for tab
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
-      <div role="navigation" class="main-navigation">
+    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
       </div>
diff --git a/src/app/shell/header/header-default/header-default.component.html b/src/app/shell/header/header-default/header-default.component.html
index bd448dc48c..7bf6c3f867 100644
--- a/src/app/shell/header/header-default/header-default.component.html
+++ b/src/app/shell/header/header-default/header-default.component.html
@@ -93,8 +93,8 @@
   </button>
 
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" [ngbCollapse]="!showNavBar">
-      <div class="main-navigation" role="navigation">
+    <nav class="global-nav navbar-expand-md" [ngbCollapse]="!showNavBar" aria-label="main">
+      <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation>
         <ish-user-information-mobile></ish-user-information-mobile>
       </div>
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
index 3a5765205a..5bec795a5d 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.html
+++ b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -18,7 +18,12 @@
       {{ category.name }}
     </a>
     <ng-container *ngIf="0 < mainNavigationMaxSubCategoriesDepth && category.hasChildren">
-      <a [routerLink]="[]" class="dropdown-toggle" (click)="toggleOpen(category.uniqueId)">
+      <a
+        [routerLink]="[]"
+        class="dropdown-toggle"
+        (click)="toggleOpen(category.uniqueId)"
+        [attr.aria-label]="isOpened(category.uniqueId) ? 'collapse ' + category.name : 'expand ' + category.name"
+      >
         <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
       </a>
@@ -29,5 +34,8 @@
       ></ish-sub-category-navigation>
     </ng-container>
   </li>
-  <ish-lazy-content-include includeId="include.header.navigation.pagelet2-Include"></ish-lazy-content-include>
+  <ish-lazy-content-include
+    includeId="include.header.navigation.pagelet2-Include"
+    role="listitem"
+  ></ish-lazy-content-include>
 </ul>
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
index 45036366f8..3a8d5d1fcc 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
+++ b/src/app/shell/header/header-navigation/header-navigation.component.spec.ts
@@ -80,6 +80,7 @@ describe('Header Navigation Component', () => {
         </li>
         <ish-lazy-content-include
           includeid="include.header.navigation.pagelet2-Include"
+          role="listitem"
           ng-reflect-include-id="include.header.navigation.page"
         ></ish-lazy-content-include>
       </ul>
diff --git a/src/app/shell/header/language-switch/language-switch.component.html b/src/app/shell/header/language-switch/language-switch.component.html
index 8ed32d94be..c3629556e1 100644
--- a/src/app/shell/header/language-switch/language-switch.component.html
+++ b/src/app/shell/header/language-switch/language-switch.component.html
@@ -6,20 +6,20 @@
   ngbDropdown
   placement="{{ placement === 'up' ? 'top-right' : 'bottom-right' }}"
 >
-  <a ngbDropdownToggle class="language-switch-link">
+  <a ngbDropdownToggle class="language-switch-link" role="button" aria-haspopup="menu">
     <fa-icon [icon]="['fas', 'globe-americas']" class="header-icon"></fa-icon>
     <span class="language-switch-current-selection d-inline"
       >{{ 'locale.' + locale + (view === 'accordion' ? '.long' : '.short') | translate
       }}<span class="switch_arrow"></span
     ></span>
   </a>
-  <div ngbDropdownMenu class="language-switch-container dropdown-menu" style="left: 0 !important">
+  <div ngbDropdownMenu class="language-switch-container dropdown-menu" style="left: 0 !important" role="menu">
     <div class="language-switch-menu-container">
       <ng-container *ngIf="availableLocales$ | async as availableLocales">
         <ul *ngIf="availableLocales.length">
           <ng-container *ngFor="let l of availableLocales">
             <li *ngIf="l !== locale">
-              <a [href]="location | makeHref : { lang: l } | async">
+              <a [href]="location | makeHref : { lang: l } | async" role="menuitem">
                 {{ 'locale.' + l + '.long' | translate }}
               </a>
             </li>
diff --git a/src/app/shell/header/language-switch/language-switch.component.spec.ts b/src/app/shell/header/language-switch/language-switch.component.spec.ts
index 8f380622c9..ccc7ae3cab 100644
--- a/src/app/shell/header/language-switch/language-switch.component.spec.ts
+++ b/src/app/shell/header/language-switch/language-switch.component.spec.ts
@@ -63,8 +63,8 @@ describe('Language Switch Component', () => {
     expect(element.querySelectorAll('li')).toHaveLength(2);
     expect(element.querySelectorAll('[href]')).toMatchInlineSnapshot(`
       NodeList [
-        <a href="en_US"> English (United States) </a>,
-        <a href="fr_FR"> Français (France) </a>,
+        <a role="menuitem" href="en_US"> English (United States) </a>,
+        <a role="menuitem" href="fr_FR"> Français (France) </a>,
       ]
     `);
     expect(element.querySelector('.language-switch-current-selection').textContent).toMatchInlineSnapshot(`"Deutsch"`);
diff --git a/src/app/shell/header/login-status/login-status.component.html b/src/app/shell/header/login-status/login-status.component.html
index 3f1bca6e9e..365d45e7d1 100644
--- a/src/app/shell/header/login-status/login-status.component.html
+++ b/src/app/shell/header/login-status/login-status.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="logoutOnly; else loginStatus">
   <ng-container *ngIf="user$ | async as user; else notLoggedIn">
-    <a routerLink="/logout" data-testing-id="link-logout">
+    <a routerLink="/logout" data-testing-id="link-logout" aria-label="logout">
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span *ngIf="view !== 'small'"> {{ 'account.logout.link' | translate }} </span>
     </a>
@@ -11,7 +11,7 @@
 <ng-template #loginStatus>
   <!-- logged in -->
   <ng-container *ngIf="user$ | async as user; else notLoggedIn">
-    <a routerLink="/account" class="my-account-link" data-testing-id="link-myaccount">
+    <a routerLink="/account" class="my-account-link" data-testing-id="link-myaccount" aria-label="account">
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span *ngIf="user.lastName; else nameNotDisplayed" class="login-name" [ngClass]="getViewClasses()">{{
         user.firstName + ' ' + user.lastName
@@ -23,7 +23,7 @@
       >
     </a>
     <span class="separator" [ngClass]="getViewClasses()">&#124;</span>
-    <a routerLink="/logout" class="my-account-link my-account-logout" data-testing-id="link-logout">
+    <a routerLink="/logout" class="my-account-link my-account-logout" data-testing-id="link-logout" aria-label="logout">
       <span [ngClass]="getViewClasses()">{{ 'account.logout.link' | translate }}</span>
     </a>
   </ng-container>
@@ -34,6 +34,7 @@
       [queryParams]="{ returnUrl: '/account' }"
       class="my-account-link my-account-login"
       rel="nofollow"
+      aria-label="login"
     >
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span [ngClass]="getViewClasses()">{{ 'account.login.link' | translate }}</span>
@@ -44,6 +45,7 @@
       [queryParams]="{ returnUrl: '/account' }"
       class="my-account-link my-account-register"
       rel="nofollow"
+      aria-label="register"
       ><span [ngClass]="getViewClasses()">{{ 'account.register.link' | translate }}</span>
     </a>
   </ng-template>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
index 5d3f82270c..b0a5b369d6 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
@@ -21,6 +21,9 @@
         class="dropdown-toggle"
         [ngClass]="{ 'd-none': view === 'full' }"
         (click)="toggleOpen(subcategory.uniqueId)"
+        [attr.aria-label]="
+          isOpened(subcategory.uniqueId) ? 'collapse ' + subcategory.name : 'expand ' + subcategory.name
+        "
       >
         <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
index db19378b70..012c89d017 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
@@ -61,7 +61,7 @@ describe('Sub Category Navigation Component', () => {
       <ul class="category-level1 dropdown-menu">
         <li class="main-navigation-level1-item">
           <a ng-reflect-router-link="/CAT_A1-catA.1" href="/CAT_A1-catA.1">CAT_A1</a
-          ><a class="dropdown-toggle" ng-reflect-router-link="" href="/"
+          ><a class="dropdown-toggle" ng-reflect-router-link="" aria-label="expand CAT_A1" href="/"
             ><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
           ><ish-sub-category-navigation
             ng-reflect-category-unique-id="A.1"