diff --git a/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap b/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap
index 5ac8dd150da..e3721f1c9d8 100644
--- a/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/MostRead/Label/__snapshots__/index.test.tsx.snap
@@ -31,6 +31,12 @@ exports[`MostReadSectionLabel assertion should render most-read section label wi
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -120,6 +126,8 @@ exports[`MostReadSectionLabel assertion should render most-read section label wi
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-Most-Read"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
diff --git a/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap
index 01ccb09488a..d3752ff09a6 100644
--- a/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/CpsOnwardJourney/__snapshots__/index.test.jsx.snap
@@ -714,6 +714,12 @@ exports[`CpsOnwardJourney renders section label with element as strong 1`] = `
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1088,6 +1094,12 @@ exports[`CpsOnwardJourney renders section label with with alternative background
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1188,6 +1200,8 @@ exports[`CpsOnwardJourney renders section label with with alternative background
       >
         <h2
           class="emotion-9 emotion-10"
+          id="section-label-heading-heading-label"
+          tabindex="-1"
         >
           <span
             class="emotion-11 emotion-12"
@@ -1462,6 +1476,12 @@ exports[`CpsOnwardJourney renders section label with without bar under section l
   padding: 0;
 }
 
+.emotion-9:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-11 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1562,6 +1582,8 @@ exports[`CpsOnwardJourney renders section label with without bar under section l
       >
         <h2
           class="emotion-9 emotion-10"
+          id="section-label-heading-heading-label"
+          tabindex="-1"
         >
           <span
             class="emotion-11 emotion-12"
@@ -1883,6 +1905,12 @@ exports[`CpsOnwardJourney renders skip link with multiple promos 1`] = `
   padding: 0;
 }
 
+.emotion-13:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2003,6 +2031,8 @@ exports[`CpsOnwardJourney renders skip link with multiple promos 1`] = `
         >
           <h2
             class="emotion-13 emotion-14"
+            id="section-label-heading-heading-label"
+            tabindex="-1"
           >
             <span
               class="emotion-15 emotion-16"
@@ -2348,6 +2378,12 @@ exports[`CpsOnwardJourney renders skip link with single promo 1`] = `
   padding: 0;
 }
 
+.emotion-13:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-15 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2468,6 +2504,8 @@ exports[`CpsOnwardJourney renders skip link with single promo 1`] = `
         >
           <h2
             class="emotion-13 emotion-14"
+            id="section-label-heading-heading-label"
+            tabindex="-1"
           >
             <span
               class="emotion-15 emotion-16"
diff --git a/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap
index 1cce4eaed24..c499550e129 100644
--- a/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/CpsRecommendations/__snapshots__/index.test.jsx.snap
@@ -198,6 +198,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -775,6 +781,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1622,6 +1634,12 @@ exports[`CpsRecommendations should render when cpsRecommendations toggle is enab
   padding: 0;
 }
 
+.emotion-11:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-13 {
   display: -webkit-box;
   display: -webkit-flex;
diff --git a/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap
index 108338e9ef3..5b9d7e47ac8 100644
--- a/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/__snapshots__/index.test.jsx.snap
@@ -43,6 +43,12 @@ exports[`RecentAudioEpisodes should render audio episodes correctly 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -361,6 +367,8 @@ exports[`RecentAudioEpisodes should render audio episodes correctly 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-recent-episodes"
+        tabindex="-1"
       >
         <span
           class="emotion-7 emotion-8"
diff --git a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap
index 4daf91174c1..63f3cf532dd 100644
--- a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/__snapshots__/index.test.jsx.snap
@@ -39,6 +39,12 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
   padding: 0;
 }
 
+.emotion-3:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-5 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -451,6 +457,8 @@ exports[`Recent Video Episodes should render video episodes correctly 1`] = `
     >
       <h2
         class="emotion-3 emotion-4"
+        id="section-label-heading-recent-episodes"
+        tabindex="-1"
       >
         <span
           class="emotion-5 emotion-6"
diff --git a/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap
index 8a2c5cad62d..a44e0255f3d 100644
--- a/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/IndexPageSection/__snapshots__/index.test.jsx.snap
@@ -46,6 +46,12 @@ HTMLCollection [
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -922,6 +928,8 @@ HTMLCollection [
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
+        tabindex="-1"
       >
         <span
           class="emotion-6 emotion-7"
@@ -1336,6 +1344,12 @@ exports[`IndexPageSection Container snapshots should render correctly for canoni
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2213,6 +2227,8 @@ exports[`IndexPageSection Container snapshots should render correctly for canoni
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
+        tabindex="-1"
       >
         <span
           class="emotion-6 emotion-7"
@@ -2620,6 +2636,12 @@ exports[`IndexPageSection Container snapshots should render correctly with a lin
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -3468,6 +3490,8 @@ exports[`IndexPageSection Container snapshots should render correctly with a lin
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
+        tabindex="-1"
       >
         <span
           class="emotion-6 emotion-7"
@@ -3675,6 +3699,12 @@ exports[`IndexPageSection Container snapshots should render with only one item 1
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4037,6 +4067,8 @@ exports[`IndexPageSection Container snapshots should render with only one item 1
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
+        tabindex="-1"
       >
         <span
           class="emotion-6 emotion-7"
@@ -4161,6 +4193,12 @@ exports[`IndexPageSection Container snapshots should render without a bar 1`] =
   padding: 0;
 }
 
+.emotion-4:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-6 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -5026,6 +5064,8 @@ exports[`IndexPageSection Container snapshots should render without a bar 1`] =
     >
       <h2
         class="emotion-4 emotion-5"
+        id="section-label-heading-Top-Stories"
+        tabindex="-1"
       >
         <span
           class="emotion-6 emotion-7"
diff --git a/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap
index bd62a1955f0..40e11e79fe9 100644
--- a/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/RadioSchedule/Canonical/__snapshots__/index.test.jsx.snap
@@ -73,6 +73,12 @@ exports[`Canonical RadioSchedule With initial data renders correctly for a servi
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -882,6 +888,8 @@ exports[`Canonical RadioSchedule With initial data renders correctly for a servi
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-Radio-Schedule"
+        tabindex="-1"
       >
         <span
           class="emotion-7 emotion-8"
@@ -1515,6 +1523,12 @@ exports[`Canonical RadioSchedule Without initial data renders correctly for a se
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2324,6 +2338,8 @@ exports[`Canonical RadioSchedule Without initial data renders correctly for a se
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-Radio-Schedule"
+        tabindex="-1"
       >
         <span
           class="emotion-7 emotion-8"
diff --git a/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap b/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap
index 3206ea99708..573f9b77a66 100644
--- a/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/containers/RelatedTopics/__snapshots__/index.test.jsx.snap
@@ -36,6 +36,12 @@ exports[`Expected use should render correctly with a single tag 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -200,6 +206,8 @@ exports[`Expected use should render correctly with a single tag 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-related-topics"
+        tabindex="-1"
       >
         <span
           class="emotion-7 emotion-8"
@@ -271,6 +279,12 @@ exports[`Expected use should render correctly with multiple tags 1`] = `
   padding: 0;
 }
 
+.emotion-5:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-7 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -436,6 +450,8 @@ exports[`Expected use should render correctly with multiple tags 1`] = `
     >
       <h2
         class="emotion-5 emotion-6"
+        id="section-label-heading-related-topics"
+        tabindex="-1"
       >
         <span
           class="emotion-7 emotion-8"
diff --git a/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap b/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
index f481ce78b4b..1a1ce2714df 100644
--- a/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
+++ b/src/app/legacy/psammead/psammead-section-label/src/__snapshots__/index.test.jsx.snap
@@ -32,6 +32,12 @@ exports[`SectionLabel With bar When hideSectionHeader is true should add styling
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -121,6 +127,8 @@ exports[`SectionLabel With bar When hideSectionHeader is true should add styling
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -167,6 +175,12 @@ exports[`SectionLabel With bar With heading overriden should render a span eleme
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -302,6 +316,12 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -444,6 +464,8 @@ exports[`SectionLabel With bar With linking title should render correctly 1`] =
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -503,6 +525,12 @@ exports[`SectionLabel With bar With linking title should render correctly with a
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -645,6 +673,8 @@ exports[`SectionLabel With bar With linking title should render correctly with a
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -704,6 +734,12 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -846,6 +882,8 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -905,6 +943,12 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1047,6 +1091,8 @@ exports[`SectionLabel With bar With linking title should render correctly with e
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -1112,6 +1158,12 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1201,6 +1253,8 @@ exports[`SectionLabel With bar With plain title should render correctly with ara
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1247,6 +1301,12 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1336,6 +1396,8 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1382,6 +1444,12 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1471,6 +1539,8 @@ exports[`SectionLabel With bar With plain title should render correctly with exp
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1517,6 +1587,12 @@ exports[`SectionLabel With bar With plain title should render correctly with mob
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1606,6 +1682,8 @@ exports[`SectionLabel With bar With plain title should render correctly with mob
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -1652,6 +1730,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1794,6 +1878,8 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -1853,6 +1939,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -1995,6 +2087,8 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -2054,6 +2148,12 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   color: #222222;
   -webkit-text-decoration: none;
@@ -2196,6 +2296,8 @@ exports[`SectionLabel With bar Without bar With linking title should render corr
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <a
         class="focusIndicatorDisplayBlock emotion-4 emotion-5"
@@ -2255,6 +2357,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2344,6 +2452,8 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -2390,6 +2500,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2479,6 +2595,8 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
@@ -2525,6 +2643,12 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   padding: 0;
 }
 
+.emotion-2:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-4 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2614,6 +2738,8 @@ exports[`SectionLabel With bar Without bar With plain title should render correc
   >
     <h2
       class="emotion-2 emotion-3"
+      id="section-label-heading-test-section-label"
+      tabindex="-1"
     >
       <span
         class="emotion-4 emotion-5"
diff --git a/src/app/legacy/psammead/psammead-section-label/src/index.jsx b/src/app/legacy/psammead/psammead-section-label/src/index.jsx
index 6a7e1902247..12a14c19dc8 100644
--- a/src/app/legacy/psammead/psammead-section-label/src/index.jsx
+++ b/src/app/legacy/psammead/psammead-section-label/src/index.jsx
@@ -9,6 +9,7 @@ import {
   GEL_SPACING_QUAD,
 } from '#psammead/gel-foundations/src/spacings';
 import { GHOST } from '#app/components/ThemeProvider/palette';
+import { focusIndicatorThickness } from '#app/components/ThemeProvider/focusIndicator';
 import { PlainTitle, LinkTitle } from './titles';
 
 const SectionLabelWrapper = styled.div`
@@ -42,6 +43,14 @@ export const Heading = styled.h2`
   /* reset default margins */
   margin: 0;
   padding: 0;
+
+  :focus-visible {
+    outline: ${({ theme: { palette } }) =>
+      `${focusIndicatorThickness} solid ${palette.BLACK}`};
+    box-shadow: ${({ theme: { palette } }) =>
+      `0 0 0 ${focusIndicatorThickness} ${palette.WHITE}`};
+    outline-offset: ${focusIndicatorThickness};
+  }
 `;
 
 const SectionLabel = ({
@@ -58,7 +67,14 @@ const SectionLabel = ({
   ...props
 }) => (
   <SectionLabelWrapper visuallyHidden={visuallyHidden} {...props}>
-    <Heading as={overrideHeadingAs}>
+    <Heading
+      as={overrideHeadingAs}
+      {...(labelId &&
+        !overrideHeadingAs && {
+          id: `section-label-heading-${labelId}`,
+          tabIndex: -1,
+        })}
+    >
       {linkText && href ? (
         <LinkTitle
           dir={dir}
diff --git a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
index 44e7c2fc1fe..34af563950d 100644
--- a/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/ArticlePage/__snapshots__/index.test.tsx.snap
@@ -364,6 +364,12 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
   padding: 0;
 }
 
+.emotion-15:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -871,6 +877,8 @@ exports[`Article Page should render a ltr article (pidgin) with most read correc
       >
         <h2
           class="emotion-15 emotion-16"
+          id="section-label-heading-Most-Read"
+          tabindex="-1"
         >
           <span
             class="emotion-17 emotion-18"
@@ -1528,6 +1536,12 @@ exports[`Article Page should render a news article correctly 1`] = `
   padding: 0;
 }
 
+.emotion-19:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-21 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -2299,6 +2313,8 @@ exports[`Article Page should render a news article correctly 1`] = `
       >
         <h2
           class="emotion-19 emotion-20"
+          id="section-label-heading-Most-Read"
+          tabindex="-1"
         >
           <span
             class="emotion-21 emotion-22"
@@ -3700,6 +3716,12 @@ exports[`Article Page should render a rtl article (persian) with most read corre
   padding: 0;
 }
 
+.emotion-15:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-17 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -4427,6 +4449,8 @@ exports[`Article Page should render a rtl article (persian) with most read corre
       >
         <h2
           class="emotion-15 emotion-16"
+          id="section-label-heading-Most-Read"
+          tabindex="-1"
         >
           <span
             class="emotion-17 emotion-18"
diff --git a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
index 3418a415bad..9ccf88b55e0 100644
--- a/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
+++ b/src/app/pages/LiveRadioPage/__snapshots__/index.test.tsx.snap
@@ -305,6 +305,12 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
   padding: 0;
 }
 
+.emotion-14:focus-visible {
+  outline: 0.1875rem solid #000000;
+  box-shadow: 0 0 0 0.1875rem #FFFFFF;
+  outline-offset: 0.1875rem;
+}
+
 .emotion-16 {
   display: -webkit-box;
   display: -webkit-flex;
@@ -1106,6 +1112,8 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
     >
       <h2
         class="emotion-14 emotion-15"
+        id="section-label-heading-Radio-Schedule"
+        tabindex="-1"
       >
         <span
           class="emotion-16 emotion-17"