From 14d7b43a8dd80e0f2bacdfa4e2e80de7a1771639 Mon Sep 17 00:00:00 2001
From: Fedo Hagge-Kubat <fedo.hagge-kubat@aitema.de>
Date: Mon, 2 Mar 2026 18:34:07 +0100
Subject: [PATCH 1/3] =?UTF-8?q?fix(a11y):=20WCAG=202.4.6=20=E2=80=94=20add?=
 =?UTF-8?q?=20descriptive=20headings=20and=20section=20labels?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add visually-hidden h1 with dashboard name to Dashboard Header
- Add visually-hidden h1 with chart name to Explore/Chart Header
- Add visually-hidden h1 to Home page and ChartCreation page
- Fix ChartCreation heading hierarchy (h3 → h2)
- Add sr-only h2 section headings for Filters and Dashboard Content areas
- All headings use clip/sr-only pattern for screen readers only

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../DashboardBuilder/DashboardBuilder.tsx       | 16 ++++++++++++++++
 .../src/dashboard/components/Header/index.tsx   | 13 +++++++++++++
 .../components/ExploreChartHeader/index.tsx     | 15 ++++++++++++++-
 .../src/pages/ChartCreation/index.tsx           | 17 +++++++++++++++--
 superset-frontend/src/pages/Home/index.tsx      | 13 +++++++++++++
 5 files changed, 71 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index a507c65318d..872f6c8d8a8 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -351,6 +351,18 @@ const StyledDashboardContent = styled.div<{
   `}
 `;
 
+const SrOnlyH2 = styled.h2`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
 const ELEMENT_ON_SCREEN_OPTIONS = {
   threshold: [1],
 };
@@ -616,6 +628,8 @@ const DashboardBuilder = () => {
   return (
     <DashboardWrapper>
       {isVerticalFilterBarVisible && (
+        <>
+        <SrOnlyH2>{t('Filters')}</SrOnlyH2>
         <ResizableSidebar
           id={`dashboard:${dashboardId}`}
           enable={dashboardFiltersOpen}
@@ -625,6 +639,7 @@ const DashboardBuilder = () => {
         >
           {renderChild}
         </ResizableSidebar>
+        </>
       )}
       <StyledHeader
         data-test="dashboard-header-wrapper"
@@ -649,6 +664,7 @@ const DashboardBuilder = () => {
           {renderDraggableContent}
         </Droppable>
       </StyledHeader>
+      <SrOnlyH2>{t('Dashboard content')}</SrOnlyH2>
       <StyledContent fullSizeChartId={fullSizeChartId}>
         {!editMode &&
           !topLevelTabs &&
diff --git a/superset-frontend/src/dashboard/components/Header/index.tsx b/superset-frontend/src/dashboard/components/Header/index.tsx
index 522a22f1eca..a478082edcc 100644
--- a/superset-frontend/src/dashboard/components/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/Header/index.tsx
@@ -177,6 +177,18 @@ const actionButtonsStyle = (theme: SupersetTheme) => css`
   }
 `;
 
+const SrOnlyH1 = styled.h1`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
 const StyledUndoRedoButton = styled(Button)`
   // TODO: check if we need this
   padding: 0;
@@ -827,6 +839,7 @@ const Header = (): JSX.Element => {
       data-test-id={dashboardInfo.id}
       className="dashboard-header-container"
     >
+      <SrOnlyH1>{dashboardTitle || t('Dashboard')}</SrOnlyH1>
       <PageHeaderWithActions
         editableTitleProps={editableTitleProps}
         certificatiedBadgeProps={certifiedBadgeProps}
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
index a839fbfaab5..26b49bb95c4 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
@@ -33,7 +33,7 @@ import {
   MatrixifyFormData,
 } from '@superset-ui/core';
 import { logging } from '@apache-superset/core/utils';
-import { css, SupersetTheme } from '@apache-superset/core/theme';
+import { css, styled, SupersetTheme } from '@apache-superset/core/theme';
 import { t } from '@apache-superset/core/translation';
 import { Icons } from '@superset-ui/core/components/Icons';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
@@ -84,6 +84,18 @@ export interface ExploreChartHeaderProps {
   isSaveModalVisible?: boolean;
 }
 
+const SrOnlyH1 = styled.h1`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
 const saveButtonStyles = (theme: SupersetTheme) => css`
   color: ${theme.colorPrimaryText};
   & > span[role='img'] {
@@ -272,6 +284,7 @@ export const ExploreChartHeader: FC<ExploreChartHeaderProps> = ({
 
   return (
     <>
+      <SrOnlyH1>{sliceName || t('Explore chart')}</SrOnlyH1>
       <PageHeaderWithActions
         editableTitleProps={{
           title: sliceName ?? '',
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index bea1756ab53..cb3be63e05d 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -84,7 +84,7 @@ const StyledContainer = styled.div`
     padding-right: ${theme.padding}px;
     padding-bottom: ${theme.padding}px;
 
-    h3 {
+    h2 {
       padding-bottom: ${theme.paddingSM}px;
     }
 
@@ -158,6 +158,18 @@ const StyledContainer = styled.div`
   `}
 `;
 
+const SrOnlyH1 = styled.h1`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
 const StyledStepTitle = styled.span`
   ${({ theme: { fontSize, fontWeightStrong } }) => `
       font-size: ${fontSize}px;
@@ -329,7 +341,8 @@ export class ChartCreation extends PureComponent<
 
     return (
       <StyledContainer>
-        <h3>{t('Create a new chart')}</h3>
+        <SrOnlyH1>{t('Create a new chart')}</SrOnlyH1>
+        <h2 aria-hidden="true">{t('Create a new chart')}</h2>
         <Steps direction="vertical" size="small">
           <Steps.Step
             title={<StyledStepTitle>{t('Choose a dataset')}</StyledStepTitle>}
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index e270fd9872c..a5cb4cc164a 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -76,6 +76,18 @@ interface LoadingProps {
 
 const DEFAULT_TAB_ARR = ['dashboards', 'charts'];
 
+const SrOnlyH1 = styled.h1`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
 const WelcomeContainer = styled.div`
   background: ${({ theme }) => theme.colorBgLayout};
   .ant-row.menu {
@@ -350,6 +362,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
         <SubMenu {...menuData} />
       )}
       <WelcomeContainer>
+        <SrOnlyH1>{t('Home')}</SrOnlyH1>
         {WelcomeMessageExtension && <WelcomeMessageExtension />}
         {WelcomeTopExtension && <WelcomeTopExtension />}
         {WelcomeMainExtension && <WelcomeMainExtension />}

From 179d7b0d383948d274ae14855fc0f93260ccf374 Mon Sep 17 00:00:00 2001
From: Fedo Hagge-Kubat <office@aitema.org>
Date: Thu, 9 Apr 2026 21:19:18 +0200
Subject: [PATCH 2/3] fix(a11y): add Filters heading for both horizontal and
 vertical filter bar orientations

---
 .../components/DashboardBuilder/DashboardBuilder.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 872f6c8d8a8..a4fc9c5a4b2 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -521,10 +521,13 @@ const DashboardBuilder = () => {
         {!hideDashboardHeader && <DashboardHeader />}
         {showFilterBar &&
           filterBarOrientation === FilterBarOrientation.Horizontal && (
-            <FilterBar
-              orientation={FilterBarOrientation.Horizontal}
-              hidden={isReport}
-            />
+            <>
+              <SrOnlyH2>{t('Filters')}</SrOnlyH2>
+              <FilterBar
+                orientation={FilterBarOrientation.Horizontal}
+                hidden={isReport}
+              />
+            </>
           )}
       </>
     ),
@@ -593,6 +596,7 @@ const DashboardBuilder = () => {
           hidden={isReport}
           data-test="dashboard-filters-panel"
         >
+          <SrOnlyH2>{t('Filters')}</SrOnlyH2>
           <StickyPanel ref={containerRef} width={filterBarWidth}>
             <ErrorBoundary>
               <FilterBar

From 2679d1a139f262ca5d6e45490803a6aa3d1f2f4a Mon Sep 17 00:00:00 2001
From: Kolja <kolja@aitema.de>
Date: Thu, 7 May 2026 18:10:03 +0200
Subject: [PATCH 3/3] =?UTF-8?q?fix(a11y):=20WCAG=202.4.6=20=E2=80=94=20fix?=
 =?UTF-8?q?=20duplicate=20Filters=20heading,=20adopt=20shared=20VisuallyHi?=
 =?UTF-8?q?dden?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses six review concerns on PR #39241:

- Bug: vertical filter bar rendered "Filters" h2 twice (once outside the
  ResizableSidebar wrapper, once inside renderChild before StickyPanel).
  Screen readers announced the heading twice. Removed the outer one and
  kept the inner one — that's the semantically correct location since it
  scopes to the FiltersPanel container.
- DRY: replaced the SrOnlyH1 / SrOnlyH2 styled blocks copy-pasted into
  five files with the shared VisuallyHidden component (with `as` prop).
  Component lives in src/components/Accessibility/ alongside SkipLink.
- ChartCreation no longer renders the title twice (sr-only h1 plus visible
  aria-hidden h2). Now uses a single visible h1 styled to match the previous
  h2 size, with the StyledContainer CSS rule updated from h2 to h1.
- StyledContainer CSS audit: no other selectors target ChartCreation h3
  anywhere in src — the previous h3 → h2 → h1 chain is contained.
- Indentation in DashboardWrapper return cleaned up (no fragment wrapper
  needed after removing the duplicate h2).
- Tests added for VisuallyHidden covering default rendering, custom `as`,
  prop forwarding, and the sr-only style invariant.

This PR depends on #39240 introducing the same Accessibility folder; once
that merges first, the duplicate component definition will rebase away.
---
 .../Accessibility/VisuallyHidden.test.tsx     | 54 +++++++++++++++++
 .../Accessibility/VisuallyHidden.tsx          | 60 +++++++++++++++++++
 .../src/components/Accessibility/index.tsx    | 22 +++++++
 .../DashboardBuilder/DashboardBuilder.tsx     | 21 ++-----
 .../src/dashboard/components/Header/index.tsx | 17 ++----
 .../components/ExploreChartHeader/index.tsx   | 17 +-----
 .../src/pages/ChartCreation/index.tsx         | 21 ++-----
 superset-frontend/src/pages/Home/index.tsx    | 15 +----
 8 files changed, 155 insertions(+), 72 deletions(-)
 create mode 100644 superset-frontend/src/components/Accessibility/VisuallyHidden.test.tsx
 create mode 100644 superset-frontend/src/components/Accessibility/VisuallyHidden.tsx
 create mode 100644 superset-frontend/src/components/Accessibility/index.tsx

diff --git a/superset-frontend/src/components/Accessibility/VisuallyHidden.test.tsx b/superset-frontend/src/components/Accessibility/VisuallyHidden.test.tsx
new file mode 100644
index 00000000000..a5708e7fd1b
--- /dev/null
+++ b/superset-frontend/src/components/Accessibility/VisuallyHidden.test.tsx
@@ -0,0 +1,54 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from 'spec/helpers/testing-library';
+import VisuallyHidden from './VisuallyHidden';
+
+test('renders children', () => {
+  render(<VisuallyHidden>Screen-reader only text</VisuallyHidden>);
+  expect(screen.getByText('Screen-reader only text')).toBeInTheDocument();
+});
+
+test('renders as span by default', () => {
+  render(<VisuallyHidden>Default tag</VisuallyHidden>);
+  const el = screen.getByText('Default tag');
+  expect(el.tagName).toBe('SPAN');
+});
+
+test('renders as a custom element when as prop is provided', () => {
+  render(<VisuallyHidden as="h1">Page heading</VisuallyHidden>);
+  const el = screen.getByText('Page heading');
+  expect(el.tagName).toBe('H1');
+});
+
+test('forwards id and className props', () => {
+  render(
+    <VisuallyHidden id="my-id" className="my-class">
+      Text
+    </VisuallyHidden>,
+  );
+  const el = screen.getByText('Text');
+  expect(el).toHaveAttribute('id', 'my-id');
+  expect(el).toHaveClass('my-class');
+});
+
+test('applies clip-rect style for screen-reader-only behavior', () => {
+  render(<VisuallyHidden>Hidden</VisuallyHidden>);
+  const el = screen.getByText('Hidden');
+  expect(el).toHaveStyle({ position: 'absolute' });
+});
diff --git a/superset-frontend/src/components/Accessibility/VisuallyHidden.tsx b/superset-frontend/src/components/Accessibility/VisuallyHidden.tsx
new file mode 100644
index 00000000000..c827bb9dbce
--- /dev/null
+++ b/superset-frontend/src/components/Accessibility/VisuallyHidden.tsx
@@ -0,0 +1,60 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { ElementType, FC, ReactNode } from 'react';
+import { styled } from '@apache-superset/core/theme';
+
+/**
+ * VisuallyHidden — content that is available to assistive technology but not
+ * visually rendered. Use for screen-reader-only headings, labels, and live
+ * regions where a duplicate visible element would be redundant.
+ *
+ * Renders a `<span>` by default. Pass `as` to render a different element
+ * (e.g. `as="h1"` for an sr-only page heading).
+ */
+const HiddenElement = styled.span`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
+export interface VisuallyHiddenProps {
+  /** Element type to render. Defaults to `'span'`. */
+  as?: ElementType;
+  children?: ReactNode;
+  id?: string;
+  className?: string;
+}
+
+const VisuallyHidden: FC<VisuallyHiddenProps> = ({
+  as = 'span',
+  children,
+  ...rest
+}) => (
+  <HiddenElement as={as} {...rest}>
+    {children}
+  </HiddenElement>
+);
+
+export default VisuallyHidden;
diff --git a/superset-frontend/src/components/Accessibility/index.tsx b/superset-frontend/src/components/Accessibility/index.tsx
new file mode 100644
index 00000000000..0a81b1e06f7
--- /dev/null
+++ b/superset-frontend/src/components/Accessibility/index.tsx
@@ -0,0 +1,22 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export {
+  default as VisuallyHidden,
+  type VisuallyHiddenProps,
+} from './VisuallyHidden';
diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index a4fc9c5a4b2..e27fd6a711f 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -25,6 +25,7 @@ import { css, styled, useTheme } from '@apache-superset/core/theme';
 import { useDispatch, useSelector } from 'react-redux';
 import { EmptyState, Loading } from '@superset-ui/core/components';
 import { ErrorBoundary, BasicErrorAlert } from 'src/components';
+import { VisuallyHidden } from 'src/components/Accessibility';
 import BuilderComponentPane from 'src/dashboard/components/BuilderComponentPane';
 import DashboardHeader from 'src/dashboard/components/Header';
 import { Icons } from '@superset-ui/core/components/Icons';
@@ -351,17 +352,6 @@ const StyledDashboardContent = styled.div<{
   `}
 `;
 
-const SrOnlyH2 = styled.h2`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
 
 const ELEMENT_ON_SCREEN_OPTIONS = {
   threshold: [1],
@@ -522,7 +512,7 @@ const DashboardBuilder = () => {
         {showFilterBar &&
           filterBarOrientation === FilterBarOrientation.Horizontal && (
             <>
-              <SrOnlyH2>{t('Filters')}</SrOnlyH2>
+              <VisuallyHidden as="h2">{t('Filters')}</VisuallyHidden>
               <FilterBar
                 orientation={FilterBarOrientation.Horizontal}
                 hidden={isReport}
@@ -596,7 +586,7 @@ const DashboardBuilder = () => {
           hidden={isReport}
           data-test="dashboard-filters-panel"
         >
-          <SrOnlyH2>{t('Filters')}</SrOnlyH2>
+          <VisuallyHidden as="h2">{t('Filters')}</VisuallyHidden>
           <StickyPanel ref={containerRef} width={filterBarWidth}>
             <ErrorBoundary>
               <FilterBar
@@ -632,8 +622,6 @@ const DashboardBuilder = () => {
   return (
     <DashboardWrapper>
       {isVerticalFilterBarVisible && (
-        <>
-        <SrOnlyH2>{t('Filters')}</SrOnlyH2>
         <ResizableSidebar
           id={`dashboard:${dashboardId}`}
           enable={dashboardFiltersOpen}
@@ -643,7 +631,6 @@ const DashboardBuilder = () => {
         >
           {renderChild}
         </ResizableSidebar>
-        </>
       )}
       <StyledHeader
         data-test="dashboard-header-wrapper"
@@ -668,7 +655,7 @@ const DashboardBuilder = () => {
           {renderDraggableContent}
         </Droppable>
       </StyledHeader>
-      <SrOnlyH2>{t('Dashboard content')}</SrOnlyH2>
+      <VisuallyHidden as="h2">{t('Dashboard content')}</VisuallyHidden>
       <StyledContent fullSizeChartId={fullSizeChartId}>
         {!editMode &&
           !topLevelTabs &&
diff --git a/superset-frontend/src/dashboard/components/Header/index.tsx b/superset-frontend/src/dashboard/components/Header/index.tsx
index a478082edcc..0638c6fa37a 100644
--- a/superset-frontend/src/dashboard/components/Header/index.tsx
+++ b/superset-frontend/src/dashboard/components/Header/index.tsx
@@ -28,6 +28,7 @@ import { t } from '@apache-superset/core/translation';
 import { Global } from '@emotion/react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import { VisuallyHidden } from 'src/components/Accessibility';
 import { LOG_ACTIONS_TOGGLE_EDIT_DASHBOARD } from 'src/logger/LogUtils';
 import { Icons } from '@superset-ui/core/components/Icons';
 import {
@@ -177,18 +178,6 @@ const actionButtonsStyle = (theme: SupersetTheme) => css`
   }
 `;
 
-const SrOnlyH1 = styled.h1`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-
 const StyledUndoRedoButton = styled(Button)`
   // TODO: check if we need this
   padding: 0;
@@ -839,7 +828,9 @@ const Header = (): JSX.Element => {
       data-test-id={dashboardInfo.id}
       className="dashboard-header-container"
     >
-      <SrOnlyH1>{dashboardTitle || t('Dashboard')}</SrOnlyH1>
+      <VisuallyHidden as="h1">
+        {dashboardTitle || t('Dashboard')}
+      </VisuallyHidden>
       <PageHeaderWithActions
         editableTitleProps={editableTitleProps}
         certificatiedBadgeProps={certifiedBadgeProps}
diff --git a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
index 26b49bb95c4..8a53a229e31 100644
--- a/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
+++ b/superset-frontend/src/explore/components/ExploreChartHeader/index.tsx
@@ -27,13 +27,14 @@ import {
   UnsavedChangesModal,
 } from '@superset-ui/core/components';
 import { AlteredSliceTag } from 'src/components';
+import { VisuallyHidden } from 'src/components/Accessibility';
 import {
   SupersetClient,
   isMatrixifyEnabled,
   MatrixifyFormData,
 } from '@superset-ui/core';
 import { logging } from '@apache-superset/core/utils';
-import { css, styled, SupersetTheme } from '@apache-superset/core/theme';
+import { css, SupersetTheme } from '@apache-superset/core/theme';
 import { t } from '@apache-superset/core/translation';
 import { Icons } from '@superset-ui/core/components/Icons';
 import PropertiesModal from 'src/explore/components/PropertiesModal';
@@ -84,18 +85,6 @@ export interface ExploreChartHeaderProps {
   isSaveModalVisible?: boolean;
 }
 
-const SrOnlyH1 = styled.h1`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-
 const saveButtonStyles = (theme: SupersetTheme) => css`
   color: ${theme.colorPrimaryText};
   & > span[role='img'] {
@@ -284,7 +273,7 @@ export const ExploreChartHeader: FC<ExploreChartHeaderProps> = ({
 
   return (
     <>
-      <SrOnlyH1>{sliceName || t('Explore chart')}</SrOnlyH1>
+      <VisuallyHidden as="h1">{sliceName || t('Explore chart')}</VisuallyHidden>
       <PageHeaderWithActions
         editableTitleProps={{
           title: sliceName ?? '',
diff --git a/superset-frontend/src/pages/ChartCreation/index.tsx b/superset-frontend/src/pages/ChartCreation/index.tsx
index cb3be63e05d..67be7314a12 100644
--- a/superset-frontend/src/pages/ChartCreation/index.tsx
+++ b/superset-frontend/src/pages/ChartCreation/index.tsx
@@ -84,8 +84,12 @@ const StyledContainer = styled.div`
     padding-right: ${theme.padding}px;
     padding-bottom: ${theme.padding}px;
 
-    h2 {
+    h1 {
       padding-bottom: ${theme.paddingSM}px;
+      font-size: ${theme.fontSizeXL}px;
+      font-weight: ${theme.fontWeightStrong};
+      line-height: ${theme.lineHeightHeading2};
+      margin: 0;
     }
 
     & .dataset {
@@ -158,18 +162,6 @@ const StyledContainer = styled.div`
   `}
 `;
 
-const SrOnlyH1 = styled.h1`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-
 const StyledStepTitle = styled.span`
   ${({ theme: { fontSize, fontWeightStrong } }) => `
       font-size: ${fontSize}px;
@@ -341,8 +333,7 @@ export class ChartCreation extends PureComponent<
 
     return (
       <StyledContainer>
-        <SrOnlyH1>{t('Create a new chart')}</SrOnlyH1>
-        <h2 aria-hidden="true">{t('Create a new chart')}</h2>
+        <h1>{t('Create a new chart')}</h1>
         <Steps direction="vertical" size="small">
           <Steps.Step
             title={<StyledStepTitle>{t('Choose a dataset')}</StyledStepTitle>}
diff --git a/superset-frontend/src/pages/Home/index.tsx b/superset-frontend/src/pages/Home/index.tsx
index a5cb4cc164a..070611a1a0c 100644
--- a/superset-frontend/src/pages/Home/index.tsx
+++ b/superset-frontend/src/pages/Home/index.tsx
@@ -49,6 +49,7 @@ import { Switch } from '@superset-ui/core/components/Switch';
 import getBootstrapData from 'src/utils/getBootstrapData';
 import { TableTab } from 'src/views/CRUD/types';
 import SubMenu, { SubMenuProps } from 'src/features/home/SubMenu';
+import { VisuallyHidden } from 'src/components/Accessibility';
 import { userHasPermission } from 'src/dashboard/util/permissionUtils';
 import { WelcomePageLastTab } from 'src/features/home/types';
 import ActivityTable from 'src/features/home/ActivityTable';
@@ -76,18 +77,6 @@ interface LoadingProps {
 
 const DEFAULT_TAB_ARR = ['dashboards', 'charts'];
 
-const SrOnlyH1 = styled.h1`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-
 const WelcomeContainer = styled.div`
   background: ${({ theme }) => theme.colorBgLayout};
   .ant-row.menu {
@@ -362,7 +351,7 @@ function Welcome({ user, addDangerToast }: WelcomeProps) {
         <SubMenu {...menuData} />
       )}
       <WelcomeContainer>
-        <SrOnlyH1>{t('Home')}</SrOnlyH1>
+        <VisuallyHidden as="h1">{t('Home')}</VisuallyHidden>
         {WelcomeMessageExtension && <WelcomeMessageExtension />}
         {WelcomeTopExtension && <WelcomeTopExtension />}
         {WelcomeMainExtension && <WelcomeMainExtension />}