diff --git a/client/app/assets/less/inc/generics.less b/client/app/assets/less/inc/generics.less
index d7f484da0a..4896b3b372 100755
--- a/client/app/assets/less/inc/generics.less
+++ b/client/app/assets/less/inc/generics.less
@@ -2,163 +2,218 @@
     Generate Margin Classes (0px - 25px)
     margin, margin-top, margin-bottom, margin-left, margin-right
 -----------------------------------------------------------*/
-.margin (@label, @size: 1, @key:1) when (@size =< 30){
-    .m-@{key} {
-        margin: @size !important;
-    }
-    
-    .m-t-@{key} {
-        margin-top: @size !important;
-    }
-    
-    .m-b-@{key} {
-        margin-bottom: @size !important;
-    }
-    
-    .m-l-@{key} {
-        margin-left: @size !important;
-    }
-    
-    .m-r-@{key} {
-        margin-right: @size !important;
-    }
-    
-    .margin(@label - 5; @size + 5; @key + 5);
+.margin (@label, @size: 1, @key:1) when (@size =< 30) {
+  .m-@{key} {
+    margin: @size !important;
+  }
+
+  .m-t-@{key} {
+    margin-top: @size !important;
+  }
+
+  .m-b-@{key} {
+    margin-bottom: @size !important;
+  }
+
+  .m-l-@{key} {
+    margin-left: @size !important;
+  }
+
+  .m-r-@{key} {
+    margin-right: @size !important;
+  }
+
+  .margin(@label - 5; @size + 5; @key + 5);
 }
 
 .margin(25, 0px, 0);
 
-.m-2{
-  margin:2px;
+.m-2 {
+  margin: 2px;
 }
 
 /* --------------------------------------------------------
     Generate Padding Classes (0px - 25px)
     padding, padding-top, padding-bottom, padding-left, padding-right
 -----------------------------------------------------------*/
-.padding (@label, @size: 1, @key:1) when (@size =< 30){
-    .p-@{key} {
-        padding: @size !important;
-    }
-    
-    .p-t-@{key} {
-        padding-top: @size !important;
-    }
-    
-    .p-b-@{key} {
-        padding-bottom: @size !important;
-    }
-    
-    .p-l-@{key} {
-        padding-left: @size !important;
-    }
-    
-    .p-r-@{key} {
-        padding-right: @size !important; 
-    }
-    
-    .padding(@label - 5; @size + 5; @key + 5);
-} 
+.padding (@label, @size: 1, @key:1) when (@size =< 30) {
+  .p-@{key} {
+    padding: @size !important;
+  }
 
-.padding(25, 0px, 0);
+  .p-t-@{key} {
+    padding-top: @size !important;
+  }
+
+  .p-b-@{key} {
+    padding-bottom: @size !important;
+  }
 
+  .p-l-@{key} {
+    padding-left: @size !important;
+  }
+
+  .p-r-@{key} {
+    padding-right: @size !important;
+  }
+
+  .padding(@label - 5; @size + 5; @key + 5);
+}
+
+.padding(25, 0px, 0);
 
 /* --------------------------------------------------------
     Generate Font-Size Classes (8px - 20px)
 -----------------------------------------------------------*/
-.font-size (@label, @size: 8, @key:10) when (@size =< 20){
-    .f-@{key} {
-        font-size: @size !important;
-    }
-    
-    .font-size(@label - 1; @size + 1; @key + 1);
-} 
+.font-size (@label, @size: 8, @key:10) when (@size =< 20) {
+  .f-@{key} {
+    font-size: @size !important;
+  }
 
-.font-size(20, 8px, 8);
+  .font-size(@label - 1; @size + 1; @key + 1);
+}
 
-.f-inherit { font-size: inherit !important; }
+.font-size(20, 8px, 8);
 
+.f-inherit {
+  font-size: inherit !important;
+}
 
 /* --------------------------------------------------------
     Font Weight
 -----------------------------------------------------------*/
-.f-300 { font-weight: 300 !important; }
-.f-400 { font-weight: 400 !important; }
-.f-500 { font-weight: 500 !important; }
-.f-700 { font-weight: 700 !important; }
-
+.f-300 {
+  font-weight: 300 !important;
+}
+.f-400 {
+  font-weight: 400 !important;
+}
+.f-500 {
+  font-weight: 500 !important;
+}
+.f-700 {
+  font-weight: 700 !important;
+}
 
 /* --------------------------------------------------------
     Position
 -----------------------------------------------------------*/
-.p-relative { position: relative !important; }
-.p-absolute { position: absolute !important; }
-.p-fixed { position: fixed !important; }
-.p-static { position: static !important; }
-
+.p-relative {
+  position: relative !important;
+}
+.p-absolute {
+  position: absolute !important;
+}
+.p-fixed {
+  position: fixed !important;
+}
+.p-static {
+  position: static !important;
+}
 
 /* --------------------------------------------------------
     Overflow
 -----------------------------------------------------------*/
-.o-hidden { overflow: hidden !important; }
-.o-visible { overflow: visible !important; }
-.o-auto { overflow: auto !important; }
-
+.o-hidden {
+  overflow: hidden !important;
+}
+.o-visible {
+  overflow: visible !important;
+}
+.o-auto {
+  overflow: auto !important;
+}
 
 /* --------------------------------------------------------
     Display
 -----------------------------------------------------------*/
-.di-block { display: inline-block !important; } 
-.d-block { display: block; }
+.di-block {
+  display: inline-block !important;
+}
+.d-block {
+  display: block;
+}
 
 /* --------------------------------------------------------
     Background Colors and Colors
 -----------------------------------------------------------*/
-@array: c-white bg-white @white, c-ace bg-ace @ace, c-black bg-black @black, c-brown bg-brown @brown, c-pink bg-pink @pink, c-red bg-red @red, c-blue bg-blue @blue, c-purple bg-purple @purple, c-deeppurple bg-deeppurple @deeppurple, c-lightblue bg-lightblue @lightblue, c-cyan bg-cyan @cyan, c-teal bg-teal @teal, c-green bg-green @green, c-lightgreen bg-lightgreen @lightgreen, c-lime bg-lime @lime, c-yellow bg-yellow @yellow, c-amber bg-amber @amber, c-orange bg-orange @orange, c-deeporange bg-deeporange @deeporange, c-gray bg-gray @gray, c-bluegray bg-bluegray @bluegray, c-indigo bg-indigo @indigo;
-
-.for(@array); .-each(@value) {
-    @name:  extract(@value, 1);
-    @name2:  extract(@value, 2);
-    @color: extract(@value, 3); 
-    &.@{name2} {
-        background-color: @color !important;
-    }
-    
-    &.@{name} {
-        color: @color !important;
-    }
+@array: c-white bg-white @white, c-ace bg-ace @ace, c-black bg-black @black, c-brown bg-brown @brown,
+  c-pink bg-pink @pink, c-red bg-red @red, c-blue bg-blue @blue, c-purple bg-purple @purple,
+  c-deeppurple bg-deeppurple @deeppurple, c-lightblue bg-lightblue @lightblue, c-cyan bg-cyan @cyan,
+  c-teal bg-teal @teal, c-green bg-green @green, c-lightgreen bg-lightgreen @lightgreen, c-lime bg-lime @lime,
+  c-yellow bg-yellow @yellow, c-amber bg-amber @amber, c-orange bg-orange @orange,
+  c-deeporange bg-deeporange @deeporange, c-gray bg-gray @gray, c-bluegray bg-bluegray @bluegray,
+  c-indigo bg-indigo @indigo;
+
+.for(@array);
+.-each(@value) {
+  @name: extract(@value, 1);
+  @name2: extract(@value, 2);
+  @color: extract(@value, 3);
+  &.@{name2} {
+    background-color: @color !important;
+  }
+
+  &.@{name} {
+    color: @color !important;
+  }
 }
 
-
 /* --------------------------------------------------------
     Background Colors
 -----------------------------------------------------------*/
-.bg-brand { background-color: @brand-bg; }
-.bg-black-trp { background-color: rgba(0,0,0,0.12) !important; }
-
-
+.bg-brand {
+  background-color: @brand-bg;
+}
+.bg-black-trp {
+  background-color: rgba(0, 0, 0, 0.12) !important;
+}
 
 /* --------------------------------------------------------
     Borders
 -----------------------------------------------------------*/
-.b-0 { border: 0 !important; }
-
+.b-0 {
+  border: 0 !important;
+}
 
 /* --------------------------------------------------------
     Width
 -----------------------------------------------------------*/
-.w-100 { width: 100% !important; }
-.w-50 { width: 50% !important; }
-.w-25 { width: 25% !important; }
-
+.w-100 {
+  width: 100% !important;
+}
+.w-50 {
+  width: 50% !important;
+}
+.w-25 {
+  width: 25% !important;
+}
 
 /* --------------------------------------------------------
     Border Radius
 -----------------------------------------------------------*/
-.brd-2 { border-radius: 2px; }
-
+.brd-2 {
+  border-radius: 2px;
+}
 
 /* --------------------------------------------------------
     Alignment
 -----------------------------------------------------------*/
-.va-top { vertical-align: top; }
\ No newline at end of file
+.va-top {
+  vertical-align: top;
+}
+
+/* --------------------------------------------------------
+    Screen readers
+-----------------------------------------------------------*/
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
diff --git a/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx b/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
index e5c4aa68e0..e655e7f9fb 100644
--- a/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
+++ b/client/app/components/ApplicationArea/ApplicationLayout/VersionInfo.jsx
@@ -14,8 +14,8 @@ export default function VersionInfo() {
         <div className="m-t-10">
           {/* eslint-disable react/jsx-no-target-blank */}
           <Link href="https://version.redash.io/" className="update-available" target="_blank" rel="noopener">
-            Update Available
-            <i className="fa fa-external-link m-l-5" />
+            Update Available <i className="fa fa-external-link m-l-5" aria-hidden="true" />
+            <span className="sr-only">(opens in a new tab)</span>
           </Link>
         </div>
       )}
diff --git a/client/app/components/ApplicationArea/ErrorMessage.jsx b/client/app/components/ApplicationArea/ErrorMessage.jsx
index 733444f4bf..6edd3f77bf 100644
--- a/client/app/components/ApplicationArea/ErrorMessage.jsx
+++ b/client/app/components/ApplicationArea/ErrorMessage.jsx
@@ -49,7 +49,7 @@ export default function ErrorMessage({ error, message }) {
     <div className="error-message-container" data-test="ErrorMessage" role="alert">
       <div className="error-state bg-white tiled">
         <div className="error-state__icon">
-          <i className="zmdi zmdi-alert-circle-o" />
+          <i className="zmdi zmdi-alert-circle-o" aria-hidden="true" />
         </div>
         <div className="error-state__details">
           <DynamicComponent
diff --git a/client/app/components/BigMessage.jsx b/client/app/components/BigMessage.jsx
index bbd4ccf9c9..02e894fe14 100644
--- a/client/app/components/BigMessage.jsx
+++ b/client/app/components/BigMessage.jsx
@@ -1,14 +1,21 @@
 import React from "react";
 import PropTypes from "prop-types";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
+import cx from "classnames";
 
 function BigMessage({ message, icon, children, className }) {
+  const messageId = useUniqueId("bm-message");
   return (
-    <div className={"p-15 text-center " + className}>
-      <h3 className="m-t-0 m-b-0">
-        <i className={"fa " + icon} />
+    <div
+      className={"big-message p-15 text-center " + className}
+      role="status"
+      aria-live="assertive"
+      aria-relevant="additions removals">
+      <h3 className="m-t-0 m-b-0" aria-labelledby={messageId}>
+        <i className={cx("fa", icon)} aria-hidden="true" />
       </h3>
       <br />
-      {message}
+      <span id={messageId}>{message}</span>
       {children}
     </div>
   );
diff --git a/client/app/components/CreateSourceDialog.jsx b/client/app/components/CreateSourceDialog.jsx
index 2d5ba06469..8ce19bd055 100644
--- a/client/app/components/CreateSourceDialog.jsx
+++ b/client/app/components/CreateSourceDialog.jsx
@@ -111,7 +111,8 @@ class CreateSourceDialog extends React.Component {
         <div className="text-right">
           {HELP_TRIGGER_TYPES[helpTriggerType] && (
             <HelpTrigger className="f-13" type={helpTriggerType}>
-              Setup Instructions <i className="fa fa-question-circle" />
+              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+              <span className="sr-only">(help)</span>
             </HelpTrigger>
           )}
         </div>
@@ -139,7 +140,7 @@ class CreateSourceDialog extends React.Component {
           roundedImage={false}
           data-test="PreviewItem"
           data-test-type={item.type}>
-          <i className="fa fa-angle-double-right" />
+          <i className="fa fa-angle-double-right" aria-hidden="true" />
         </PreviewCard>
       </List.Item>
     );
diff --git a/client/app/components/EmailSettingsWarning.jsx b/client/app/components/EmailSettingsWarning.jsx
index 2de6f9c194..d88c408771 100644
--- a/client/app/components/EmailSettingsWarning.jsx
+++ b/client/app/components/EmailSettingsWarning.jsx
@@ -1,12 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import cx from "classnames";
 import { clientConfig, currentUser } from "@/services/auth";
 import Tooltip from "antd/lib/tooltip";
 import Alert from "antd/lib/alert";
 import HelpTrigger from "@/components/HelpTrigger";
+import { useUniqueId } from "@/lib/hooks/useUniqueId";
 
 export default function EmailSettingsWarning({ featureName, className, mode, adminOnly }) {
+  const messageDescriptionId = useUniqueId("sr-mail-description");
+
   if (!clientConfig.mailSettingsMissing) {
     return null;
   }
@@ -16,7 +18,7 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
   }
 
   const message = (
-    <span>
+    <span id={messageDescriptionId}>
       Your mail server isn&apos;t configured correctly, and is needed for {featureName} to work.{" "}
       <HelpTrigger type="MAIL_CONFIG" className="f-inherit" />
     </span>
@@ -24,8 +26,10 @@ export default function EmailSettingsWarning({ featureName, className, mode, adm
 
   if (mode === "icon") {
     return (
-      <Tooltip title={message}>
-        <i className={cx("fa fa-exclamation-triangle", className)} />
+      <Tooltip title={message} placement="topRight" arrowPointAtCenter>
+        <span className={className} aria-label="Mail alert" aria-describedby={messageDescriptionId} tabIndex={0}>
+          <i className={"fa fa-exclamation-triangle"} aria-hidden="true" />
+        </span>
       </Tooltip>
     );
   }
diff --git a/client/app/components/FavoritesControl.jsx b/client/app/components/FavoritesControl.jsx
index 871233f943..194fddd10f 100644
--- a/client/app/components/FavoritesControl.jsx
+++ b/client/app/components/FavoritesControl.jsx
@@ -31,6 +31,7 @@ export default class FavoritesControl extends React.Component {
     return (
       <a
         title={title}
+        aria-label={title}
         className="favorites-control btn-favorite"
         onClick={event => this.toggleItem(event, item, onChange)}>
         <i className={icon} aria-hidden="true" />
diff --git a/client/app/components/Filters.jsx b/client/app/components/Filters.jsx
index 5cab56e3da..a50135761a 100644
--- a/client/app/components/Filters.jsx
+++ b/client/app/components/Filters.jsx
@@ -112,11 +112,11 @@ function Filters({ filters, onChange }) {
                     {!filter.multiple && options}
                     {filter.multiple && [
                       <Select.Option key={NONE_VALUES} data-test="ClearOption">
-                        <i className="fa fa-square-o m-r-5" />
+                        <i className="fa fa-square-o m-r-5" aria-hidden="true" />
                         Clear
                       </Select.Option>,
                       <Select.Option key={ALL_VALUES} data-test="SelectAllOption">
-                        <i className="fa fa-check-square-o m-r-5" />
+                        <i className="fa fa-check-square-o m-r-5" aria-hidden="true" />
                         Select All
                       </Select.Option>,
                       <Select.OptGroup key="Values" title="Values">
diff --git a/client/app/components/HelpTrigger.jsx b/client/app/components/HelpTrigger.jsx
index 6d714c17c3..f32c907cbf 100644
--- a/client/app/components/HelpTrigger.jsx
+++ b/client/app/components/HelpTrigger.jsx
@@ -68,7 +68,7 @@ const HelpTriggerDefaultProps = {
   className: null,
   showTooltip: true,
   renderAsLink: false,
-  children: <i className="fa fa-question-circle" />,
+  children: <i className="fa fa-question-circle" aria-hidden="true" />,
 };
 
 export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName = null) {
@@ -170,7 +170,13 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
               this.props.showTooltip ? (
                 <>
                   {tooltip}
-                  {shouldRenderAsLink && <i className="fa fa-external-link" style={{ marginLeft: 5 }} />}
+                  {shouldRenderAsLink && (
+                    <>
+                      {" "}
+                      <i className="fa fa-external-link" style={{ marginLeft: 5 }} aria-hidden="true" />
+                      <span className="sr-only">(opens in a new tab)</span>
+                    </>
+                  )}
                 </>
               ) : null
             }>
@@ -197,7 +203,8 @@ export function helpTriggerWithTypes(types, allowedDomains = [], drawerClassName
                   <Tooltip title="Open page in a new window" placement="left">
                     {/* eslint-disable-next-line react/jsx-no-target-blank */}
                     <Link href={url} target="_blank">
-                      <i className="fa fa-external-link" />
+                      <i className="fa fa-external-link" aria-hidden="true" />
+                      <span className="sr-only">(opens in a new tab)</span>
                     </Link>
                   </Tooltip>
                 )}
diff --git a/client/app/components/ParameterApplyButton.jsx b/client/app/components/ParameterApplyButton.jsx
index d323bb2036..b7ca767f60 100644
--- a/client/app/components/ParameterApplyButton.jsx
+++ b/client/app/components/ParameterApplyButton.jsx
@@ -7,16 +7,21 @@ import KeyboardShortcuts from "@/services/KeyboardShortcuts";
 
 function ParameterApplyButton({ paramCount, onClick }) {
   // show spinner when count is empty so the fade out is consistent
-  const icon = !paramCount ? "spinner fa-pulse" : "check";
+  const icon = !paramCount ? (
+    <span role="status" aria-live="polite" aria-relevant="additions removals">
+      <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+      <span className="sr-only">Loading...</span>
+    </span>
+  ) : (
+    <i className="fa fa-check" aria-hidden="true" />
+  );
 
   return (
     <div className="parameter-apply-button" data-show={!!paramCount} data-test="ParameterApplyButton">
       <Badge count={paramCount}>
         <Tooltip title={paramCount ? `${KeyboardShortcuts.modKey} + Enter` : null}>
           <span>
-            <Button onClick={onClick}>
-              <i className={`fa fa-${icon}`} /> Apply Changes
-            </Button>
+            <Button onClick={onClick}>{icon} Apply Changes</Button>
           </span>
         </Tooltip>
       </Badge>
diff --git a/client/app/components/ParameterMappingInput.jsx b/client/app/components/ParameterMappingInput.jsx
index 0f186362af..3dec371bdf 100644
--- a/client/app/components/ParameterMappingInput.jsx
+++ b/client/app/components/ParameterMappingInput.jsx
@@ -440,7 +440,9 @@ class TitleEditor extends React.Component {
     if (mapping.type === MappingType.StaticValue) {
       return (
         <Tooltip placement="right" title="Titles for static values don't appear in widgets">
-          <i className="fa fa-eye-slash" />
+          <span tabIndex={0}>
+            <i className="fa fa-eye-slash" aria-hidden="true" />
+          </span>
         </Tooltip>
       );
     }
diff --git a/client/app/components/Parameters.jsx b/client/app/components/Parameters.jsx
index a2aaaf0525..a2a54024a2 100644
--- a/client/app/components/Parameters.jsx
+++ b/client/app/components/Parameters.jsx
@@ -129,10 +129,11 @@ export default class Parameters extends React.Component {
           {editable && (
             <button
               className="btn btn-default btn-xs m-l-5"
+              aria-label="Edit"
               onClick={() => this.showParameterSettings(param, index)}
               data-test={`ParameterSettings-${param.name}`}
               type="button">
-              <i className="fa fa-cog" />
+              <i className="fa fa-cog" aria-hidden="true" />
             </button>
           )}
         </div>
diff --git a/client/app/components/PermissionsEditorDialog/index.jsx b/client/app/components/PermissionsEditorDialog/index.jsx
index bd095a1ad9..b9643d113b 100644
--- a/client/app/components/PermissionsEditorDialog/index.jsx
+++ b/client/app/components/PermissionsEditorDialog/index.jsx
@@ -102,7 +102,16 @@ function UserSelect({ onSelect, shouldShowUser }) {
       placeholder="Add users..."
       showSearch
       onSearch={setSearchTerm}
-      suffixIcon={loadingUsers ? <i className="fa fa-spinner fa-pulse" /> : <i className="fa fa-search" />}
+      suffixIcon={
+        loadingUsers ? (
+          <span role="status" aria-live="polite" aria-relevant="additions removals">
+            <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+            <span className="sr-only">Loading...</span>
+          </span>
+        ) : (
+          <i className="fa fa-search" aria-hidden="true" />
+        )
+      }
       filterOption={false}
       notFoundContent={null}
       value={undefined}
@@ -156,7 +165,12 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
       />
       <div className="d-flex align-items-center m-t-5">
         <h5 className="flex-fill">Users with permissions</h5>
-        {loadingGrantees && <i className="fa fa-spinner fa-pulse" />}
+        {loadingGrantees && (
+          <span role="status" aria-live="polite" aria-relevant="additions removals">
+            <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+            <span className="sr-only">Loading...</span>
+          </span>
+        )}
       </div>
       <div className="scrollbox p-5" style={{ maxHeight: "40vh" }}>
         <List
@@ -171,6 +185,7 @@ function PermissionsEditorDialog({ dialog, author, context, aclUrl }) {
                   <Tooltip title="Remove user permissions">
                     <button // TODO: replace with button component
                       style={{ all: "unset" }}
+                      aria-label="Remove permissions"
                       onClick={() => removePermission(user.id).then(loadUsersWithPermissions)}>
                       <i className="fa fa-remove clickable" aria-hidden="true" />
                     </button>
diff --git a/client/app/components/QuerySelector.jsx b/client/app/components/QuerySelector.jsx
index ff4c74e55e..adcb67ec1e 100644
--- a/client/app/components/QuerySelector.jsx
+++ b/client/app/components/QuerySelector.jsx
@@ -39,7 +39,12 @@ export default function QuerySelector(props) {
       onClick={() => selectQuery(null)}
     />
   );
-  const spinIcon = <i className={cx("fa fa-spinner fa-pulse hide-in-percy", { hidden: !searching })} />;
+  const spinIcon = (
+    <span role="status" aria-live="polite" aria-relevant="additions removals">
+      <i className={cx("fa fa-spinner fa-pulse hide-in-percy", { hidden: !searching })} aria-hidden="true" />
+      <span className="sr-only">Searching...</span>
+    </span>
+  );
 
   useEffect(() => {
     doSearch(searchTerm);
diff --git a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
index 611884140e..dac8575d8c 100644
--- a/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/VisualizationWidget.jsx
@@ -74,7 +74,8 @@ function RefreshIndicator({ refreshStartedAt }) {
   return (
     <div className="refresh-indicator">
       <div className="refresh-icon">
-        <i className="zmdi zmdi-refresh zmdi-hc-spin" />
+        <i className="zmdi zmdi-refresh zmdi-hc-spin" aria-hidden="true" />
+        <span className="sr-only">Refreshing...</span>
       </div>
       <Timer from={refreshStartedAt} />
     </div>
@@ -161,16 +162,19 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
             className="refresh-button hidden-print btn btn-sm btn-default btn-transparent"
             onClick={() => refreshWidget(1)}
             data-test="RefreshButton">
-            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 1 })} />{" "}
+            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 1 })} aria-hidden="true" />
+            <span className="sr-only">
+              {refreshClickButtonId === 1 ? "Refreshing, please wait. " : "Press to refresh. "}
+            </span>{" "}
             <TimeAgo date={updatedAt} />
           </a>
         )}
         <span className="visible-print">
-          <i className="zmdi zmdi-time-restore" /> {formatDateTime(updatedAt)}
+          <i className="zmdi zmdi-time-restore" aria-hidden="true" /> {formatDateTime(updatedAt)}
         </span>
         {isPublic && (
           <span className="small hidden-print">
-            <i className="zmdi zmdi-time-restore" /> <TimeAgo date={updatedAt} />
+            <i className="zmdi zmdi-time-restore" aria-hidden="true" /> <TimeAgo date={updatedAt} />
           </span>
         )}
       </span>
@@ -179,11 +183,14 @@ function VisualizationWidgetFooter({ widget, isPublic, onRefresh, onExpand }) {
           <a
             className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh"
             onClick={() => refreshWidget(2)}>
-            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} />
+            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": refreshClickButtonId === 2 })} aria-hidden="true" />
+            <span className="sr-only">
+              {refreshClickButtonId === 2 ? "Refreshing, please wait." : "Press to refresh."}
+            </span>
           </a>
         )}
         <a className="btn btn-sm btn-default hidden-print btn-transparent btn__refresh" onClick={onExpand}>
-          <i className="zmdi zmdi-fullscreen" />
+          <i className="zmdi zmdi-fullscreen" aria-hidden="true" />
         </a>
       </span>
     </>
@@ -293,9 +300,14 @@ class VisualizationWidget extends React.Component {
         );
       default:
         return (
-          <div className="body-row-auto spinner-container">
+          <div
+            className="body-row-auto spinner-container"
+            role="status"
+            aria-live="polite"
+            aria-relevant="additions removals">
             <div className="spinner">
-              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" />
+              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" aria-hidden="true" />
+              <span className="sr-only">Loading...</span>
             </div>
           </div>
         );
diff --git a/client/app/components/dashboards/dashboard-widget/Widget.jsx b/client/app/components/dashboards/dashboard-widget/Widget.jsx
index 3e0743ed38..28d16f8f4a 100644
--- a/client/app/components/dashboards/dashboard-widget/Widget.jsx
+++ b/client/app/components/dashboards/dashboard-widget/Widget.jsx
@@ -22,8 +22,8 @@ function WidgetDropdownButton({ extraOptions, showDeleteOption, onDelete }) {
   return (
     <div className="widget-menu-regular">
       <Dropdown overlay={WidgetMenu} placement="bottomRight" trigger={["click"]}>
-        <a className="action p-l-15 p-r-15" data-test="WidgetDropdownButton">
-          <i className="zmdi zmdi-more-vert" />
+        <a className="action p-l-15 p-r-15" data-test="WidgetDropdownButton" aria-label="More options">
+          <i className="zmdi zmdi-more-vert" aria-hidden="true" />
         </a>
       </Dropdown>
     </div>
@@ -45,8 +45,13 @@ WidgetDropdownButton.defaultProps = {
 function WidgetDeleteButton({ onClick }) {
   return (
     <div className="widget-menu-remove">
-      <a className="action" title="Remove From Dashboard" onClick={onClick} data-test="WidgetDeleteButton">
-        <i className="zmdi zmdi-close" />
+      <a
+        className="action"
+        title="Remove From Dashboard"
+        onClick={onClick}
+        data-test="WidgetDeleteButton"
+        aria-label="Close">
+        <i className="zmdi zmdi-close" aria-hidden="true" />
       </a>
     </div>
   );
diff --git a/client/app/components/dynamic-form/DynamicForm.jsx b/client/app/components/dynamic-form/DynamicForm.jsx
index 933889198d..c2d908efbc 100644
--- a/client/app/components/dynamic-form/DynamicForm.jsx
+++ b/client/app/components/dynamic-form/DynamicForm.jsx
@@ -201,7 +201,10 @@ export default function DynamicForm({
             className="extra-options-button"
             onClick={() => setShowExtraFields(currentShowExtraFields => !currentShowExtraFields)}>
             Additional Settings
-            <i className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })} />
+            <i
+              className={cx("fa m-l-5", { "fa-caret-up": showExtraFields, "fa-caret-down": !showExtraFields })}
+              aria-hidden="true"
+            />
           </Button>
           <Collapse collapsed={!showExtraFields} className="extra-options-content">
             <DynamicFormFields fields={extraFields} feedbackIcons={feedbackIcons} form={form} />
diff --git a/client/app/components/empty-state/EmptyState.jsx b/client/app/components/empty-state/EmptyState.jsx
index ace203c276..3e5542970d 100644
--- a/client/app/components/empty-state/EmptyState.jsx
+++ b/client/app/components/empty-state/EmptyState.jsx
@@ -188,7 +188,7 @@ function EmptyState({
         <div className="empty-state__summary">
           {header && <h4>{header}</h4>}
           <h2>
-            <i className={icon} />
+            <i className={icon} aria-hidden="true" />
           </h2>
           <p>{description}</p>
           <img src={imageSource} alt={illustration + " Illustration"} width="75%" />
diff --git a/client/app/components/groups/DetailsPageSidebar.jsx b/client/app/components/groups/DetailsPageSidebar.jsx
index 6061b0b34b..a55bb3bf77 100644
--- a/client/app/components/groups/DetailsPageSidebar.jsx
+++ b/client/app/components/groups/DetailsPageSidebar.jsx
@@ -26,13 +26,13 @@ export default function DetailsPageSidebar({
       <Sidebar.Menu items={items} selected={controller.params.currentPage} />
       {canAddMembers && (
         <Button className="w-100 m-t-5" type="primary" onClick={onAddMembersClick}>
-          <i className="fa fa-plus m-r-5" />
+          <i className="fa fa-plus m-r-5" aria-hidden="true" />
           Add Members
         </Button>
       )}
       {canAddDataSources && (
         <Button className="w-100 m-t-5" type="primary" onClick={onAddDataSourcesClick}>
-          <i className="fa fa-plus m-r-5" />
+          <i className="fa fa-plus m-r-5" aria-hidden="true" />
           Add Data Sources
         </Button>
       )}
diff --git a/client/app/components/groups/ListItemAddon.jsx b/client/app/components/groups/ListItemAddon.jsx
index cc9681ec14..bad018404e 100644
--- a/client/app/components/groups/ListItemAddon.jsx
+++ b/client/app/components/groups/ListItemAddon.jsx
@@ -4,16 +4,34 @@ import Tooltip from "antd/lib/tooltip";
 
 export default function ListItemAddon({ isSelected, isStaged, alreadyInGroup, deselectedIcon }) {
   if (isStaged) {
-    return <i className="fa fa-remove" />;
+    return (
+      <>
+        <i className="fa fa-remove" aria-hidden="true" />
+        <span className="sr-only">Remove</span>
+      </>
+    );
   }
   if (alreadyInGroup) {
     return (
       <Tooltip title="Already selected">
-        <i className="fa fa-check" />
+        <span tabIndex={0}>
+          <i className="fa fa-check" aria-hidden="true" />
+          <span className="sr-only">Already selected</span>
+        </span>
       </Tooltip>
     );
   }
-  return isSelected ? <i className="fa fa-check" /> : <i className={`fa ${deselectedIcon}`} />;
+  return isSelected ? (
+    <>
+      <i className="fa fa-check" aria-hidden="true" />
+      <span className="sr-only">Selected</span>
+    </>
+  ) : (
+    <>
+      <i className={`fa ${deselectedIcon}`} aria-hidden="true" />
+      <span className="sr-only">Select</span>
+    </>
+  );
 }
 
 ListItemAddon.propTypes = {
diff --git a/client/app/components/queries/QueryEditor/AutocompleteToggle.jsx b/client/app/components/queries/QueryEditor/AutocompleteToggle.jsx
index 37742b86ec..a6e4a6c884 100644
--- a/client/app/components/queries/QueryEditor/AutocompleteToggle.jsx
+++ b/client/app/components/queries/QueryEditor/AutocompleteToggle.jsx
@@ -25,8 +25,12 @@ export default function AutocompleteToggle({ available, enabled, onToggle }) {
 
   return (
     <Tooltip placement="top" title={tooltipMessage}>
-      <Button className="query-editor-controls-button m-r-5" disabled={!available} onClick={handleClick}>
-        <i className={"icon " + icon} />
+      <Button
+        className="query-editor-controls-button m-r-5"
+        disabled={!available}
+        onClick={handleClick}
+        aria-label={enabled ? "Disable live autocomplete" : "Enable live autocomplete"}>
+        <i className={"icon " + icon} aria-hidden="true" />
       </Button>
     </Tooltip>
   );
diff --git a/client/app/components/queries/SchemaBrowser.jsx b/client/app/components/queries/SchemaBrowser.jsx
index 2ac9a44f34..304c7825f3 100644
--- a/client/app/components/queries/SchemaBrowser.jsx
+++ b/client/app/components/queries/SchemaBrowser.jsx
@@ -11,6 +11,7 @@ import List from "react-virtualized/dist/commonjs/List";
 import useDataSourceSchema from "@/pages/queries/hooks/useDataSourceSchema";
 import useImmutableCallback from "@/lib/hooks/useImmutableCallback";
 import LoadingState from "../items-list/components/LoadingState";
+import PlainButton from "@/components/PlainButton";
 
 const SchemaItemColumnType = PropTypes.shape({
   name: PropTypes.string.isRequired,
@@ -47,18 +48,16 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
     <div {...props}>
       {/* TODO: Replace with a button */}
       <div className="table-name" onClick={onToggle}>
-        <i className="fa fa-table m-r-5" />
+        <i className="fa fa-table m-r-5" aria-hidden="true" />
         <strong>
           <span title={item.name}>{tableDisplayName}</span>
           {!isNil(item.size) && <span> ({item.size})</span>}
         </strong>
 
         <Tooltip title="Insert table name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
-          <i
-            className="fa fa-angle-double-right copy-to-editor"
-            aria-hidden="true"
-            onClick={e => handleSelect(e, item.name)}
-          />
+          <PlainButton onClick={e => handleSelect(e, item.name)}>
+            <i className="fa fa-angle-double-right copy-to-editor" aria-hidden="true" />
+          </PlainButton>
         </Tooltip>
       </div>
       {expanded && (
@@ -73,11 +72,9 @@ function SchemaItem({ item, expanded, onToggle, onSelect, ...props }) {
                 <div key={columnName} className="table-open">
                   {columnName} {columnType && <span className="column-type">{columnType}</span>}
                   <Tooltip title="Insert column name into query text" mouseEnterDelay={0} mouseLeaveDelay={0}>
-                    <i
-                      className="fa fa-angle-double-right copy-to-editor"
-                      aria-hidden="true"
-                      onClick={e => handleSelect(e, columnName)}
-                    />
+                    <PlainButton onClick={e => handleSelect(e, columnName)}>
+                      <i className="fa fa-angle-double-right copy-to-editor" aria-hidden="true" />
+                    </PlainButton>
                   </Tooltip>
                 </div>
               );
@@ -238,7 +235,8 @@ export default function SchemaBrowser({
 
         <Tooltip title="Refresh Schema">
           <Button onClick={() => refreshSchema(true)}>
-            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": isLoading })} />
+            <i className={cx("zmdi zmdi-refresh", { "zmdi-hc-spin": isLoading })} aria-hidden="true" />
+            <span className="sr-only">{isLoading ? "Loading, please wait." : "Press to refresh."}</span>
           </Button>
         </Tooltip>
       </div>
diff --git a/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx b/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
index 741b2455fd..e338493678 100644
--- a/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
+++ b/client/app/components/queries/editor-components/databricks/DatabricksSchemaBrowser.jsx
@@ -98,12 +98,12 @@ export default function DatabricksSchemaBrowser({
               onDropdownVisibleChange={setIsDatabaseSelectOpen}
               placeholder={
                 <>
-                  <i className="fa fa-database m-r-5" /> Database
+                  <i className="fa fa-database m-r-5" aria-hidden="true" /> Database
                 </>
               }>
               {filteredDatabases.map(database => (
                 <Select.Option key={database}>
-                  <i className="fa fa-database m-r-5" />
+                  <i className="fa fa-database m-r-5" aria-hidden="true" />
                   {database}
                 </Select.Option>
               ))}
diff --git a/client/app/components/tags-control/TagsControl.jsx b/client/app/components/tags-control/TagsControl.jsx
index 2b4dd57ef1..546aa3a5ac 100644
--- a/client/app/components/tags-control/TagsControl.jsx
+++ b/client/app/components/tags-control/TagsControl.jsx
@@ -41,11 +41,16 @@ export class TagsControl extends React.Component {
         data-test="EditTagsButton">
         {tags.length === 0 && (
           <React.Fragment>
-            <i className="zmdi zmdi-plus m-r-5" />
+            <i className="zmdi zmdi-plus m-r-5" aria-hidden="true" />
             Add tag
           </React.Fragment>
         )}
-        {tags.length > 0 && <i className="zmdi zmdi-edit" />}
+        {tags.length > 0 && (
+          <>
+            <i className="zmdi zmdi-edit" aria-hidden="true" />
+            <span className="sr-only">Edit</span>
+          </>
+        )}
       </a>
     );
   }
diff --git a/client/app/config/antd-spinner.jsx b/client/app/config/antd-spinner.jsx
index 7b6d81b9ab..200de33620 100644
--- a/client/app/config/antd-spinner.jsx
+++ b/client/app/config/antd-spinner.jsx
@@ -1,4 +1,9 @@
 import React from "react";
 import Spin from "antd/lib/spin";
 
-Spin.setDefaultIndicator(<i className="fa fa-spinner fa-pulse" />);
+Spin.setDefaultIndicator(
+  <span role="status" aria-live="polite" aria-relevant="additions removals">
+    <i className="fa fa-spinner fa-pulse" aria-hidden="true" />
+    <span className="sr-only">Loading...</span>
+  </span>
+);
diff --git a/client/app/lib/hooks/useLazyRef.ts b/client/app/lib/hooks/useLazyRef.ts
new file mode 100644
index 0000000000..bf42268178
--- /dev/null
+++ b/client/app/lib/hooks/useLazyRef.ts
@@ -0,0 +1,11 @@
+import { useRef } from "react";
+
+export function useLazyRef<T>(getInitialValue: () => T) {
+  const lazyRef = useRef<T>(null) as React.MutableRefObject<T>;
+
+  if (lazyRef.current === null) {
+    lazyRef.current = getInitialValue();
+  }
+
+  return lazyRef;
+}
diff --git a/client/app/lib/hooks/useUniqueId.ts b/client/app/lib/hooks/useUniqueId.ts
new file mode 100644
index 0000000000..ec62c0e4a8
--- /dev/null
+++ b/client/app/lib/hooks/useUniqueId.ts
@@ -0,0 +1,7 @@
+import { uniqueId } from "lodash";
+import { useLazyRef } from "./useLazyRef";
+
+export function useUniqueId(prefix: string) {
+  const { current: id } = useLazyRef(() => uniqueId(prefix));
+  return id;
+}
diff --git a/client/app/pages/alert/AlertEdit.jsx b/client/app/pages/alert/AlertEdit.jsx
index b440ab4483..64bff87631 100644
--- a/client/app/pages/alert/AlertEdit.jsx
+++ b/client/app/pages/alert/AlertEdit.jsx
@@ -55,11 +55,20 @@ export default class AlertEdit extends React.Component {
         <Title name={name} alert={alert} onChange={onNameChange} editMode>
           <DynamicComponent name="AlertEdit.HeaderExtra" alert={alert} />
           <Button className="m-r-5" onClick={() => this.cancel()}>
-            <i className="fa fa-times m-r-5" />
+            <i className="fa fa-times m-r-5" aria-hidden="true" />
             Cancel
           </Button>
           <Button type="primary" onClick={() => this.save()}>
-            {saving ? <i className="fa fa-spinner fa-pulse m-r-5" /> : <i className="fa fa-check m-r-5" />}
+            {saving ? (
+              <span role="status" aria-live="polite" aria-relevant="additions removals">
+                <i className="fa fa-spinner fa-pulse m-r-5" aria-hidden="true" />
+                <span className="sr-only">Saving...</span>
+              </span>
+            ) : (
+              <>
+                <i className="fa fa-check m-r-5" aria-hidden="true" />
+              </>
+            )}
             Save Changes
           </Button>
           {menuButton}
@@ -101,7 +110,8 @@ export default class AlertEdit extends React.Component {
             </Form>
             <div>
               <HelpTrigger className="f-13" type="ALERT_SETUP">
-                Setup Instructions <i className="fa fa-question-circle" />
+                Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+                <span className="sr-only">(help)</span>
               </HelpTrigger>
             </div>
           </div>
diff --git a/client/app/pages/alert/AlertNew.jsx b/client/app/pages/alert/AlertNew.jsx
index 18415ab3e3..9e128ed2fc 100644
--- a/client/app/pages/alert/AlertNew.jsx
+++ b/client/app/pages/alert/AlertNew.jsx
@@ -76,13 +76,19 @@ export default class AlertNew extends React.Component {
               )}
               <HorizontalFormItem>
                 <Button type="primary" onClick={this.save} disabled={!query} className="btn-create-alert">
-                  {saving && <i className="fa fa-spinner fa-pulse m-r-5" />}
+                  {saving && (
+                    <span role="status" aria-live="polite" aria-relevant="additions removals">
+                      <i className="fa fa-spinner fa-pulse m-r-5" aria-hidden="true" />
+                      <span className="sr-only">Saving...</span>
+                    </span>
+                  )}
                   Create Alert
                 </Button>
               </HorizontalFormItem>
             </Form>
             <HelpTrigger className="f-13" type="ALERT_SETUP">
-              Setup Instructions <i className="fa fa-question-circle" />
+              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+              <span className="sr-only">(help)</span>
             </HelpTrigger>
           </div>
         </div>
diff --git a/client/app/pages/alert/AlertView.jsx b/client/app/pages/alert/AlertView.jsx
index 2742da8af9..c31b549b74 100644
--- a/client/app/pages/alert/AlertView.jsx
+++ b/client/app/pages/alert/AlertView.jsx
@@ -70,7 +70,7 @@ export default class AlertView extends React.Component {
           <DynamicComponent name="AlertView.HeaderExtra" alert={alert} />
           <Tooltip title={canEdit ? "" : "You do not have sufficient permissions to edit this alert"}>
             <Button type="default" onClick={canEdit ? onEdit : null} className={cx({ disabled: !canEdit })}>
-              <i className="fa fa-edit m-r-5" />
+              <i className="fa fa-edit m-r-5" aria-hidden="true" />
               Edit
             </Button>
             {menuButton}
@@ -111,7 +111,7 @@ export default class AlertView extends React.Component {
                   className="m-b-20"
                   message={
                     <>
-                      <i className="fa fa-bell-slash-o" /> Notifications are muted
+                      <i className="fa fa-bell-slash-o" aria-hidden="true" /> Notifications are muted
                     </>
                   }
                   description={
@@ -140,7 +140,8 @@ export default class AlertView extends React.Component {
                 Destinations{" "}
                 <Tooltip title="Open Alert Destinations page in a new tab.">
                   <Link href="destinations" target="_blank">
-                    <i className="fa fa-external-link f-13" />
+                    <i className="fa fa-external-link f-13" aria-hidden="true" />
+                    <span className="sr-only">(opens in a new tab)</span>
                   </Link>
                 </Tooltip>
               </h4>
diff --git a/client/app/pages/alert/components/AlertDestinations.jsx b/client/app/pages/alert/components/AlertDestinations.jsx
index 3034f4ce0f..19d96c11fc 100644
--- a/client/app/pages/alert/components/AlertDestinations.jsx
+++ b/client/app/pages/alert/components/AlertDestinations.jsx
@@ -88,7 +88,7 @@ export default class AlertDestinations extends React.Component {
       showCount: true,
       extraFooterContent: (
         <>
-          <i className="fa fa-info-circle" /> Create new destinations in{" "}
+          <i className="fa fa-info-circle" aria-hidden="true" /> Create new destinations in{" "}
           <Tooltip title="Opens page in a new tab.">
             <Link href="destinations/new" target="_blank">
               Alert Destinations
@@ -190,12 +190,12 @@ export default class AlertDestinations extends React.Component {
             size="small"
             className="add-button"
             onClick={this.showAddAlertSubDialog}>
-            <i className="fa fa-plus f-12 m-r-5" /> Add
+            <i className="fa fa-plus f-12 m-r-5" aria-hidden="true" /> Add
           </Button>
         </Tooltip>
         <ul>
           <li className="destination-wrapper">
-            <i className="destination-icon fa fa-envelope" />
+            <i className="destination-icon fa fa-envelope" aria-hidden="true" />
             <span className="flex-fill">{currentUser.email}</span>
             <EmailSettingsWarning className="destination-warning" featureName="alert emails" mode="icon" />
             {!mailSettingsMissing && (
diff --git a/client/app/pages/alert/components/MenuButton.jsx b/client/app/pages/alert/components/MenuButton.jsx
index bf83f68aa6..e8c1dc9c2f 100644
--- a/client/app/pages/alert/components/MenuButton.jsx
+++ b/client/app/pages/alert/components/MenuButton.jsx
@@ -56,7 +56,9 @@ export default function MenuButton({ doDelete, canEdit, mute, unmute, muted }) {
           </Menu.Item>
         </Menu>
       }>
-      <Button>{loading ? <LoadingOutlinedIcon /> : <EllipsisOutlinedIcon rotate={90} />}</Button>
+      <Button aria-label="More actions">
+        {loading ? <LoadingOutlinedIcon /> : <EllipsisOutlinedIcon rotate={90} aria-hidden="true" />}
+      </Button>
     </Dropdown>
   );
 }
diff --git a/client/app/pages/alert/components/NotificationTemplate.jsx b/client/app/pages/alert/components/NotificationTemplate.jsx
index fa8a781799..3237ed8338 100644
--- a/client/app/pages/alert/components/NotificationTemplate.jsx
+++ b/client/app/pages/alert/components/NotificationTemplate.jsx
@@ -94,7 +94,8 @@ function NotificationTemplate({ alert, query, columnNames, resultValues, subject
             data-test="CustomBody"
           />
           <HelpTrigger type="ALERT_NOTIF_TEMPLATE_GUIDE" className="f-13">
-            <i className="fa fa-question-circle" /> Formatting guide
+            <i className="fa fa-question-circle" aria-hidden="true" /> Formatting guide{" "}
+            <span className="sr-only">(help)</span>
           </HelpTrigger>
         </div>
       )}
diff --git a/client/app/pages/alert/components/Query.jsx b/client/app/pages/alert/components/Query.jsx
index 5793407c98..fe1cc46383 100644
--- a/client/app/pages/alert/components/Query.jsx
+++ b/client/app/pages/alert/components/Query.jsx
@@ -41,8 +41,8 @@ export default function QueryFormItem({ query, queryResult, onChange, editMode }
       ) : (
         <Tooltip title="Open query in a new tab.">
           <Link href={`queries/${query.id}`} target="_blank" rel="noopener noreferrer" className="alert-query-link">
-            {query.name}
-            <i className="fa fa-external-link" />
+            {query.name} <i className="fa fa-external-link" aria-hidden="true" />
+            <span className="sr-only">(opens in a new tab)</span>
           </Link>
         </Tooltip>
       )}
diff --git a/client/app/pages/alert/components/Query.less b/client/app/pages/alert/components/Query.less
index 009af32088..5a8b3b3267 100644
--- a/client/app/pages/alert/components/Query.less
+++ b/client/app/pages/alert/components/Query.less
@@ -1,13 +1,8 @@
 .alert-query-link {
-  font-weight: 600;
-  text-decoration: underline;
-  display: inline-block;
-  position: relative;
-  top: -1px;
+  font-size: 14px;
 
   .fa-external-link {
     vertical-align: text-bottom;
-    margin-left: 4px;
   }
 }
 
@@ -23,4 +18,4 @@
       display: none !important;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/app/pages/alerts/AlertsList.jsx b/client/app/pages/alerts/AlertsList.jsx
index 7526df42fc..d4101d8214 100644
--- a/client/app/pages/alerts/AlertsList.jsx
+++ b/client/app/pages/alerts/AlertsList.jsx
@@ -29,9 +29,19 @@ class AlertsList extends React.Component {
 
   listColumns = [
     Columns.custom.sortable(
-      (text, alert) => <i className={`fa fa-bell-${alert.options.muted ? "slash" : "o"} p-r-0`} />,
+      (text, alert) => (
+        <span title={alert.options.muted ? "Muted" : "Active"}>
+          <i className={`fa fa-bell-${alert.options.muted ? "slash" : "o"} p-r-0`} aria-hidden="true" />
+          <span className="sr-only">{alert.options.muted ? "Muted" : "Active"}</span>
+        </span>
+      ),
       {
-        title: <i className="fa fa-bell p-r-0" />,
+        title: (
+          <>
+            <i className="fa fa-bell p-r-0" aria-hidden="true" />
+            <span className="sr-only">Sort by notification status.</span>
+          </>
+        ),
         field: "muted",
         width: "1%",
       }
@@ -78,7 +88,7 @@ class AlertsList extends React.Component {
             actions={
               currentUser.hasPermission("list_alerts") ? (
                 <Link.Button block type="primary" href="alerts/new">
-                  <i className="fa fa-plus m-r-5" />
+                  <i className="fa fa-plus m-r-5" aria-hidden="true" />
                   New Alert
                 </Link.Button>
               ) : null
diff --git a/client/app/pages/dashboards/DashboardList.jsx b/client/app/pages/dashboards/DashboardList.jsx
index d369199be5..972c83b4c7 100644
--- a/client/app/pages/dashboards/DashboardList.jsx
+++ b/client/app/pages/dashboards/DashboardList.jsx
@@ -96,7 +96,7 @@ function DashboardList({ controller }) {
           actions={
             currentUser.hasPermission("create_dashboard") ? (
               <Button block type="primary" onClick={() => CreateDashboardDialog.showModal()}>
-                <i className="fa fa-plus m-r-5" />
+                <i className="fa fa-plus m-r-5" aria-hidden="true" />
                 New Dashboard
               </Button>
             ) : null
diff --git a/client/app/pages/dashboards/DashboardPage.jsx b/client/app/pages/dashboards/DashboardPage.jsx
index d57cbabc84..63c796ee4b 100644
--- a/client/app/pages/dashboards/DashboardPage.jsx
+++ b/client/app/pages/dashboards/DashboardPage.jsx
@@ -47,7 +47,7 @@ function AddWidgetContainer({ dashboardConfiguration, className, ...props }) {
   return (
     <div className={cx("add-widget-container", className)} {...props}>
       <h2>
-        <i className="zmdi zmdi-widgets" />
+        <i className="zmdi zmdi-widgets" aria-hidden="true" />
         <span className="hidden-xs hidden-sm">
           Widgets are individual query visualizations or text boxes you can place on your dashboard in various
           arrangements.
diff --git a/client/app/pages/dashboards/components/DashboardHeader.jsx b/client/app/pages/dashboards/components/DashboardHeader.jsx
index be695d6d7e..d64a035a85 100644
--- a/client/app/pages/dashboards/components/DashboardHeader.jsx
+++ b/client/app/pages/dashboards/components/DashboardHeader.jsx
@@ -78,7 +78,7 @@ function RefreshButton({ dashboardConfiguration }) {
     <Button.Group>
       <Tooltip title={refreshRate ? `Auto Refreshing every ${durationHumanize(refreshRate)}` : null}>
         <Button type={buttonType(refreshRate)} onClick={() => refreshDashboard()}>
-          <i className={cx("zmdi zmdi-refresh m-r-5", { "zmdi-hc-spin": refreshing })} />
+          <i className={cx("zmdi zmdi-refresh m-r-5", { "zmdi-hc-spin": refreshing })} aria-hidden="true" />
           {refreshRate ? durationHumanize(refreshRate) : "Refresh"}
         </Button>
       </Tooltip>
@@ -96,7 +96,7 @@ function RefreshButton({ dashboardConfiguration }) {
           </Menu>
         }>
         <Button className="icon-button hidden-xs" type={buttonType(refreshRate)}>
-          <i className="fa fa-angle-down" />
+          <i className="fa fa-angle-down" aria-hidden="true" />
           <span className="sr-only">Split button!</span>
         </Button>
       </Dropdown>
@@ -155,8 +155,8 @@ function DashboardMoreOptionsButton({ dashboardConfiguration }) {
           </Menu.Item>
         </Menu>
       }>
-      <Button className="icon-button m-l-5" data-test="DashboardMoreButton">
-        <EllipsisOutlinedIcon rotate={90} />
+      <Button className="icon-button m-l-5" data-test="DashboardMoreButton" aria-label="More actions">
+        <EllipsisOutlinedIcon rotate={90} aria-hidden="true" />
       </Button>
     </Dropdown>
   );
@@ -193,8 +193,12 @@ function DashboardControl({ dashboardConfiguration, headerExtra }) {
           {showRefreshButton && <RefreshButton dashboardConfiguration={dashboardConfiguration} />}
           {showFullscreenButton && (
             <Tooltip className="hidden-xs" title="Enable/Disable Fullscreen display">
-              <Button type={buttonType(fullscreen)} className="icon-button m-l-5" onClick={toggleFullscreen}>
-                <i className="zmdi zmdi-fullscreen" />
+              <Button
+                type={buttonType(fullscreen)}
+                className="icon-button m-l-5"
+                onClick={toggleFullscreen}
+                aria-label="Toggle fullscreen display">
+                <i className="zmdi zmdi-fullscreen" aria-hidden="true" />
               </Button>
             </Tooltip>
           )}
@@ -205,8 +209,9 @@ function DashboardControl({ dashboardConfiguration, headerExtra }) {
                 className="icon-button m-l-5"
                 type={buttonType(dashboard.publicAccessEnabled)}
                 onClick={showShareDashboardDialog}
-                data-test="OpenShareForm">
-                <i className="zmdi zmdi-share" />
+                data-test="OpenShareForm"
+                aria-label="Share">
+                <i className="zmdi zmdi-share" aria-hidden="true" />
               </Button>
             </Tooltip>
           )}
@@ -254,7 +259,7 @@ function DashboardEditControl({ dashboardConfiguration, headerExtra }) {
         </Button>
       ) : (
         <Button loading={doneBtnClickedWhileSaving} type="primary" onClick={() => setEditingLayout(false)}>
-          {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" />} Done Editing
+          {!doneBtnClickedWhileSaving && <i className="fa fa-check m-r-5" aria-hidden="true" />} Done Editing
         </Button>
       )}
       {headerExtra}
diff --git a/client/app/pages/data-sources/DataSourcesList.jsx b/client/app/pages/data-sources/DataSourcesList.jsx
index 45ebc96a42..9934207a9a 100644
--- a/client/app/pages/data-sources/DataSourcesList.jsx
+++ b/client/app/pages/data-sources/DataSourcesList.jsx
@@ -138,7 +138,7 @@ class DataSourcesList extends React.Component {
       <div>
         <div className="m-b-15">
           <Button {...newDataSourceProps}>
-            <i className="fa fa-plus m-r-5" />
+            <i className="fa fa-plus m-r-5" aria-hidden="true" />
             New Data Source
           </Button>
           <DynamicComponent name="DataSourcesListExtra" />
diff --git a/client/app/pages/data-sources/EditDataSource.jsx b/client/app/pages/data-sources/EditDataSource.jsx
index 169bf147f5..c7a6f17a25 100644
--- a/client/app/pages/data-sources/EditDataSource.jsx
+++ b/client/app/pages/data-sources/EditDataSource.jsx
@@ -120,7 +120,8 @@ class EditDataSource extends React.Component {
         <div className="text-right m-r-10">
           {HELP_TRIGGER_TYPES[helpTriggerType] && (
             <HelpTrigger className="f-13" type={helpTriggerType}>
-              Setup Instructions <i className="fa fa-question-circle" />
+              Setup Instructions <i className="fa fa-question-circle" aria-hidden="true" />
+              <span className="sr-only">(help)</span>
             </HelpTrigger>
           )}
         </div>
diff --git a/client/app/pages/destinations/DestinationsList.jsx b/client/app/pages/destinations/DestinationsList.jsx
index 4a1c052c67..f263b5fa6c 100644
--- a/client/app/pages/destinations/DestinationsList.jsx
+++ b/client/app/pages/destinations/DestinationsList.jsx
@@ -120,7 +120,7 @@ class DestinationsList extends React.Component {
       <div>
         <div className="m-b-15">
           <Button {...newDestinationProps}>
-            <i className="fa fa-plus m-r-5" />
+            <i className="fa fa-plus m-r-5" aria-hidden="true" />
             New Alert Destination
           </Button>
         </div>
diff --git a/client/app/pages/groups/GroupDataSources.jsx b/client/app/pages/groups/GroupDataSources.jsx
index e5d26eb4b3..a77912b2f3 100644
--- a/client/app/pages/groups/GroupDataSources.jsx
+++ b/client/app/pages/groups/GroupDataSources.jsx
@@ -72,9 +72,9 @@ class GroupDataSources extends React.Component {
 
         return (
           <Dropdown trigger={["click"]} overlay={menu}>
-            <Button className="w-100">
+            <Button className="w-100" aria-label="Permissions">
               {datasource.view_only ? "View Only" : "Full Access"}
-              <DownOutlinedIcon />
+              <DownOutlinedIcon aria-hidden="true" />
             </Button>
           </Dropdown>
         );
@@ -192,7 +192,7 @@ class GroupDataSources extends React.Component {
                 <p>There are no data sources in this group yet.</p>
                 {currentUser.isAdmin && (
                   <Button type="primary" onClick={this.addDataSources}>
-                    <i className="fa fa-plus m-r-5" />
+                    <i className="fa fa-plus m-r-5" aria-hidden="true" />
                     Add Data Sources
                   </Button>
                 )}
diff --git a/client/app/pages/groups/GroupMembers.jsx b/client/app/pages/groups/GroupMembers.jsx
index c02546c2ca..06a37f99ce 100644
--- a/client/app/pages/groups/GroupMembers.jsx
+++ b/client/app/pages/groups/GroupMembers.jsx
@@ -155,7 +155,7 @@ class GroupMembers extends React.Component {
                 <p>There are no members in this group yet.</p>
                 {currentUser.isAdmin && (
                   <Button type="primary" onClick={this.addMembers}>
-                    <i className="fa fa-plus m-r-5" />
+                    <i className="fa fa-plus m-r-5" aria-hidden="true" />
                     Add Members
                   </Button>
                 )}
diff --git a/client/app/pages/groups/GroupsList.jsx b/client/app/pages/groups/GroupsList.jsx
index 0710e671e1..e4dca95bb2 100644
--- a/client/app/pages/groups/GroupsList.jsx
+++ b/client/app/pages/groups/GroupsList.jsx
@@ -93,7 +93,7 @@ class GroupsList extends React.Component {
         {currentUser.isAdmin && (
           <div className="m-b-15">
             <Button type="primary" onClick={this.createGroup}>
-              <i className="fa fa-plus m-r-5" />
+              <i className="fa fa-plus m-r-5" aria-hidden="true" />
               New Group
             </Button>
           </div>
diff --git a/client/app/pages/queries-list/QueriesList.jsx b/client/app/pages/queries-list/QueriesList.jsx
index 5201f43450..24575d19bc 100644
--- a/client/app/pages/queries-list/QueriesList.jsx
+++ b/client/app/pages/queries-list/QueriesList.jsx
@@ -123,7 +123,7 @@ function QueriesList({ controller }) {
           actions={
             currentUser.hasPermission("create_query") ? (
               <Link.Button block type="primary" href="queries/new">
-                <i className="fa fa-plus m-r-5" />
+                <i className="fa fa-plus m-r-5" aria-hidden="true" />
                 New Query
               </Link.Button>
             ) : null
diff --git a/client/app/pages/queries/QueryView.jsx b/client/app/pages/queries/QueryView.jsx
index 6c6913be5f..8a8dc81b93 100644
--- a/client/app/pages/queries/QueryView.jsx
+++ b/client/app/pages/queries/QueryView.jsx
@@ -123,7 +123,7 @@ function QueryView(props) {
             !addingDescription &&
             !fullscreen && (
               <a className="label label-tag hidden-xs" role="none" onClick={() => setAddingDescription(true)}>
-                <i className="zmdi zmdi-plus m-r-5" />
+                <i className="zmdi zmdi-plus m-r-5" aria-hidden="true" />
                 Add description
               </a>
             )
diff --git a/client/app/pages/queries/VisualizationEmbed.jsx b/client/app/pages/queries/VisualizationEmbed.jsx
index 28ff80849d..3f1d0a0deb 100644
--- a/client/app/pages/queries/VisualizationEmbed.jsx
+++ b/client/app/pages/queries/VisualizationEmbed.jsx
@@ -108,11 +108,11 @@ function VisualizationEmbedFooter({
       {!hideTimestamp && (
         <span>
           <span className="small hidden-print">
-            <i className="zmdi zmdi-time-restore" />{" "}
+            <i className="zmdi zmdi-time-restore" aria-hidden="true" />{" "}
             {refreshStartedAt ? <Timer from={refreshStartedAt} /> : <TimeAgo date={updatedAt} />}
           </span>
           <span className="small visible-print">
-            <i className="zmdi zmdi-time-restore" /> {formatDateTime(updatedAt)}
+            <i className="zmdi zmdi-time-restore" aria-hidden="true" /> {formatDateTime(updatedAt)}
           </span>
         </span>
       )}
@@ -120,14 +120,15 @@ function VisualizationEmbedFooter({
         <span className="hidden-print">
           <Tooltip title="Open in Redash">
             <Link.Button className="icon-button" href={queryUrl} target="_blank">
-              <i className="fa fa-external-link" />
+              <i className="fa fa-external-link" aria-hidden="true" />
+              <span className="sr-only">Open in Redash</span>
             </Link.Button>
           </Tooltip>
           {!query.hasParameters() && (
             <Dropdown overlay={downloadMenu} disabled={!queryResults} trigger={["click"]} placement="topLeft">
               <Button loading={!queryResults && !!refreshStartedAt} className="m-l-5">
                 Download Dataset
-                <i className="fa fa-caret-up m-l-5" />
+                <i className="fa fa-caret-up m-l-5" aria-hidden="true" />
               </Button>
             </Dropdown>
           )}
@@ -243,7 +244,8 @@ function VisualizationEmbed({ queryId, visualizationId, apiKey, onError }) {
         {!queryResults && refreshStartedAt && (
           <div className="d-flex justify-content-center">
             <div className="spinner">
-              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" />
+              <i className="zmdi zmdi-refresh zmdi-hc-spin zmdi-hc-5x" aria-hidden="true" />
+              <span className="sr-only">Refreshing...</span>
             </div>
           </div>
         )}
diff --git a/client/app/pages/queries/components/QueryPageHeader.jsx b/client/app/pages/queries/components/QueryPageHeader.jsx
index 6058936acf..17b3d5cd9c 100644
--- a/client/app/pages/queries/components/QueryPageHeader.jsx
+++ b/client/app/pages/queries/components/QueryPageHeader.jsx
@@ -90,8 +90,8 @@ export default function QueryPageHeader({
             isEnabled: !queryFlags.isNew && queryFlags.canFork && !isDuplicating,
             title: (
               <React.Fragment>
-                Fork
-                <i className="fa fa-external-link m-l-5" />
+                Fork <i className="fa fa-external-link m-l-5" aria-hidden="true" />
+                <span className="sr-only">(opens in a new tab)</span>
               </React.Fragment>
             ),
             onClick: duplicateQuery,
@@ -173,7 +173,7 @@ export default function QueryPageHeader({
         {headerExtra}
         {isDesktop && queryFlags.isDraft && !queryFlags.isArchived && !queryFlags.isNew && queryFlags.canEdit && (
           <Button className="m-r-5" onClick={publishQuery}>
-            <i className="fa fa-paper-plane m-r-5" /> Publish
+            <i className="fa fa-paper-plane m-r-5" aria-hidden="true" /> Publish
           </Button>
         )}
 
@@ -199,8 +199,8 @@ export default function QueryPageHeader({
 
         {!queryFlags.isNew && (
           <Dropdown overlay={moreActionsMenu} trigger={["click"]}>
-            <Button data-test="QueryPageHeaderMoreButton">
-              <EllipsisOutlinedIcon rotate={90} />
+            <Button data-test="QueryPageHeaderMoreButton" aria-label="More actions">
+              <EllipsisOutlinedIcon rotate={90} aria-hidden="true" />
             </Button>
           </Dropdown>
         )}
diff --git a/client/app/pages/queries/components/QueryVisualizationTabs.jsx b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
index 13b29de98e..40771b7113 100644
--- a/client/app/pages/queries/components/QueryVisualizationTabs.jsx
+++ b/client/app/pages/queries/components/QueryVisualizationTabs.jsx
@@ -58,8 +58,8 @@ function TabWithDeleteButton({ visualizationName, canDelete, onDelete, ...props
     <span {...props}>
       {visualizationName}
       {canDelete && (
-        <a className="delete-visualization-button" onClick={handleDelete}>
-          <i className="zmdi zmdi-close" />
+        <a className="delete-visualization-button" onClick={handleDelete} aria-label="Close" title="Close">
+          <i className="zmdi zmdi-close" aria-hidden="true" />
         </a>
       )}
     </span>
@@ -111,7 +111,7 @@ export default function QueryVisualizationTabs({
         data-test="NewVisualization"
         type="link"
         onClick={() => onAddVisualization()}>
-        <i className="fa fa-plus" />
+        <i className="fa fa-plus" aria-hidden="true" />
         <span className="m-l-5 hidden-xs">Add Visualization</span>
       </Button>
     );
diff --git a/client/app/pages/query-snippets/QuerySnippetsList.jsx b/client/app/pages/query-snippets/QuerySnippetsList.jsx
index 57cf26fefd..01683ba766 100644
--- a/client/app/pages/query-snippets/QuerySnippetsList.jsx
+++ b/client/app/pages/query-snippets/QuerySnippetsList.jsx
@@ -147,7 +147,7 @@ class QuerySnippetsList extends React.Component {
             type="primary"
             onClick={() => this.showSnippetDialog()}
             disabled={!policy.isCreateQuerySnippetEnabled()}>
-            <i className="fa fa-plus m-r-5" />
+            <i className="fa fa-plus m-r-5" aria-hidden="true" />
             New Query Snippet
           </Button>
         </div>
diff --git a/client/app/pages/users/UsersList.jsx b/client/app/pages/users/UsersList.jsx
index 6e19c8faca..522e8890f7 100644
--- a/client/app/pages/users/UsersList.jsx
+++ b/client/app/pages/users/UsersList.jsx
@@ -197,7 +197,7 @@ class UsersList extends React.Component {
     return (
       <div className="m-b-15">
         <Button type="primary" disabled={!policy.isCreateUserEnabled()} onClick={this.showCreateUserDialog}>
-          <i className="fa fa-plus m-r-5" />
+          <i className="fa fa-plus m-r-5" aria-hidden="true" />
           New User
         </Button>
         <DynamicComponent name="UsersListExtra" />
diff --git a/client/app/services/restoreSession.jsx b/client/app/services/restoreSession.jsx
index 09f36e1132..b7773325ed 100644
--- a/client/app/services/restoreSession.jsx
+++ b/client/app/services/restoreSession.jsx
@@ -32,8 +32,8 @@ function showRestoreSessionPrompt(loginUrl, onSuccess) {
     content: "Your session has expired. Please login to continue.",
     okText: (
       <React.Fragment>
-        <i className="fa fa-external-link m-r-5" />
-        Login
+        Login <i className="fa fa-external-link m-r-5" aria-hidden="true" />
+        <span className="sr-only">(opens in a new tab)</span>
       </React.Fragment>
     ),
     centered: true,