From 9c2f1285855d0710a4b90f0de53619cc65a108bf Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Fri, 11 Oct 2019 10:35:24 -0400
Subject: [PATCH] ally title work

---
 .../accept-organization.component.html        |   3 +-
 src/app/accounts/hint.component.html          |   2 +-
 src/app/accounts/lock.component.html          |   4 +-
 src/app/accounts/login.component.html         |   6 +-
 .../accounts/recover-delete.component.html    |   2 +-
 .../recover-two-factor.component.html         |   2 +-
 src/app/accounts/register.component.html      |  12 +--
 src/app/accounts/two-factor.component.html    |   8 +-
 .../verify-email-token.component.html         |   3 +-
 .../verify-recover-delete.component.html      |   2 +-
 src/app/layouts/navbar.component.html         |   4 +-
 .../manage/collection-add-edit.component.html |  18 ++--
 .../manage/entity-events.component.html       |  11 +-
 .../manage/entity-users.component.html        |  10 +-
 .../manage/events.component.html              |  10 +-
 .../manage/group-add-edit.component.html      |  11 +-
 .../manage/groups.component.html              |   5 +-
 .../manage/people.component.html              |  10 +-
 .../manage/user-add-edit.component.html       |  11 +-
 .../manage/user-confirm.component.html        |   2 +-
 .../manage/user-groups.component.html         |   5 +-
 .../settings/account.component.html           |   5 +-
 .../settings/adjust-seats.component.html      |   4 +-
 .../settings/api-key.component.html           |   2 +-
 .../settings/change-plan.component.html       |   2 +-
 .../delete-organization.component.html        |   2 +-
 .../settings/download-license.component.html  |   6 +-
 .../organization-subscription.component.html  |  16 +--
 .../settings/rotate-api-key.component.html    |   2 +-
 .../organizations/vault/vault.component.html  |   7 +-
 src/app/settings/add-credit.component.html    |   6 +-
 .../settings/adjust-payment.component.html    |   6 +-
 .../settings/adjust-storage.component.html    |   6 +-
 src/app/settings/change-email.component.html  |   2 +-
 src/app/settings/change-kdf.component.html    |  10 +-
 .../settings/change-password.component.html   |   6 +-
 .../deauthorize-sessions.component.html       |   2 +-
 .../settings/delete-account.component.html    |   2 +-
 src/app/settings/domain-rules.component.html  |  15 +--
 src/app/settings/options.component.html       |  12 +--
 src/app/settings/organizations.component.html |  29 +++--
 src/app/settings/payment.component.html       |   4 +-
 src/app/settings/premium.component.html       |   4 +-
 src/app/settings/profile.component.html       |   9 +-
 src/app/settings/purge-vault.component.html   |   2 +-
 .../two-factor-authenticator.component.html   |   4 +-
 .../settings/two-factor-duo.component.html    |   2 +-
 .../settings/two-factor-email.component.html  |   4 +-
 .../settings/two-factor-setup.component.html  |   9 +-
 .../settings/two-factor-u2f.component.html    |  23 ++--
 .../settings/two-factor-verify.component.html |   2 +-
 .../two-factor-yubikey.component.html         |   8 +-
 src/app/settings/update-key.component.html    |   2 +-
 .../settings/update-license.component.html    |   2 +-
 src/app/settings/user-billing.component.html  |  11 +-
 .../settings/user-subscription.component.html |  16 +--
 src/app/settings/verify-email.component.html  |   4 +-
 src/app/tools/breach-report.component.html    |   2 +-
 src/app/tools/export.component.html           |   2 +-
 .../exposed-passwords-report.component.html   |  14 ++-
 src/app/tools/import.component.html           |   2 +-
 .../inactive-two-factor-report.component.html |  18 +++-
 .../password-generator-history.component.html |  12 ++-
 .../tools/password-generator.component.html   |   4 +-
 .../reused-passwords-report.component.html    |  18 +++-
 .../unsecured-websites-report.component.html  |  18 +++-
 .../weak-passwords-report.component.html      |  18 +++-
 src/app/vault/add-edit.component.html         | 102 +++++++++---------
 src/app/vault/attachments.component.html      |  14 +--
 src/app/vault/bulk-delete.component.html      |   6 +-
 src/app/vault/bulk-move.component.html        |   6 +-
 src/app/vault/bulk-share.component.html       |   6 +-
 src/app/vault/ciphers.component.html          |   5 +-
 src/app/vault/collections.component.html      |   2 +-
 src/app/vault/folder-add-edit.component.html  |  12 +--
 src/app/vault/groupings.component.html        |  16 +--
 src/app/vault/share.component.html            |   6 +-
 src/app/vault/vault.component.html            |  11 +-
 src/index.html                                |   2 +-
 79 files changed, 407 insertions(+), 278 deletions(-)

diff --git a/src/app/accounts/accept-organization.component.html b/src/app/accounts/accept-organization.component.html
index 6130bd2d04..6d3b3f511b 100644
--- a/src/app/accounts/accept-organization.component.html
+++ b/src/app/accounts/accept-organization.component.html
@@ -2,7 +2,8 @@
     <div>
         <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </p>
     </div>
 </div>
diff --git a/src/app/accounts/hint.component.html b/src/app/accounts/hint.component.html
index ca960438a4..02b2299de0 100644
--- a/src/app/accounts/hint.component.html
+++ b/src/app/accounts/hint.component.html
@@ -14,7 +14,7 @@
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span [hidden]="form.loading">{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/accounts/lock.component.html b/src/app/accounts/lock.component.html
index 79570be25a..6c5f0b4f4d 100644
--- a/src/app/accounts/lock.component.html
+++ b/src/app/accounts/lock.component.html
@@ -13,9 +13,9 @@
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
                                 name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
                                 required appAutofocus appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}"
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword()">
-                                <i class="fa fa-lg"
+                                <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
diff --git a/src/app/accounts/login.component.html b/src/app/accounts/login.component.html
index 96843523db..cb3bfce1a6 100644
--- a/src/app/accounts/login.component.html
+++ b/src/app/accounts/login.component.html
@@ -16,9 +16,9 @@
                             <input id="masterPassword" type="{{showPassword ? 'text' : 'password'}}"
                                 name="MasterPassword" class="text-monospace form-control" [(ngModel)]="masterPassword"
                                 required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}"
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword()">
-                                <i class="fa fa-lg"
+                                <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
@@ -37,7 +37,7 @@
                             <span>
                                 <i class="fa fa-sign-in"></i> {{'logIn' | i18n}}
                             </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/register" [queryParams]="{email: email}"
                             class="btn btn-outline-secondary btn-block ml-2 mt-0">
diff --git a/src/app/accounts/recover-delete.component.html b/src/app/accounts/recover-delete.component.html
index 4675769ed6..5a66a1319d 100644
--- a/src/app/accounts/recover-delete.component.html
+++ b/src/app/accounts/recover-delete.component.html
@@ -14,7 +14,7 @@
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/accounts/recover-two-factor.component.html b/src/app/accounts/recover-two-factor.component.html
index d0f186ddc2..6bd1ec294f 100644
--- a/src/app/accounts/recover-two-factor.component.html
+++ b/src/app/accounts/recover-two-factor.component.html
@@ -27,7 +27,7 @@
                     <div class="d-flex">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/accounts/register.component.html b/src/app/accounts/register.component.html
index b184b94aa5..74d6b1d72d 100644
--- a/src/app/accounts/register.component.html
+++ b/src/app/accounts/register.component.html
@@ -32,9 +32,9 @@
                                 </app-password-strength>
                             </div>
                             <div>
-                                <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}"
-                                    (click)="togglePassword(false)">
-                                    <i class="fa fa-lg"
+                                <button type="button" class="ml-1 btn btn-link"
+                                    appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword(false)">
+                                    <i class="fa fa-lg" aria-hidden="true"
                                         [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                 </button>
                                 <div class="progress-bar invisible"></div>
@@ -48,9 +48,9 @@
                             <input id="masterPasswordRetype" type="{{showPassword ? 'text' : 'password'}}"
                                 name="MasterPasswordRetype" class="text-monospace form-control"
                                 [(ngModel)]="confirmMasterPassword" required appInputVerbatim>
-                            <button type="button" class="ml-1 btn btn-link" title="{{'toggleVisibility' | i18n}}"
+                            <button type="button" class="ml-1 btn btn-link" appA11yTitle="{{'toggleVisibility' | i18n}}"
                                 (click)="togglePassword(true)">
-                                <i class="fa fa-lg"
+                                <i class="fa fa-lg" aria-hidden="true"
                                     [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                             </button>
                         </div>
@@ -64,7 +64,7 @@
                     <div class="d-flex mb-2">
                         <button type="submit" class="btn btn-primary btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'submit' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/accounts/two-factor.component.html b/src/app/accounts/two-factor.component.html
index b331af8b5f..94f516854d 100644
--- a/src/app/accounts/two-factor.component.html
+++ b/src/app/accounts/two-factor.component.html
@@ -35,7 +35,9 @@
                     </ng-container>
                     <ng-container *ngIf="selectedProviderType === providerType.U2f">
                         <p class="text-center" *ngIf="!u2fReady">
-                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
                         </p>
                         <ng-container *ngIf="u2fReady">
                             <p class="text-center">{{'insertU2f' | i18n}}</p>
@@ -49,7 +51,7 @@
                         </div>
                     </ng-container>
                     <i class="fa fa-spinner text-muted fa-spin pull-right" title="{{'loading' | i18n}}"
-                        *ngIf="form.loading && selectedProviderType === providerType.U2f"></i>
+                        *ngIf="form.loading && selectedProviderType === providerType.U2f" aria-hidden="true"></i>
                     <div class="form-check" *ngIf="selectedProviderType != null">
                         <input id="remember" type="checkbox" name="Remember" class="form-check-input"
                             [(ngModel)]="remember">
@@ -67,7 +69,7 @@
                             <span>
                                 <i class="fa fa-sign-in"></i> {{'continue' | i18n}}
                             </span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/accounts/verify-email-token.component.html b/src/app/accounts/verify-email-token.component.html
index 2bd2a777b3..03f68183b9 100644
--- a/src/app/accounts/verify-email-token.component.html
+++ b/src/app/accounts/verify-email-token.component.html
@@ -2,7 +2,8 @@
     <div>
         <img src="../../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
         <p class="text-center">
-            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin fa-2x text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </p>
     </div>
 </div>
diff --git a/src/app/accounts/verify-recover-delete.component.html b/src/app/accounts/verify-recover-delete.component.html
index a107259d9a..7cbbfbc179 100644
--- a/src/app/accounts/verify-recover-delete.component.html
+++ b/src/app/accounts/verify-recover-delete.component.html
@@ -13,7 +13,7 @@
                     <div class="d-flex">
                         <button type="submit" class="btn btn-danger btn-block btn-submit" [disabled]="form.loading">
                             <span>{{'deleteAccount' | i18n}}</span>
-                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         </button>
                         <a routerLink="/" class="btn btn-outline-secondary btn-block ml-2 mt-0">
                             {{'cancel' | i18n}}
diff --git a/src/app/layouts/navbar.component.html b/src/app/layouts/navbar.component.html
index e978296bfb..a3b08df1d4 100644
--- a/src/app/layouts/navbar.component.html
+++ b/src/app/layouts/navbar.component.html
@@ -1,7 +1,7 @@
 <nav class="navbar navbar-expand navbar-dark bg-primary" [ngClass]="{'bg-secondary-alt': selfHosted}">
     <div class="container">
-        <a class="navbar-brand" routerLink="/" title="{{'pageTitle' | i18n : 'Bitwarden'}}">
-            <i class="fa fa-shield"></i>
+        <a class="navbar-brand" routerLink="/" appA11yTitle="{{'pageTitle' | i18n : 'Bitwarden'}}">
+            <i class="fa fa-shield" aria-hidden="true"></i>
         </a>
         <div class="collapse navbar-collapse">
             <ul class="navbar-nav">
diff --git a/src/app/organizations/manage/collection-add-edit.component.html b/src/app/organizations/manage/collection-add-edit.component.html
index 00a6dd46d6..3993423ae8 100644
--- a/src/app/organizations/manage/collection-add-edit.component.html
+++ b/src/app/organizations/manage/collection-add-edit.component.html
@@ -8,7 +8,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <div class="form-group">
@@ -51,8 +52,11 @@
                                 </td>
                                 <td (click)="check(g)">
                                     {{g.name}}
-                                    <i class="fa fa-th text-muted fa-fw" *ngIf="g.accessAll"
-                                        title="This group can access all items"></i>
+                                    <ng-container *ngIf="g.accessAll">
+                                        <i class="fa fa-th text-muted fa-fw" title="{{'groupAccessAllItems' | i18n}}"
+                                            aria-hidden="true"></i>
+                                        <span class="sr-only">{{'groupAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                 </td>
                                 <td class="text-center">
                                     <input type="checkbox" [(ngModel)]="g.readOnly" name="Groups[{{i}}].ReadOnly"
@@ -65,18 +69,18 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
                     data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/organizations/manage/entity-events.component.html b/src/app/organizations/manage/entity-events.component.html
index 5333260968..32d4e51e98 100644
--- a/src/app/organizations/manage/entity-events.component.html
+++ b/src/app/organizations/manage/entity-events.component.html
@@ -11,7 +11,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="!loaded">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="loaded">
                 <div class="d-flex">
@@ -50,10 +51,12 @@
                         <tr *ngFor="let e of events">
                             <td>{{e.date | date:'medium'}}</td>
                             <td>
-                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                                <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"
+                                    aria-hidden="true"></i>
+                                <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                             </td>
                             <td *ngIf="showUser">
-                                <span title="{{e.userEmail}}">{{e.userName}}</span>
+                                <span appA11yTitle="{{e.userEmail}}">{{e.userName}}</span>
                             </td>
                             <td [innerHTML]="e.message"></td>
                         </tr>
@@ -61,7 +64,7 @@
                 </table>
                 <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
                     (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'loadMore' | i18n}}</span>
                 </button>
             </div>
diff --git a/src/app/organizations/manage/entity-users.component.html b/src/app/organizations/manage/entity-users.component.html
index d5230c1e85..0045268439 100644
--- a/src/app/organizations/manage/entity-users.component.html
+++ b/src/app/organizations/manage/entity-users.component.html
@@ -11,7 +11,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading || !users">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body"
                 *ngIf="!loading && users && (users | search:searchText:'name':'email':'id') as searchedUsers">
@@ -72,7 +73,10 @@
                                     <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                                 </td>
                                 <td *ngIf="entity === 'collection'">
-                                    <i class="fa fa-th" *ngIf="u.accessAll" title="{{'userAccessAllItems' | i18n}}"></i>
+                                    <ng-container *ngIf="u.accessAll">
+                                        <i class="fa fa-th" title="{{'userAccessAllItems' | i18n}}"></i>
+                                        <span class="sr-only">{{'userAccessAllItems' | i18n}}</span>
+                                    </ng-container>
                                 </td>
                                 <td>
                                     <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
@@ -91,7 +95,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/organizations/manage/events.component.html b/src/app/organizations/manage/events.component.html
index f95720172d..6f5d7ebf54 100644
--- a/src/app/organizations/manage/events.component.html
+++ b/src/app/organizations/manage/events.component.html
@@ -17,7 +17,10 @@
         </button>
     </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!loaded">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="loaded">
     <p *ngIf="!events || !events.length">{{'noEventsInList' | i18n}}</p>
     <table class="table table-hover" *ngIf="events && events.length">
@@ -35,7 +38,8 @@
             <tr *ngFor="let e of events">
                 <td>{{e.date | date:'medium'}}</td>
                 <td>
-                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}"></i>
+                    <i class="text-muted fa fa-lg {{e.appIcon}}" title="{{e.appName}}, {{e.ip}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{e.appName}}, {{e.ip}}</span>
                 </td>
                 <td>
                     <span title="{{e.userEmail}}">{{e.userName}}</span>
@@ -46,7 +50,7 @@
     </table>
     <button #moreBtn [appApiAction]="morePromise" type="button" class="btn btn-block btn-link btn-submit"
         (click)="loadEvents(false)" [disabled]="loaded && moreBtn.loading" *ngIf="continuationToken">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'loadMore' | i18n}}</span>
     </button>
 </ng-container>
diff --git a/src/app/organizations/manage/group-add-edit.component.html b/src/app/organizations/manage/group-add-edit.component.html
index 1a59e55e54..dc9e35cd93 100644
--- a/src/app/organizations/manage/group-add-edit.component.html
+++ b/src/app/organizations/manage/group-add-edit.component.html
@@ -8,7 +8,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <div class="form-group">
@@ -81,17 +82,17 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
                     data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
-                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
+                        <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading" aria-hidden="true"
                             title="{{'loading' | i18n}}"></i>
                     </button>
                 </div>
diff --git a/src/app/organizations/manage/groups.component.html b/src/app/organizations/manage/groups.component.html
index 50e154d76b..6e2800f4ca 100644
--- a/src/app/organizations/manage/groups.component.html
+++ b/src/app/organizations/manage/groups.component.html
@@ -12,7 +12,10 @@
         </button>
     </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="!loading && (groups | search:searchText:'name':'id') as searchedGroups">
     <p *ngIf="!searchedGroups.length">{{'noGroupsInList' | i18n}}</p>
     <table class="table table-hover table-list" *ngIf="searchedGroups.length">
diff --git a/src/app/organizations/manage/people.component.html b/src/app/organizations/manage/people.component.html
index 4d8737f4e7..810ecb63fb 100644
--- a/src/app/organizations/manage/people.component.html
+++ b/src/app/organizations/manage/people.component.html
@@ -30,7 +30,10 @@
         </button>
     </div>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="!loading && (users | search:searchText:'name':'email':'id') as searchedUsers">
     <p *ngIf="!searchedUsers.length">{{'noUsersInList' | i18n}}</p>
     <ng-container *ngIf="searchedUsers.length">
@@ -53,7 +56,10 @@
                         <small class="text-muted d-block" *ngIf="u.name">{{u.name}}</small>
                     </td>
                     <td>
-                        <i class="fa fa-lock" *ngIf="u.twoFactorEnabled" title="{{'userUsingTwoStep' | i18n}}"></i>
+                        <ng-container *ngIf="u.twoFactorEnabled">
+                            <i class="fa fa-lock" title="{{'userUsingTwoStep' | i18n}}"></i>
+                            <span class="sr-only">{{'userUsingTwoStep' | i18n}}</span>
+                        </ng-container>
                     </td>
                     <td>
                         <span *ngIf="u.type === organizationUserType.Owner">{{'owner' | i18n}}</span>
diff --git a/src/app/organizations/manage/user-add-edit.component.html b/src/app/organizations/manage/user-add-edit.component.html
index 7510183be5..a0fc94dada 100644
--- a/src/app/organizations/manage/user-add-edit.component.html
+++ b/src/app/organizations/manage/user-add-edit.component.html
@@ -11,7 +11,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <ng-container *ngIf="!editMode">
@@ -116,18 +117,18 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
                     data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/organizations/manage/user-confirm.component.html b/src/app/organizations/manage/user-confirm.component.html
index 696d50eb67..15c5901eb0 100644
--- a/src/app/organizations/manage/user-confirm.component.html
+++ b/src/app/organizations/manage/user-confirm.component.html
@@ -27,7 +27,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'confirm' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
diff --git a/src/app/organizations/manage/user-groups.component.html b/src/app/organizations/manage/user-groups.component.html
index f7cdaa59d3..d8f68b084c 100644
--- a/src/app/organizations/manage/user-groups.component.html
+++ b/src/app/organizations/manage/user-groups.component.html
@@ -11,7 +11,8 @@
                 </button>
             </div>
             <div class="modal-body" *ngIf="loading">
-                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                <span class="sr-only">{{'loading' | i18n}}</span>
             </div>
             <div class="modal-body" *ngIf="!loading">
                 <p>{{'groupAccessUserDesc' | i18n}}</p>
@@ -33,7 +34,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
diff --git a/src/app/organizations/settings/account.component.html b/src/app/organizations/settings/account.component.html
index 62802e23f0..7ef7ce28c5 100644
--- a/src/app/organizations/settings/account.component.html
+++ b/src/app/organizations/settings/account.component.html
@@ -2,7 +2,8 @@
     <h1>{{'myOrganization' | i18n}}</h1>
 </div>
 <div *ngIf="loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <form *ngIf="org && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
@@ -27,7 +28,7 @@
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'save' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/organizations/settings/adjust-seats.component.html b/src/app/organizations/settings/adjust-seats.component.html
index c41e4d0f13..968334b79b 100644
--- a/src/app/organizations/settings/adjust-seats.component.html
+++ b/src/app/organizations/settings/adjust-seats.component.html
@@ -1,6 +1,6 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
             (click)="cancel()"><span aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addSeats' : 'removeSeats') | i18n}}</h3>
         <div class="row">
@@ -15,7 +15,7 @@
             | currency:'$'}} /{{interval | i18n}}
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/organizations/settings/api-key.component.html b/src/app/organizations/settings/api-key.component.html
index 9af80677a2..b77f3b5135 100644
--- a/src/app/organizations/settings/api-key.component.html
+++ b/src/app/organizations/settings/api-key.component.html
@@ -38,7 +38,7 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                     *ngIf="!clientSecret">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'viewApiKey' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/organizations/settings/change-plan.component.html b/src/app/organizations/settings/change-plan.component.html
index 5cc56c557c..bf6787dc83 100644
--- a/src/app/organizations/settings/change-plan.component.html
+++ b/src/app/organizations/settings/change-plan.component.html
@@ -1,6 +1,6 @@
 <div class="card card-org-plans">
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
             (click)="cancel()"><span aria-hidden="true">&times;</span></button>
         <h2 class="card-body-header">{{'changeBillingPlan' | i18n}}</h2>
         <p class="mb-0">{{'changeBillingPlanUpgrade' | i18n}}</p>
diff --git a/src/app/organizations/settings/delete-organization.component.html b/src/app/organizations/settings/delete-organization.component.html
index 176934c16f..8fe49e2462 100644
--- a/src/app/organizations/settings/delete-organization.component.html
+++ b/src/app/organizations/settings/delete-organization.component.html
@@ -16,7 +16,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'deleteOrganization' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/organizations/settings/download-license.component.html b/src/app/organizations/settings/download-license.component.html
index 5e2b9549f9..2a3e1b9adc 100644
--- a/src/app/organizations/settings/download-license.component.html
+++ b/src/app/organizations/settings/download-license.component.html
@@ -1,13 +1,13 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" appA11yTitle="{{'cancel' | i18n}}"
             (click)="cancel()"><span aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'downloadLicense' | i18n}}</h3>
         <div class="row">
             <div class="form-group col-6">
                 <div class="d-flex">
                     <label for="installationId">{{'enterInstallationId' | i18n}}</label>
-                    <a class="ml-auto" target="_blank" rel="noopener" title="{{'learnMore' | i18n}}"
+                    <a class="ml-auto" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}"
                         href="https://help.bitwarden.com/article/licensing-on-premise/#organization-account-sharing">
                         <i class="fa fa-question-circle-o"></i>
                     </a>
@@ -17,7 +17,7 @@
             </div>
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/organizations/settings/organization-subscription.component.html b/src/app/organizations/settings/organization-subscription.component.html
index cf9bcb58f6..b93c794b90 100644
--- a/src/app/organizations/settings/organization-subscription.component.html
+++ b/src/app/organizations/settings/organization-subscription.component.html
@@ -1,12 +1,16 @@
 <div class="page-header">
     <h1>
         {{'subscription' | i18n}}
-        <small>
-            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+        <small *ngIf="firstLoaded && loading">
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!firstLoaded && loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="sub">
     <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">
         {{'subscriptionCanceled' | i18n}}</app-callout>
@@ -14,7 +18,7 @@
         <p>{{'subscriptionPendingCanceled' | i18n}}</p>
         <button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()"
             [appApiAction]="reinstatePromise" [disabled]="reinstateBtn.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'reinstateSubscription' | i18n}}</span>
         </button>
     </app-callout>
@@ -77,7 +81,7 @@
         </div>
         <div class="card mt-3" *ngIf="showUpdateLicense">
             <div class="card-body">
-                <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+                <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}"
                     (click)="closeUpdateLicense(false)"><span aria-hidden="true">&times;</span></button>
                 <h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
                 <app-update-license [organizationId]="organizationId" (onUpdated)="closeUpdateLicense(true)"
@@ -97,7 +101,7 @@
             <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()"
                 [appApiAction]="cancelPromise" [disabled]="cancelBtn.loading"
                 *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
diff --git a/src/app/organizations/settings/rotate-api-key.component.html b/src/app/organizations/settings/rotate-api-key.component.html
index d74bb7949f..b58d172a9a 100644
--- a/src/app/organizations/settings/rotate-api-key.component.html
+++ b/src/app/organizations/settings/rotate-api-key.component.html
@@ -38,7 +38,7 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading"
                     *ngIf="!clientSecret">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'rotateApiKey' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/organizations/vault/vault.component.html b/src/app/organizations/vault/vault.component.html
index e36dca17a8..1b62948a47 100644
--- a/src/app/organizations/vault/vault.component.html
+++ b/src/app/organizations/vault/vault.component.html
@@ -11,8 +11,11 @@
                 <h1>
                     {{'vault' | i18n}}
                     <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
-                        <i *ngIf="actionSpinner.loading" class="fa fa-spinner fa-spin text-muted"
-                            title="{{'loading' | i18n}}"></i>
+                        <ng-container *ngIf="actionSpinner.loading">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </ng-container>
                     </small>
                 </h1>
                 <button type="button" class="btn btn-outline-primary btn-sm ml-auto" (click)="addCipher()">
diff --git a/src/app/settings/add-credit.component.html b/src/app/settings/add-credit.component.html
index 55a4d67341..2e80c81e14 100644
--- a/src/app/settings/add-credit.component.html
+++ b/src/app/settings/add-credit.component.html
@@ -1,7 +1,7 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{'addCredit' | i18n}}</h3>
         <div class="mb-4 text-lg" *ngIf="showOptions">
             <div class="form-check form-check-inline">
@@ -31,7 +31,7 @@
             <small class="form-text text-muted">{{'creditDelayed' | i18n}}</small>
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading || ppLoading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/adjust-payment.component.html b/src/app/settings/adjust-payment.component.html
index 2fca750982..aad11828f0 100644
--- a/src/app/settings/adjust-payment.component.html
+++ b/src/app/settings/adjust-payment.component.html
@@ -1,11 +1,11 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(currentType != null ? 'changePaymentMethod' : 'addPaymentMethod') | i18n}}</h3>
         <app-payment [hideBank]="!organizationId" [hideCredit]="true"></app-payment>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/adjust-storage.component.html b/src/app/settings/adjust-storage.component.html
index 3417756e0a..fee9be4308 100644
--- a/src/app/settings/adjust-storage.component.html
+++ b/src/app/settings/adjust-storage.component.html
@@ -1,7 +1,7 @@
 <form #form class="card" (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="card-body">
-        <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
-            (click)="cancel()"><span aria-hidden="true">&times;</span></button>
+        <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}" (click)="cancel()"><span
+                aria-hidden="true">&times;</span></button>
         <h3 class="card-body-header">{{(add ? 'addStorage' : 'removeStorage') | i18n}}</h3>
         <div class="row">
             <div class="form-group col-6">
@@ -16,7 +16,7 @@
             | currency:'$'}} /{{interval | i18n}}
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/change-email.component.html b/src/app/settings/change-email.component.html
index b2b2d5960a..ec8ed1e8b2 100644
--- a/src/app/settings/change-email.component.html
+++ b/src/app/settings/change-email.component.html
@@ -28,7 +28,7 @@
         </div>
     </ng-container>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span *ngIf="!tokenSent">{{'continue' | i18n}}</span>
         <span *ngIf="tokenSent">{{'changeEmail' | i18n}}</span>
     </button>
diff --git a/src/app/settings/change-kdf.component.html b/src/app/settings/change-kdf.component.html
index ed33d013de..50f5cd0ddf 100644
--- a/src/app/settings/change-kdf.component.html
+++ b/src/app/settings/change-kdf.component.html
@@ -14,8 +14,8 @@
             <div class="form-group mb-0">
                 <label for="kdf">{{'kdfAlgorithm' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/Key_derivation_function" target="_blank"
-                    rel="noopener" title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i>
+                    rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
                 <select id="kdf" name="Kdf" [(ngModel)]="kdf" class="form-control" required>
                     <option *ngFor="let o of kdfOptions" [ngValue]="o.value">{{o.name}}</option>
@@ -26,8 +26,8 @@
             <div class="form-group mb-0">
                 <label for="kdfIterations">{{'kdfIterations' | i18n}}</label>
                 <a class="ml-auto" href="https://en.wikipedia.org/wiki/PBKDF2" target="_blank" rel="noopener"
-                    title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i>
+                    appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
                 <input id="kdfIterations" type="number" min="5000" max="2000000" name="KdfIterations"
                     class="form-control" [(ngModel)]="kdfIterations" required>
@@ -43,7 +43,7 @@
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'changeKdf' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/settings/change-password.component.html b/src/app/settings/change-password.component.html
index cb3cfdcf86..d95bf0babf 100644
--- a/src/app/settings/change-password.component.html
+++ b/src/app/settings/change-password.component.html
@@ -36,13 +36,13 @@
                 {{'rotateAccountEncKey' | i18n}}
             </label>
             <a href="https://help.bitwarden.com/article/change-your-master-password/#rotating-your-accounts-encryption-key"
-                target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+                target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'changeMasterPassword' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/settings/deauthorize-sessions.component.html b/src/app/settings/deauthorize-sessions.component.html
index 569a3da5b7..dea74b2f7d 100644
--- a/src/app/settings/deauthorize-sessions.component.html
+++ b/src/app/settings/deauthorize-sessions.component.html
@@ -16,7 +16,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'deauthorizeSessions' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/settings/delete-account.component.html b/src/app/settings/delete-account.component.html
index 8c7767d79f..2dc71a18aa 100644
--- a/src/app/settings/delete-account.component.html
+++ b/src/app/settings/delete-account.component.html
@@ -16,7 +16,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'deleteAccount' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/settings/domain-rules.component.html b/src/app/settings/domain-rules.component.html
index d4d21464fe..3248a77e05 100644
--- a/src/app/settings/domain-rules.component.html
+++ b/src/app/settings/domain-rules.component.html
@@ -5,7 +5,8 @@
 <form #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <h2>{{'customEqDomains' | i18n}}</h2>
     <p *ngIf="loading">
-        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
     </p>
     <ng-container *ngIf="!loading">
         <div class="form-group d-flex" *ngFor="let d of custom; let i = index; trackBy: indexTrackBy">
@@ -14,8 +15,9 @@
                 <textarea class="form-control" name="CustomDomain[{{i}}]" id="customDomain_{{i}}"
                     [(ngModel)]="custom[i]" placeholder="{{'ex' | i18n}} google.com, gmail.com" required></textarea>
             </div>
-            <button type="button" class="btn btn-link text-danger ml-2" (click)="remove(i)" title="{{'remove' | i18n}}">
-                <i class="fa fa-minus-circle fa-lg"></i>
+            <button type="button" class="btn btn-link text-danger ml-2" (click)="remove(i)"
+                appA11yTitle="{{'remove' | i18n}}">
+                <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
             </button>
         </div>
         <button type="button" (click)="add()" class="btn btn-outline-secondary btn-sm mb-2">
@@ -24,12 +26,13 @@
         <small class="text-muted d-block mb-3">{{'newCustomDomainDesc' | i18n}}</small>
     </ng-container>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'save' | i18n}}</span>
     </button>
     <h2 class="spaced-header">{{'globalEqDomains' | i18n}}</h2>
     <p *ngIf="loading">
-        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
     </p>
     <table class="table table-hover table-list" *ngIf="!loading && global.length > 0">
         <tbody>
@@ -63,7 +66,7 @@
         </tbody>
     </table>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'save' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/settings/options.component.html b/src/app/settings/options.component.html
index b7cad03611..6ecc33565e 100644
--- a/src/app/settings/options.component.html
+++ b/src/app/settings/options.component.html
@@ -20,8 +20,8 @@
                 <div class="d-flex">
                     <label for="locale">{{'language' | i18n}}</label>
                     <a class="ml-auto" href="https://help.bitwarden.com/article/localization/" target="_blank"
-                        rel="noopener" title="{{'learnMore' | i18n}}">
-                        <i class="fa fa-question-circle-o"></i>
+                        rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                     </a>
                 </div>
                 <select id="locale" name="Locale" [(ngModel)]="locale" class="form-control">
@@ -39,8 +39,8 @@
                 {{'disableIcons' | i18n}}
             </label>
             <a href="https://help.bitwarden.com/article/website-icons/" target="_blank" rel="noopener"
-                title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+                appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </div>
         <small class="form-text text-muted">{{'disableIconsDesc' | i18n}}</small>
@@ -52,8 +52,8 @@
             <label class="form-check-label" for="enableGravatars">
                 {{'enableGravatars' | i18n}}
             </label>
-            <a href="https://gravatar.com/" target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                <i class="fa fa-question-circle-o"></i>
+            <a href="https://gravatar.com/" target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                <i class="fa fa-question-circle-o" aria-hidden="true"></i>
             </a>
         </div>
         <small class="form-text text-muted">{{'enableGravatarsDesc' | i18n}}</small>
diff --git a/src/app/settings/organizations.component.html b/src/app/settings/organizations.component.html
index 053e9a130e..ca3dce9ec3 100644
--- a/src/app/settings/organizations.component.html
+++ b/src/app/settings/organizations.component.html
@@ -1,14 +1,18 @@
 <ng-container *ngIf="vault">
     <p *ngIf="!loaded" class="text-muted">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
     </p>
     <ng-container *ngIf="loaded">
         <ul class="fa-ul card-ul carets" *ngIf="organizations && organizations.length">
             <li *ngFor="let o of organizations">
                 <a [routerLink]="['/organizations', o.id]" class="text-body">
-                    <i class="fa-li fa fa-caret-right"></i> {{o.name}}
-                    <i *ngIf="!o.enabled" class="fa fa-exclamation-triangle text-danger"
-                        title="{{'organizationIsDisabled' | i18n}}"></i>
+                    <i class="fa-li fa fa-caret-right" aria-hidden="true"></i> {{o.name}}
+                    <ng-container *ngIf="!o.enabled">
+                        <i class="fa fa-exclamation-triangle text-danger" title="{{'organizationIsDisabled' | i18n}}"
+                            aria-hidden="true"></i>
+                        <span class="sr-only">{{'organizationIsDisabled' | i18n}}</span>
+                    </ng-container>
                 </a>
             </li>
         </ul>
@@ -24,7 +28,10 @@
         <h1>
             {{'organizations' | i18n}}
             <small [appApiAction]="actionPromise" #action>
-                <i class="fa fa-spinner fa-spin text-muted" *ngIf="action.loading" title="{{'loading' | i18n}}"></i>
+                <ng-container *ngIf="action.loading">
+                    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{'loading' | i18n}}</span>
+                </ng-container>
             </small>
         </h1>
         <a href="#" routerLink="/settings/create-organization" class="btn btn-sm btn-outline-primary ml-auto"
@@ -33,7 +40,10 @@
             {{'newOrganization' | i18n}}
         </a>
     </div>
-    <i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+    <ng-container *ngIf="!loaded">
+        <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
+    </ng-container>
     <ng-container *ngIf="loaded">
         <ng-container *ngIf="!organizations || !organizations.length">
             <p>{{'noOrganizationsList' | i18n}}</p>
@@ -50,8 +60,11 @@
                     </td>
                     <td>
                         <a href="#" [routerLink]="['/organizations', o.id]">{{o.name}}</a>
-                        <i *ngIf="!o.enabled" class="fa fa-exclamation-triangle text-danger"
-                            title="{{'organizationIsDisabled' | i18n}}"></i>
+                        <ng-container *ngIf="!o.enabled">
+                            <i class="fa fa-exclamation-triangle text-danger"
+                                title="{{'organizationIsDisabled' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'organizationIsDisabled' | i18n}}</span>
+                        </ng-container>
                     </td>
                     <td class="table-list-options">
                         <div class="dropdown" appListDropdown>
diff --git a/src/app/settings/payment.component.html b/src/app/settings/payment.component.html
index 1ba929ecbf..2cdd97e17f 100644
--- a/src/app/settings/payment.component.html
+++ b/src/app/settings/payment.component.html
@@ -42,8 +42,8 @@
             <label for="stripe-card-cvc-element" class="d-flex">
                 {{'securityCode' | i18n}}
                 <a href="https://www.cvvnumber.com/cvv.html" tabindex="-1" target="_blank" rel="noopener noreferrer"
-                    class="ml-auto" title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i>
+                    class="ml-auto" appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                 </a>
             </label>
             <div id="stripe-card-cvc-element" class="form-control stripe-form-control"></div>
diff --git a/src/app/settings/premium.component.html b/src/app/settings/premium.component.html
index 937b65d255..733a9b7906 100644
--- a/src/app/settings/premium.component.html
+++ b/src/app/settings/premium.component.html
@@ -47,7 +47,7 @@
             <small class="form-text text-muted">{{'licenseFileDesc' | i18n : 'bitwarden_premium_license.json'}}</small>
         </div>
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'submit' | i18n}}</span>
         </button>
     </form>
@@ -76,7 +76,7 @@
     <h2 class="spaced-header mb-4">{{'paymentInformation' | i18n}}</h2>
     <app-payment [hideBank]="true"></app-payment>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'submit' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/settings/profile.component.html b/src/app/settings/profile.component.html
index d246fe3d50..3b10ef78ca 100644
--- a/src/app/settings/profile.component.html
+++ b/src/app/settings/profile.component.html
@@ -1,5 +1,6 @@
 <div *ngIf="loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <form *ngIf="profile && !loading" #form (ngSubmit)="submit()" [appApiAction]="formPromise" ngNativeValidate>
     <div class="row">
@@ -27,14 +28,14 @@
             <p *ngIf="fingerprint">
                 {{'yourAccountsFingerprint' | i18n}}:
                 <a href="https://help.bitwarden.com/article/fingerprint-phrase/" target="_blank" rel="noopener"
-                    title="{{'learnMore' | i18n}}">
-                    <i class="fa fa-question-circle-o"></i></a><br>
+                    appA11yTitle="{{'learnMore' | i18n}}">
+                    <i class="fa fa-question-circle-o" aria-hidden="true"></i></a><br>
                 <code>{{fingerprint}}</code>
             </p>
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'save' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/settings/purge-vault.component.html b/src/app/settings/purge-vault.component.html
index 79593d2eed..a8076bc972 100644
--- a/src/app/settings/purge-vault.component.html
+++ b/src/app/settings/purge-vault.component.html
@@ -16,7 +16,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'purgeVault' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/settings/two-factor-authenticator.component.html b/src/app/settings/two-factor-authenticator.component.html
index eecd6e7ca8..f82f08e823 100644
--- a/src/app/settings/two-factor-authenticator.component.html
+++ b/src/app/settings/two-factor-authenticator.component.html
@@ -54,7 +54,7 @@
                     <hr *ngIf="enabled">
                     <p class="text-center" [ngClass]="{'mb-0': enabled}">
                         <canvas id="qr"></canvas><br>
-                        <code title="{{'key' | i18n}}">{{key}}</code>
+                        <code appA11yTitle="{{'key' | i18n}}">{{key}}</code>
                     </p>
                     <ng-container *ngIf="!enabled">
                         <label for="token">3. {{'twoStepAuthenticatorEnterCode' | i18n}}</label>
@@ -64,7 +64,7 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span *ngIf="!enabled">{{'enable' | i18n}}</span>
                         <span *ngIf="enabled">{{'disable' | i18n}}</span>
                     </button>
diff --git a/src/app/settings/two-factor-duo.component.html b/src/app/settings/two-factor-duo.component.html
index 67f38bc5ef..ccb58c7145 100644
--- a/src/app/settings/two-factor-duo.component.html
+++ b/src/app/settings/two-factor-duo.component.html
@@ -49,7 +49,7 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span *ngIf="!enabled">{{'enable' | i18n}}</span>
                         <span *ngIf="enabled">{{'disable' | i18n}}</span>
                     </button>
diff --git a/src/app/settings/two-factor-email.component.html b/src/app/settings/two-factor-email.component.html
index 3b0e26a1c9..5d72c70e08 100644
--- a/src/app/settings/two-factor-email.component.html
+++ b/src/app/settings/two-factor-email.component.html
@@ -35,7 +35,7 @@
                             <button #sendBtn type="button"
                                 class="btn btn-outline-primary btn-sm btn-submit align-self-start" (click)="sendEmail()"
                                 [appApiAction]="emailPromise" [disabled]="sendBtn.loading">
-                                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                                 <span>{{'sendEmail' | i18n}}</span>
                             </button>
                             <span class="text-success ml-3" *ngIf="sentEmail">
@@ -51,7 +51,7 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span *ngIf="!enabled">{{'enable' | i18n}}</span>
                         <span *ngIf="enabled">{{'disable' | i18n}}</span>
                     </button>
diff --git a/src/app/settings/two-factor-setup.component.html b/src/app/settings/two-factor-setup.component.html
index 2ea0eb830c..fc604b2735 100644
--- a/src/app/settings/two-factor-setup.component.html
+++ b/src/app/settings/two-factor-setup.component.html
@@ -11,7 +11,8 @@
 <h2 [ngClass]="{'mt-5':!organizationId}">
     {{'providers' | i18n}}
     <small *ngIf="loading">
-        <i class="fa fa-spinner fa-spin fa-fw text-muted" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin fa-fw text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+        <span class="sr-only">{{'loading' | i18n}}</span>
     </small>
 </h2>
 <ul class="list-group list-group-2fa">
@@ -22,8 +23,10 @@
         <div class="mx-4">
             <h3 class="mb-0">
                 {{p.name}}
-                <i class="fa fa-check text-success fa-fw" *ngIf="p.enabled && canAccessPremium"
-                    title="{{'enabled' | i18n}}"></i>
+                <ng-container *ngIf="p.enabled && canAccessPremium">
+                    <i class="fa fa-check text-success fa-fw" title="{{'enabled' | i18n}}" aria-hidden="true"></i>
+                    <span class="sr-only">{{'enabled' | i18n}}</span>
+                </ng-container>
                 <a href="#" appStopClick class="badge badge-primary" *ngIf="!canAccessPremium && p.premium"
                     (click)="premiumRequired()">
                     {{'premium' | i18n}}
diff --git a/src/app/settings/two-factor-u2f.component.html b/src/app/settings/two-factor-u2f.component.html
index 1dca7210e8..8359c7cefb 100644
--- a/src/app/settings/two-factor-u2f.component.html
+++ b/src/app/settings/two-factor-u2f.component.html
@@ -30,13 +30,21 @@
                             <i class="fa-li fa fa-key"></i>
                             <strong *ngIf="!k.configured || !k.name">{{'u2fkeyX' | i18n : i + 1}}</strong>
                             <strong *ngIf="k.configured && k.name">{{k.name}}</strong>
-                            <i class="fa fa-fw"
-                                [ngClass]="{'fa-check text-success': !k.compromised, 'fa-exclamation-triangle text-warning': k.compromised}"
-                                *ngIf="k.configured && !removeKeyBtn.loading"
-                                title="{{(k.compromised ? 'keyCompromised' : 'enabled') | i18n}}"></i>
+                            <ng-container *ngIf="k.configured && !removeKeyBtn.loading">
+                                <ng-container *ngIf="k.compromised">
+                                    <i class="fa fa-fw fa-exclamation-triangle text-warning" aria-hidden="true"
+                                        title="{{'keyCompromised' | i18n}}"></i>
+                                    <span class="sr-only">{{'keyCompromised' | i18n}}</span>
+                                </ng-container>
+                                <ng-container *ngIf="!k.compromised">
+                                    <i class="fa fa-fw fa-check text-success" aria-hidden="true"
+                                        title="{{'enabled' | i18n}}"></i>
+                                    <span class="sr-only">{{'enabled' | i18n}}</span>
+                                </ng-container>
+                            </ng-container>
                             <ng-container *ngIf="keysConfiguredCount > 1 && k.configured">
                                 <i class="fa fa-spin fa-spinner text-muted fa-fw" title="{{'loading' | i18n}}"
-                                    *ngIf="removeKeyBtn.loading"></i>
+                                    *ngIf="removeKeyBtn.loading" aria-hidden="true"></i>
                                 -
                                 <a href="#" appStopClick (click)="remove(k)">{{'remove' | i18n}}</a>
                             </ng-container>
@@ -82,13 +90,14 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary" [disabled]="form.loading || !u2fResponse">
-                        <i class="fa fa-spinner fa-spin" *ngIf="form.loading" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" *ngIf="form.loading" title="{{'loading' | i18n}}"
+                            aria-hidden="true"></i>
                         <span *ngIf="!form.loading">{{'save' | i18n}}</span>
                     </button>
                     <button #disableBtn type="button" class="btn btn-outline-secondary btn-submit"
                         [appApiAction]="disablePromise" [disabled]="disableBtn.loading" (click)="disable()"
                         *ngIf="enabled">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span>{{'disableAllKeys' | i18n}}</span>
                     </button>
                     <button type="button" class="btn btn-outline-secondary"
diff --git a/src/app/settings/two-factor-verify.component.html b/src/app/settings/two-factor-verify.component.html
index 2182b5fc40..0295283f68 100644
--- a/src/app/settings/two-factor-verify.component.html
+++ b/src/app/settings/two-factor-verify.component.html
@@ -7,7 +7,7 @@
     </div>
     <div class="modal-footer">
         <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'continue' | i18n}}</span>
         </button>
         <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/settings/two-factor-yubikey.component.html b/src/app/settings/two-factor-yubikey.component.html
index 37e1a12c95..bf4fa9a9cd 100644
--- a/src/app/settings/two-factor-yubikey.component.html
+++ b/src/app/settings/two-factor-yubikey.component.html
@@ -43,8 +43,8 @@
                             <div class="d-flex" *ngIf="k.existingKey">
                                 <span class="mr-2">{{k.existingKey}}</span>
                                 <button type="button" class="btn btn-link text-danger ml-auto" (click)="remove(k)"
-                                    title="{{'remove' | i18n}}">
-                                    <i class="fa fa-minus-circle fa-lg"></i>
+                                    appA11yTitle="{{'remove' | i18n}}">
+                                    <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
                                 </button>
                             </div>
                         </div>
@@ -58,13 +58,13 @@
                 </div>
                 <div class="modal-footer">
                     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span>{{'save' | i18n}}</span>
                     </button>
                     <button #disableBtn type="button" class="btn btn-outline-secondary btn-submit"
                         [appApiAction]="disablePromise" [disabled]="disableBtn.loading" (click)="disable()"
                         *ngIf="enabled">
-                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                         <span>{{'disableAllKeys' | i18n}}</span>
                     </button>
                     <button type="button" class="btn btn-outline-secondary"
diff --git a/src/app/settings/update-key.component.html b/src/app/settings/update-key.component.html
index 2071ee588d..c0b89b7330 100644
--- a/src/app/settings/update-key.component.html
+++ b/src/app/settings/update-key.component.html
@@ -19,7 +19,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'updateEncryptionKey' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close' | i18n}}</button>
diff --git a/src/app/settings/update-license.component.html b/src/app/settings/update-license.component.html
index aa2e822046..fea564535d 100644
--- a/src/app/settings/update-license.component.html
+++ b/src/app/settings/update-license.component.html
@@ -6,7 +6,7 @@
             class="form-text text-muted">{{'licenseFileDesc' | i18n : (!organizationId ? 'bitwarden_premium_license.json' : 'bitwarden_organization_license.json')}}</small>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'submit' | i18n}}</span>
     </button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()">
diff --git a/src/app/settings/user-billing.component.html b/src/app/settings/user-billing.component.html
index 875ae41771..a61cea5c2c 100644
--- a/src/app/settings/user-billing.component.html
+++ b/src/app/settings/user-billing.component.html
@@ -7,7 +7,10 @@
         {{'refresh' | i18n}}
     </button>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!firstLoaded && loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="billing">
     <h2>{{(isCreditBalance ? 'accountCredit' : 'accountBalance') | i18n}}</h2>
     <p class="text-lg"><strong>{{creditOrBalance | currency:'$'}}</strong></p>
@@ -43,7 +46,7 @@
                         [(ngModel)]="verifyAmount2" min="1" max="99" step="1" required>
                 </div>
                 <button type="submit" class="btn btn-outline-primary btn-submit" [disabled]="verifyForm.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'verifyBankAccount' | i18n}}</span>
                 </button>
             </form>
@@ -73,8 +76,8 @@
                 <td>{{i.date | date:'mediumDate'}}</td>
                 <td>
                     <a href="{{i.pdfUrl}}" target="_blank" rel="noopener" class="mr-2"
-                        title="{{'downloadInvoice' | i18n}}">
-                        <i class="fa fa-file-pdf-o"></i></a>
+                        appA11yTitle="{{'downloadInvoice' | i18n}}">
+                        <i class="fa fa-file-pdf-o" aria-hidden="true"></i></a>
                     <a href="{{i.url}}" target="_blank" rel="noopener" title="{{'viewInvoice' | i18n}}">
                         {{'invoiceNumber' | i18n : i.number}}</a>
                 </td>
diff --git a/src/app/settings/user-subscription.component.html b/src/app/settings/user-subscription.component.html
index 02550309f4..1ad5bcf877 100644
--- a/src/app/settings/user-subscription.component.html
+++ b/src/app/settings/user-subscription.component.html
@@ -1,12 +1,16 @@
 <div class="page-header">
     <h1>
         {{'premiumMembership' | i18n}}
-        <small>
-            <i class="fa fa-spinner fa-spin text-muted" *ngIf="firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+        <small *ngIf="firstLoaded && loading">
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
-<i class="fa fa-spinner fa-spin text-muted" *ngIf="!firstLoaded && loading" title="{{'loading' | i18n}}"></i>
+<ng-container *ngIf="!firstLoaded && loading">
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
+</ng-container>
 <ng-container *ngIf="sub">
     <app-callout type="warning" title="{{'canceled' | i18n}}" *ngIf="subscription && subscription.cancelled">
         {{'subscriptionCanceled' | i18n}}</app-callout>
@@ -14,7 +18,7 @@
         <p>{{'subscriptionPendingCanceled' | i18n}}</p>
         <button #reinstateBtn type="button" class="btn btn-outline-secondary btn-submit" (click)="reinstate()"
             [appApiAction]="reinstatePromise" [disabled]="reinstateBtn.loading">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>{{'reinstateSubscription' | i18n}}</span>
         </button>
     </app-callout>
@@ -66,7 +70,7 @@
         </div>
         <div class="card mt-3" *ngIf="showUpdateLicense">
             <div class="card-body">
-                <button type="button" class="close" attr.aria-label="{{'cancel' | i18n}}" title="{{'cancel' | i18n}}"
+                <button type="button" class="close" appA11yTitle="{{'cancel' | i18n}}"
                     (click)="closeUpdateLicense(false)"><span aria-hidden="true">&times;</span></button>
                 <h3 class="card-body-header">{{'updateLicense' | i18n}}</h3>
                 <app-update-license (onUpdated)="closeUpdateLicense(true)" (onCanceled)="closeUpdateLicense(false)">
@@ -83,7 +87,7 @@
             <button #cancelBtn type="button" class="btn btn-outline-danger btn-submit ml-auto" (click)="cancel()"
                 [appApiAction]="cancelPromise" [disabled]="cancelBtn.loading"
                 *ngIf="subscription && !subscription.cancelled && !subscriptionMarkedForCancel">
-                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                 <span>{{'cancelSubscription' | i18n}}</span>
             </button>
         </div>
diff --git a/src/app/settings/verify-email.component.html b/src/app/settings/verify-email.component.html
index aed899fa57..668e7756b3 100644
--- a/src/app/settings/verify-email.component.html
+++ b/src/app/settings/verify-email.component.html
@@ -1,12 +1,12 @@
 <div class="card border-warning">
     <div class="card-header bg-warning text-white">
-        <i class="fa fa-envelope-o fa-fw"></i> {{'verifyEmail' | i18n}}
+        <i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i> {{'verifyEmail' | i18n}}
     </div>
     <div class="card-body">
         <p>{{'verifyEmailDesc' | i18n}}</p>
         <button type="button" class="btn btn-block btn-outline-secondary btn-submit" #sendBtn
             [appApiAction]="actionPromise" [disabled]="sendBtn.loading" (click)="send()">
-            <i class="fa fa-spin fa-spinner" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spin fa-spinner" title="{{'loading' | i18n}}" aria-hidden="true"></i>
             <span>
                 {{'sendEmail' | i18n}}
             </span>
diff --git a/src/app/tools/breach-report.component.html b/src/app/tools/breach-report.component.html
index 2131c04e8e..9ed0259388 100644
--- a/src/app/tools/breach-report.component.html
+++ b/src/app/tools/breach-report.component.html
@@ -11,7 +11,7 @@
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'checkBreaches' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/tools/export.component.html b/src/app/tools/export.component.html
index 5473f20629..3d1e4c1bc1 100644
--- a/src/app/tools/export.component.html
+++ b/src/app/tools/export.component.html
@@ -21,7 +21,7 @@
         </div>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'exportVault' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/tools/exposed-passwords-report.component.html b/src/app/tools/exposed-passwords-report.component.html
index 1ea62c392a..d07fda7ea9 100644
--- a/src/app/tools/exposed-passwords-report.component.html
+++ b/src/app/tools/exposed-passwords-report.component.html
@@ -3,7 +3,7 @@
 </div>
 <p>{{'exposedPasswordsReportDesc' | i18n}}</p>
 <button type="button" class="btn btn-primary btn-submit" [disabled]="loading" (click)="load()">
-    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
     <span>{{'checkExposedPasswords' | i18n}}</span>
 </button>
 <div class="mt-4" *ngIf="hasLoaded">
@@ -22,9 +22,15 @@
                     </td>
                     <td class="reduced-lh wrap">
                         <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                        <i class="fa fa-share-alt" *ngIf="!organization && c.organizationId"
-                            title="{{'shared' | i18n}}"></i>
-                        <i class="fa fa-paperclip" title="{{'attachments' | i18n}}" *ngIf="c.hasAttachments"></i>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
diff --git a/src/app/tools/import.component.html b/src/app/tools/import.component.html
index c0e4bfc0f4..09c1e77cc7 100644
--- a/src/app/tools/import.component.html
+++ b/src/app/tools/import.component.html
@@ -261,7 +261,7 @@
         <textarea id="fileContents" class="form-control" name="FileContents" [(ngModel)]="fileContents"></textarea>
     </div>
     <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+        <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
         <span>{{'importData' | i18n}}</span>
     </button>
 </form>
diff --git a/src/app/tools/inactive-two-factor-report.component.html b/src/app/tools/inactive-two-factor-report.component.html
index 91df46ca9f..a43bfc6afc 100644
--- a/src/app/tools/inactive-two-factor-report.component.html
+++ b/src/app/tools/inactive-two-factor-report.component.html
@@ -2,13 +2,15 @@
     <h1>
         {{'inactive2faReport' | i18n}}
         <small *ngIf="hasLoaded && loading">
-            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
 <p>{{'inactive2faReportDesc' | i18n}}</p>
 <div *ngIf="!hasLoaded && loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
     <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!ciphers.length">
@@ -26,9 +28,15 @@
                     </td>
                     <td class="reduced-lh wrap">
                         <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                        <i class="fa fa-share-alt" *ngIf="!organization && c.organizationId"
-                            title="{{'shared' | i18n}}"></i>
-                        <i class="fa fa-paperclip" title="{{'attachments' | i18n}}" *ngIf="c.hasAttachments"></i>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
diff --git a/src/app/tools/password-generator-history.component.html b/src/app/tools/password-generator-history.component.html
index 2044a62b10..d8f4c5e632 100644
--- a/src/app/tools/password-generator-history.component.html
+++ b/src/app/tools/password-generator-history.component.html
@@ -15,8 +15,9 @@
                         <small class="text-muted">{{h.date | date:'medium'}}</small>
                     </div>
                     <div class="ml-auto">
-                        <button class="btn btn-link" title="{{'copyPassword' | i18n}}" (click)="copy(h.password)">
-                            <i class="fa fa-lg fa-clipboard"></i>
+                        <button class="btn btn-link" appA11yTitle="{{'copyPassword' | i18n}}"
+                            (click)="copy(h.password)">
+                            <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                         </button>
                     </div>
                 </li>
@@ -25,12 +26,13 @@
                 {{'noPasswordsInList' | i18n}}
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
                     {{'close' | i18n}}
                 </button>
                 <div class="ml-auto">
-                    <button type="button" (click)="clear()" class="btn btn-outline-danger" title="{{'clear' | i18n}}">
-                        <i class="fa fa-trash-o fa-lg fa-fw"></i>
+                    <button type="button" (click)="clear()" class="btn btn-outline-danger"
+                        appA11yTitle="{{'clear' | i18n}}">
+                        <i class="fa fa-trash-o fa-lg fa-fw" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/tools/password-generator.component.html b/src/app/tools/password-generator.component.html
index 2ef7cc8eeb..33aab74eb0 100644
--- a/src/app/tools/password-generator.component.html
+++ b/src/app/tools/password-generator.component.html
@@ -101,8 +101,8 @@
     </div>
     <div class="ml-auto">
         <button type="button" class="btn btn-outline-secondary" (click)="history()"
-            title="{{'passwordHistory' | i18n}}">
-            <i class="fa fa-clock-o fa-lg"></i>
+            appA11yTitle="{{'passwordHistory' | i18n}}">
+            <i class="fa fa-clock-o fa-lg" aria-hidden="true"></i>
         </button>
     </div>
 </div>
diff --git a/src/app/tools/reused-passwords-report.component.html b/src/app/tools/reused-passwords-report.component.html
index 24594ac4a2..7f1938b389 100644
--- a/src/app/tools/reused-passwords-report.component.html
+++ b/src/app/tools/reused-passwords-report.component.html
@@ -2,13 +2,15 @@
     <h1>
         {{'reusedPasswordsReport' | i18n}}
         <small *ngIf="hasLoaded && loading">
-            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
 <p>{{'reusedPasswordsReportDesc' | i18n}}</p>
 <div *ngIf="!hasLoaded && loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
     <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!ciphers.length">
@@ -26,9 +28,15 @@
                     </td>
                     <td class="reduced-lh wrap">
                         <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                        <i class="fa fa-share-alt" *ngIf="!organization && c.organizationId"
-                            title="{{'shared' | i18n}}"></i>
-                        <i class="fa fa-paperclip" title="{{'attachments' | i18n}}" *ngIf="c.hasAttachments"></i>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
diff --git a/src/app/tools/unsecured-websites-report.component.html b/src/app/tools/unsecured-websites-report.component.html
index 99c481d8f7..db177c0eec 100644
--- a/src/app/tools/unsecured-websites-report.component.html
+++ b/src/app/tools/unsecured-websites-report.component.html
@@ -2,13 +2,15 @@
     <h1>
         {{'unsecuredWebsitesReport' | i18n}}
         <small *ngIf="hasLoaded && loading">
-            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
 <p>{{'unsecuredWebsitesReportDesc' | i18n}}</p>
 <div *ngIf="!hasLoaded && loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
     <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!ciphers.length">
@@ -26,9 +28,15 @@
                     </td>
                     <td class="reduced-lh wrap">
                         <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                        <i class="fa fa-share-alt" *ngIf="!organization && c.organizationId"
-                            title="{{'shared' | i18n}}"></i>
-                        <i class="fa fa-paperclip" title="{{'attachments' | i18n}}" *ngIf="c.hasAttachments"></i>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
diff --git a/src/app/tools/weak-passwords-report.component.html b/src/app/tools/weak-passwords-report.component.html
index e59d6b86be..85bcf35f03 100644
--- a/src/app/tools/weak-passwords-report.component.html
+++ b/src/app/tools/weak-passwords-report.component.html
@@ -2,13 +2,15 @@
     <h1>
         {{'weakPasswordsReport' | i18n}}
         <small *ngIf="hasLoaded && loading">
-            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </small>
     </h1>
 </div>
 <p>{{'weakPasswordsReportDesc' | i18n}}</p>
 <div *ngIf="!hasLoaded && loading">
-    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"></i>
+    <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+    <span class="sr-only">{{'loading' | i18n}}</span>
 </div>
 <div class="mt-4" *ngIf="hasLoaded">
     <app-callout type="success" title="{{'goodNews' | i18n}}" *ngIf="!ciphers.length">
@@ -26,9 +28,15 @@
                     </td>
                     <td class="reduced-lh wrap">
                         <a href="#" appStopClick (click)="selectCipher(c)" title="{{'editItem' | i18n}}">{{c.name}}</a>
-                        <i class="fa fa-share-alt" *ngIf="!organization && c.organizationId"
-                            title="{{'shared' | i18n}}"></i>
-                        <i class="fa fa-paperclip" title="{{'attachments' | i18n}}" *ngIf="c.hasAttachments"></i>
+                        <ng-container *ngIf="!organization && c.organizationId">
+                            <i class="fa fa-share-alt" appStopProp title="{{'shared' | i18n}}" aria-hidden="true"></i>
+                            <span class="sr-only">{{'shared' | i18n}}</span>
+                        </ng-container>
+                        <ng-container *ngIf="c.hasAttachments">
+                            <i class="fa fa-paperclip" appStopProp title="{{'attachments' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'attachments' | i18n}}</span>
+                        </ng-container>
                         <br>
                         <small>{{c.subTitle}}</small>
                     </td>
diff --git a/src/app/vault/add-edit.component.html b/src/app/vault/add-edit.component.html
index 110577022e..783c58d823 100644
--- a/src/app/vault/add-edit.component.html
+++ b/src/app/vault/add-edit.component.html
@@ -40,9 +40,9 @@
                                     [(ngModel)]="cipher.login.username" appInputVerbatim>
                                 <div class="input-group-append">
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'copyUsername' | i18n}}"
+                                        appA11yTitle="{{'copyUsername' | i18n}}"
                                         (click)="copy(cipher.login.username, 'username', 'Username')" tabindex="-1">
-                                        <i class="fa fa-lg fa-clipboard"></i>
+                                        <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                     </button>
                                 </div>
                             </div>
@@ -51,16 +51,16 @@
                             <div class="d-flex">
                                 <label for="loginPassword">{{'password' | i18n}}</label>
                                 <div class="ml-auto d-flex">
-                                    <a href="#" class="d-block mr-2" appStopClick title="{{'generatePassword' | i18n}}"
-                                        (click)="generatePassword()">
-                                        <i class="fa fa-lg fa-fw fa-refresh"></i>
+                                    <a href="#" class="d-block mr-2" appStopClick
+                                        appA11yTitle="{{'generatePassword' | i18n}}" (click)="generatePassword()">
+                                        <i class="fa fa-lg fa-fw fa-refresh" aria-hidden="true"></i>
                                     </a>
                                     <a href="#" class="d-block" #checkPasswordBtn appStopClick
-                                        title="{{'checkPassword' | i18n}}" (click)="checkPassword()"
+                                        appA11yTitle="{{'checkPassword' | i18n}}" (click)="checkPassword()"
                                         [appApiAction]="checkPasswordPromise">
-                                        <i class="fa fa-lg fa-fw fa-check-circle"
-                                            [hidden]="checkPasswordBtn.loading"></i>
-                                        <i class="fa fa-lg fa-fw fa-spinner fa-spin"
+                                        <i class="fa fa-lg fa-fw fa-check-circle" [hidden]="checkPasswordBtn.loading"
+                                            aria-hidden="true"></i>
+                                        <i class="fa fa-lg fa-fw fa-spinner fa-spin" aria-hidden="true"
                                             [hidden]="!checkPasswordBtn.loading" title="{{'loading' | i18n}}"></i>
                                     </a>
                                 </div>
@@ -71,14 +71,15 @@
                                     [(ngModel)]="cipher.login.password" appInputVerbatim autocomplete="new-password">
                                 <div class="input-group-append">
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'toggleVisibility' | i18n}}" (click)="togglePassword()" tabindex="-1">
-                                        <i class="fa fa-lg"
+                                        appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="togglePassword()"
+                                        tabindex="-1">
+                                        <i class="fa fa-lg" aria-hidden="true"
                                             [ngClass]="{'fa-eye': !showPassword, 'fa-eye-slash': showPassword}"></i>
                                     </button>
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'copyPassword' | i18n}}"
+                                        appA11yTitle="{{'copyPassword' | i18n}}"
                                         (click)="copy(cipher.login.password, 'password', 'Password')" tabindex="-1">
-                                        <i class="fa fa-lg fa-clipboard"></i>
+                                        <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                     </button>
                                 </div>
                             </div>
@@ -117,9 +118,10 @@
                                 </span>
                                 <span class="totp-code mr-2"
                                     title="{{'verificationCodeTotp' | i18n}}">{{totpCodeFormatted}}</span>
-                                <button type="button" class="btn btn-link" title="{{'copyVerificationCode' | i18n}}"
+                                <button type="button" class="btn btn-link"
+                                    appA11yTitle="{{'copyVerificationCode' | i18n}}"
                                     (click)="copy(totpCode, 'verificationCodeTotp', 'TOTP')">
-                                    <i class="fa fa-clipboard"></i>
+                                    <i class="fa fa-clipboard" aria-hidden="true"></i>
                                 </button>
                             </div>
                         </div>
@@ -134,14 +136,14 @@
                                         placeholder="{{'ex' | i18n}} https://google.com" appInputVerbatim>
                                     <div class="input-group-append">
                                         <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'launch' | i18n}}" (click)="launch(u)" [disabled]="!u.canLaunch"
-                                            tabindex="-1">
-                                            <i class="fa fa-lg fa-share"></i>
+                                            appA11yTitle="{{'launch' | i18n}}" (click)="launch(u)"
+                                            [disabled]="!u.canLaunch" tabindex="-1">
+                                            <i class="fa fa-lg fa-share" aria-hidden="true"></i>
                                         </button>
                                         <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'copyUri' | i18n}}" (click)="copy(u.uri, 'uri', 'URI')"
+                                            appA11yTitle="{{'copyUri' | i18n}}" (click)="copy(u.uri, 'uri', 'URI')"
                                             tabindex="-1">
-                                            <i class="fa fa-lg fa-clipboard"></i>
+                                            <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                         </button>
                                     </div>
                                 </div>
@@ -152,8 +154,8 @@
                                         {{'matchDetection' | i18n}}
                                     </label>
                                     <a class="ml-auto" href="https://help.bitwarden.com/article/uri-match-detection/"
-                                        target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                                        <i class="fa fa-question-circle-o"></i>
+                                        target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                                     </a>
                                 </div>
                                 <div class="d-flex">
@@ -163,8 +165,8 @@
                                         </option>
                                     </select>
                                     <button type="button" class="btn btn-link text-danger ml-2" (click)="removeUri(u)"
-                                        title="{{'remove' | i18n}}">
-                                        <i class="fa fa-minus-circle fa-lg"></i>
+                                        appA11yTitle="{{'remove' | i18n}}">
+                                        <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
                                     </button>
                                 </div>
                             </div>
@@ -198,9 +200,9 @@
                                     [(ngModel)]="cipher.card.number" appInputVerbatim>
                                 <div class="input-group-append">
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'copyNumber' | i18n}}"
+                                        appA11yTitle="{{'copyNumber' | i18n}}"
                                         (click)="copy(cipher.card.number, 'number', 'Number')" tabindex="-1">
-                                        <i class="fa fa-lg fa-clipboard"></i>
+                                        <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                     </button>
                                 </div>
                             </div>
@@ -227,14 +229,15 @@
                                     [(ngModel)]="cipher.card.code" appInputVerbatim autocomplete="new-password">
                                 <div class="input-group-append">
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()" tabindex="-1">
-                                        <i class="fa fa-lg"
+                                        appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleCardCode()"
+                                        tabindex="-1">
+                                        <i class="fa fa-lg" aria-hidden="true"
                                             [ngClass]="{'fa-eye': !showCardCode, 'fa-eye-slash': showCardCode}"></i>
                                     </button>
                                     <button type="button" class="btn btn-outline-secondary"
-                                        title="{{'securityCode' | i18n}}"
+                                        appA11yTitle="{{'securityCode' | i18n}}"
                                         (click)="copy(cipher.card.code, 'securityCode', 'Security Code')" tabindex="-1">
-                                        <i class="fa fa-lg fa-clipboard"></i>
+                                        <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                     </button>
                                 </div>
                             </div>
@@ -366,8 +369,8 @@
                             <div class="d-flex">
                                 <label for="fieldName{{i}}">{{'name' | i18n}}</label>
                                 <a class="ml-auto" href="https://help.bitwarden.com/article/custom-fields/"
-                                    target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                                    <i class="fa fa-question-circle-o"></i>
+                                    target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                                    <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                                 </a>
                             </div>
                             <input id="fieldName{{i}}" type="text" name="Field.Name{{i}}" [(ngModel)]="f.name"
@@ -381,9 +384,9 @@
                                         [(ngModel)]="f.value" appInputVerbatim>
                                     <div class="input-group-append">
                                         <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'copyValue' | i18n}}" (click)="copy(f.value, 'value', 'Field')"
-                                            tabindex="-1">
-                                            <i class="fa fa-lg fa-clipboard"></i>
+                                            appA11yTitle="{{'copyValue' | i18n}}"
+                                            (click)="copy(f.value, 'value', 'Field')" tabindex="-1">
+                                            <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                         </button>
                                     </div>
                                 </div>
@@ -394,17 +397,17 @@
                                         autocomplete="new-password">
                                     <div class="input-group-append">
                                         <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
+                                            appA11yTitle="{{'toggleVisibility' | i18n}}" (click)="toggleFieldValue(f)"
                                             tabindex="-1">
-                                            <i class="fa fa-lg"
+                                            <i class="fa fa-lg" aria-hidden="true"
                                                 [ngClass]="{'fa-eye': !f.showValue, 'fa-eye-slash': f.showValue}">
                                             </i>
                                         </button>
                                         <button type="button" class="btn btn-outline-secondary"
-                                            title="{{'copyValue' | i18n}}"
+                                            appA11yTitle="{{'copyValue' | i18n}}"
                                             (click)="copy(f.value, 'value', f.type === fieldType.Hidden ? 'H_Field' : 'Field')"
                                             tabindex="-1">
-                                            <i class="fa fa-lg fa-clipboard"></i>
+                                            <i class="fa fa-lg fa-clipboard" aria-hidden="true"></i>
                                         </button>
                                     </div>
                                 </div>
@@ -414,12 +417,12 @@
                                         trueValue="true" falseValue="false">
                                 </div>
                                 <button type="button" class="btn btn-link text-danger ml-2" (click)="removeField(f)"
-                                    title="{{'remove' | i18n}}">
-                                    <i class="fa fa-minus-circle fa-lg"></i>
+                                    appA11yTitle="{{'remove' | i18n}}">
+                                    <i class="fa fa-minus-circle fa-lg" aria-hidden="true"></i>
                                 </button>
                                 <button type="button" class="btn btn-link text-muted cursor-move"
-                                    title="{{'dragToSort' | i18n}}">
-                                    <i class="fa fa-bars fa-lg"></i>
+                                    appA11yTitle="{{'dragToSort' | i18n}}">
+                                    <i class="fa fa-bars fa-lg" aria-hidden="true"></i>
                                 </button>
                             </div>
                         </div>
@@ -488,7 +491,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">
@@ -496,15 +499,16 @@
                 </button>
                 <div class="ml-auto" *ngIf="cipher">
                     <button *ngIf="!organization" type="button" (click)="toggleFavorite()" class="btn btn-link"
-                        title="{{(cipher.favorite ? 'unfavorite' : 'favorite') | i18n}}">
-                        <i class="fa fa-lg" [ngClass]="{'fa-star': cipher.favorite, 'fa-star-o': !cipher.favorite}"></i>
+                        appA11yTitle="{{(cipher.favorite ? 'unfavorite' : 'favorite') | i18n}}">
+                        <i class="fa fa-lg" [ngClass]="{'fa-star': cipher.favorite, 'fa-star-o': !cipher.favorite}"
+                            aria-hidden="true"></i>
                     </button>
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/vault/attachments.component.html b/src/app/vault/attachments.component.html
index a785a9e5cb..350ca0d692 100644
--- a/src/app/vault/attachments.component.html
+++ b/src/app/vault/attachments.component.html
@@ -25,7 +25,8 @@
                                         <a href="https://help.bitwarden.com/article/attachments/#fixing-old-attachments"
                                             target="_blank" rel="noopener">
                                             <i class="fa fa-exclamation-triangle text-warning"
-                                                title="{{'attachmentFixDesc' | i18n}}"></i></a>
+                                                title="{{'attachmentFixDesc' | i18n}}" aria-hidden="true"></i>
+                                            <span class="sr-only">{{'attachmentFixDesc' | i18n}}</span></a>
                                         <button type="button" class="btn btn-outline-primary btn-sm m-0 py-0 px-2"
                                             (click)="reupload(a)" #reuploadBtn [appApiAction]="reuploadPromises[a.id]"
                                             [disabled]="reuploadBtn.loading">{{'fix' | i18n}}</button>
@@ -35,11 +36,12 @@
                             </td>
                             <td class="table-list-options">
                                 <button class="btn btn-outline-danger" type="button" appStopClick
-                                    title="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
+                                    appA11yTitle="{{'delete' | i18n}}" (click)="delete(a)" #deleteBtn
                                     [appApiAction]="deletePromises[a.id]" [disabled]="deleteBtn.loading">
-                                    <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                                    <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"
+                                        aria-hidden="true"></i>
                                     <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                                        title="{{'loading' | i18n}}"></i>
+                                        title="{{'loading' | i18n}}" aria-hidden="true"></i>
                                 </button>
                             </td>
                         </tr>
@@ -52,10 +54,10 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" title="{{'close' | i18n}}">{{'close'
+                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">{{'close'
                     | i18n}}</button>
             </div>
         </form>
diff --git a/src/app/vault/bulk-delete.component.html b/src/app/vault/bulk-delete.component.html
index 8d19e57fce..fbc45ef333 100644
--- a/src/app/vault/bulk-delete.component.html
+++ b/src/app/vault/bulk-delete.component.html
@@ -14,11 +14,11 @@
             </div>
             <div class="modal-footer">
                 <button appAutoFocus type="submit" class="btn btn-danger btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'delete' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
-                    title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
             </div>
         </form>
     </div>
diff --git a/src/app/vault/bulk-move.component.html b/src/app/vault/bulk-move.component.html
index 8311353a18..e202ef66bb 100644
--- a/src/app/vault/bulk-move.component.html
+++ b/src/app/vault/bulk-move.component.html
@@ -20,11 +20,11 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
-                    title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
             </div>
         </form>
     </div>
diff --git a/src/app/vault/bulk-share.component.html b/src/app/vault/bulk-share.component.html
index 78b779de2b..04fe1dbd6f 100644
--- a/src/app/vault/bulk-share.component.html
+++ b/src/app/vault/bulk-share.component.html
@@ -51,11 +51,11 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit manual" [disabled]="form.loading || !canSave"
                     [ngClass]="{loading:form.loading}">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
-                    title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
             </div>
         </form>
     </div>
diff --git a/src/app/vault/ciphers.component.html b/src/app/vault/ciphers.component.html
index cd9b629f47..3c7487c0ce 100644
--- a/src/app/vault/ciphers.component.html
+++ b/src/app/vault/ciphers.component.html
@@ -77,7 +77,10 @@
         </tbody>
     </table>
     <div class="no-items" *ngIf="!filteredCiphers.length">
-        <i class="fa fa-spinner fa-spin text-muted" *ngIf="!loaded" title="{{'loading' | i18n}}"></i>
+        <ng-container *ngIf="!loaded">
+            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
+        </ng-container>
         <ng-container *ngIf="loaded">
             <p>{{'noItemsInList' | i18n}}</p>
             <button (click)="addCipher()" class="btn btn-outline-primary" *ngIf="showAddNew">
diff --git a/src/app/vault/collections.component.html b/src/app/vault/collections.component.html
index b74663a192..e6ec10fc2e 100644
--- a/src/app/vault/collections.component.html
+++ b/src/app/vault/collections.component.html
@@ -42,7 +42,7 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <button type="button" class="btn btn-outline-secondary"
diff --git a/src/app/vault/folder-add-edit.component.html b/src/app/vault/folder-add-edit.component.html
index 0674a5e5a0..e7a6ae11ff 100644
--- a/src/app/vault/folder-add-edit.component.html
+++ b/src/app/vault/folder-add-edit.component.html
@@ -13,18 +13,18 @@
             </div>
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
-                    title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
                 <div class="ml-auto">
                     <button #deleteBtn type="button" (click)="delete()" class="btn btn-outline-danger"
-                        title="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
+                        appA11yTitle="{{'delete' | i18n}}" *ngIf="editMode" [disabled]="deleteBtn.loading"
                         [appApiAction]="deletePromise">
-                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading"></i>
+                        <i class="fa fa-trash-o fa-lg fa-fw" [hidden]="deleteBtn.loading" aria-hidden="true"></i>
                         <i class="fa fa-spinner fa-spin fa-lg fa-fw" [hidden]="!deleteBtn.loading"
-                            title="{{'loading' | i18n}}"></i>
+                            title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/app/vault/groupings.component.html b/src/app/vault/groupings.component.html
index d9b44b51b7..dfbe697448 100644
--- a/src/app/vault/groupings.component.html
+++ b/src/app/vault/groupings.component.html
@@ -2,8 +2,8 @@
     <div class="card-header d-flex">
         {{'filters' | i18n}}
         <a class="ml-auto" href="https://help.bitwarden.com/article/searching-vault/" target="_blank" rel="noopener"
-            title="{{'learnMore' | i18n}}">
-            <i class="fa fa-question-circle-o"></i>
+            appA11yTitle="{{'learnMore' | i18n}}">
+            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
         </a>
     </div>
     <div class="card-body">
@@ -45,15 +45,16 @@
             </li>
         </ul>
         <p *ngIf="!loaded" class="text-muted">
-            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+            <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
+            <span class="sr-only">{{'loading' | i18n}}</span>
         </p>
         <ng-container *ngIf="loaded">
             <ng-container *ngIf="showFolders">
                 <h3 class="d-flex">
                     {{'folders' | i18n}}
                     <a href="#" class="text-muted ml-auto" appStopClick (click)="addFolder()"
-                        title="{{'addFolder' | i18n}}">
-                        <i class="fa fa-plus fa-fw"></i>
+                        appA11yTitle="{{'addFolder' | i18n}}">
+                        <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
                     </a>
                 </h3>
                 <ul class="fa-ul card-ul carets">
@@ -66,8 +67,9 @@
                                     (click)="collapse(f.node)"></i>
                                 <a href="#" appStopClick (click)="selectFolder(f.node)">{{f.node.name}}</a>
                                 <a href="#" class="text-muted ml-auto show-active" appStopClick
-                                    (click)="editFolder(f.node)" title="{{'editFolder' | i18n}}" *ngIf="f.node.id">
-                                    <i class="fa fa-pencil fa-fw"></i>
+                                    (click)="editFolder(f.node)" appA11yTitle="{{'editFolder' | i18n}}"
+                                    *ngIf="f.node.id">
+                                    <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
                                 </a>
                             </div>
                             <ul class="fa-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
diff --git a/src/app/vault/share.component.html b/src/app/vault/share.component.html
index 522f525f29..285dcee1d5 100644
--- a/src/app/vault/share.component.html
+++ b/src/app/vault/share.component.html
@@ -53,15 +53,15 @@
             <div class="modal-footer">
                 <button type="submit" class="btn btn-primary btn-submit manual" [disabled]="form.loading || !canSave"
                     [ngClass]="{loading:form.loading}" *ngIf="organizations && organizations.length">
-                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
+                    <i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}" aria-hidden="true"></i>
                     <span>{{'save' | i18n}}</span>
                 </button>
                 <a href="#" routerLink="/settings/create-organization" class="btn btn-primary"
                     *ngIf="!organizations || !organizations.length">
                     {{'newOrganization' | i18n}}
                 </a>
-                <button type="button" class="btn btn-outline-secondary" data-dismiss="modal"
-                    title="{{'cancel' | i18n}}">{{'cancel' | i18n}}</button>
+                <button type="button" class="btn btn-outline-secondary"
+                    data-dismiss="modal">{{'cancel' | i18n}}</button>
             </div>
         </form>
     </div>
diff --git a/src/app/vault/vault.component.html b/src/app/vault/vault.component.html
index 568e57ad87..2af3f8c34b 100644
--- a/src/app/vault/vault.component.html
+++ b/src/app/vault/vault.component.html
@@ -12,8 +12,11 @@
                 <h1>
                     {{'myVault' | i18n}}
                     <small #actionSpinner [appApiAction]="ciphersComponent.actionPromise">
-                        <i *ngIf="actionSpinner.loading" class="fa fa-spinner fa-spin text-muted"
-                            title="{{'loading' | i18n}}"></i>
+                        <ng-container *ngIf="actionSpinner.loading">
+                            <i class="fa fa-spinner fa-spin text-muted" title="{{'loading' | i18n}}"
+                                aria-hidden="true"></i>
+                            <span class="sr-only">{{'loading' | i18n}}</span>
+                        </ng-container>
                     </small>
                 </h1>
                 <div class="ml-auto d-flex">
@@ -96,8 +99,8 @@
                 <div class="card-header d-flex">
                     {{'organizations' | i18n}}
                     <a class="ml-auto" href="https://help.bitwarden.com/article/what-is-an-organization/"
-                        target="_blank" rel="noopener" title="{{'learnMore' | i18n}}">
-                        <i class="fa fa-question-circle-o"></i>
+                        target="_blank" rel="noopener" appA11yTitle="{{'learnMore' | i18n}}">
+                        <i class="fa fa-question-circle-o" aria-hidden="true"></i>
                     </a>
                 </div>
                 <div class="card-body">
diff --git a/src/index.html b/src/index.html
index 99c78484ed..8170d0469a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -21,7 +21,7 @@
             <div>
                 <img src="./images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
                 <p class="text-center">
-                    <i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading"></i>
+                    <i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading" aria-hidden="true"></i>
                 </p>
             </div>
         </div>